JavaScript 自學筆記18

1. 選擇鏈式操作符 ?.

ES2020引入選擇鏈式操作符?.，它允許訪問位於一個對象鏈深處的屬性值，而無需檢查鏈中的每個引用是否爲空null或未定義undefined。一旦鏈中的一個引用是空null或者未定義undefined，則選擇鏈式操作符將直接返回undefined。

(1). 語法

• objectName ?. propertyName
• objectName ?. [expression]

如：function getAnimal (id) {

if (id <= 0)

return null;

return {

id: id,

name: 'cat',

address: {

city: 'Auckland',

suburb: 'Mount Roskill'

}};};

let animal = getAnimal(1);

let address = animal ?. address;

// 如果animal是空，或者未定義，那麽選擇鏈操作符 ?. 會直接返回未定義。

// 技術上來説，該操作符的效果等同於：

let address = (animal !== null || animal !== undefined) ? animal.address : undefined;

(2). 叠加運用?.操作符

如：let city = animal ?. address ?. city;

(3). 與空值聯合運算符??聯合使用

如：let name = animal ?. name ?? 'cat';

(4). 在函數調用中，使用選擇鏈式操作符

• 語法：functionName ?. (args)

如：let cat = {

name: 'Lulu',

greet(name){

console.log( `Hello, ` + name)

}};

cat.greet('lulu'); // 'Hello, lulu'

// 如果調用一個不存在的方法就會報錯

如：cat.eat(); // Uncaught TypeError: cat.eat is not a function

// 爲了避免系統報錯，可以使用選擇鏈式操作符

如：let catEat = cat.eat ?. ();

console.log(catEat); //undefined

// 也可以在回調函數中使用選擇鏈式操作符

如：function getAnimal (id, callback) {

let animal = {

id: id,

name: 'cat'};

callback ?. (animal); // 用來檢查回調函數是否存在

};