可選鏈操作符“ ?. ”

可選鏈操作符( ?. )允許讀取位於連接對象鏈深處的屬性的值，而不必明確驗證鏈中的每個引用是否有效。?. 操作符的功能類似於 . 鏈式操作符，不同之處在於，在引用為空(nullish ) (null 或者 undefined) 的情況下不會引起錯誤，該表達式短路返回值是 undefined。與函數調用一起使用時，如果給定的函數不存在，則返回 undefined。

舉個簡單例子：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。

這等價於以下表達式，但實際上沒有創建臨時變量：

let temp = obj.first; let nestedProp = ((temp === null || temp === undefined) ? undefined : temp.second);

注意：可選鏈不能用於賦值

let object = {};
object?.property = 1; // Uncaught SyntaxError: Invalid left-hand side in assignment；

短路計算

當在表達式中使用可選鏈時，如果左操作數是 null 或 undefined，表達式將不會被計算，例如：

let potentiallyNullObj = null; let x = 0; let prop = potentiallyNullObj?.[x++]; console.log(x); // x 將不會被遞增，依舊輸出 0