天天看點

JavaScript - 可選鍊、空值合并運算符可選鍊操作符空值合并運算符

可選鍊操作符

可選鍊操作符( 

?.

 )允許讀取位于連接配接對象鍊深處的屬性的值,而不必明确驗證鍊中的每個引用是否有效。

通過連接配接的對象的引用或函數可能是 

undefined

 或 

null

 時,可選鍊操作符提供了一種方法來簡化被連接配接對象的值通路。

當嘗試通路可能不存在的對象屬性時,可選鍊操作符将會使表達式更短、更簡明。

Example:

let nestedProp = obj.first && obj.first.second;
           

為了避免報錯,在通路

obj.first.second

之前,要保證 

obj.first

 的值既不是 

null

,也不是 

undefined

。如果隻是直接通路 

obj.first.second

,而不對 

obj.first

 進行校驗,則有可能抛出錯誤。

有了可選鍊操作符(

?.

),在通路 

obj.first.second

 之前,不再需要明确地校驗 

obj.first

 的狀态,再并用短路計算擷取最終結果:

let nestedProp = obj.first?.second;
           

通過使用 

?.

 操作符取代 

.

 操作符,JavaScript 會在嘗試通路 

obj.first.second

 之前,先隐式地檢查并确定 

obj.first

 既不是 

null

 也不是 

undefined

。如果

obj.first 

是 

null

 或者 

undefined

,表達式将會短路計算直接傳回 

undefined

空值合并運算符

空值合并操作符(

??

)是一個邏輯操作符,當左側的操作數為 

null

 或者 

undefined

 時,傳回其右側操作數,否則傳回左側操作數。

||

 是一個布爾邏輯運算符,左側的操作數會被強制轉換成布爾值用于求值。任何假值(

, 

''

, 

NaN

, 

null

, 

undefined

)都不會被傳回。

??

const nullValue = null;
const emptyText = ""; // 空字元串,是一個假值,Boolean("") === false
const someNumber = 42;

const valA = nullValue ?? "valA 的預設值";
const valB = emptyText ?? "valB 的預設值";
const valC = someNumber ?? 0;

console.log(valA); // "valA 的預設值"
console.log(valB); // ""(空字元串雖然是假值,但不是 null 或者 undefined)
console.log(valC); // 42
           

||

let count = 0;
let text = "";

let qty = count || 42;
let message = text || "hi!";
console.log(qty);     // 42,而不是 0
console.log(message); // "hi!",而不是 ""
           

更多 - 可選鍊

更多 - 空值合并運算符

繼續閱讀