Defensive - daniel-qa/Vue GitHub Wiki

Defensive

可選串連運算子（Optional Chaining）的延伸用法

?. 不只可以用來存取物件屬性，它還可以用在函數呼叫和陣列存取上，這讓它的應用更廣泛。

1 .物件屬性存取 (?.)

這是你原本程式碼中看到的用法。

const user = { profile: { name: 'Gemini' } };
console.log(user?.profile?.name); // 輸出 'Gemini'

const user2 = {};
console.log(user2?.profile?.name); // 輸出 undefined，不會報錯

2 .函數呼叫 (?.())

當你不確定一個物件的方法（method）是否存在時，可以用 ?.() 來安全地呼叫它。

const myObject = {
  sayHi: () => console.log('Hi!')
};
myObject.sayHi?.(); // 輸出 'Hi!'

const myObject2 = {};
myObject2.sayHi?.(); // 什麼都不做，不會報錯

3 .陣列存取 (?.[])

當你不確定一個陣列是否存在或某個索引位置是否有值時，可以用 ?.[] 來安全地存取。

const myArray = [1, 2, 3];
console.log(myArray?.[1]); // 輸出 2

const myArray2 = null;
console.log(myArray2?.[0]); // 輸出 undefined，不會報錯