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!"，而不是 ""
           

更多 - 可選鍊

更多 - 空值合并運算符