JavaScript 可選鏈接運算符（Optional Chaining）介紹與入門教學 | 學習筆記
前言
在 JavaScript 中，處理深層嵌套結構時，我們經常會遇到 null 或 undefined 的問題。例如，當我們需要訪問一個對象的屬性，而該屬性本身可能不存在時，傳統的做法會導致錯誤，這樣的情況會非常繁瑣。為了解決這個問題，JavaScript 引入了 可選鏈接運算符（Optional Chaining），簡化了屬性訪問過程，並防止了因為屬性為 null 或 undefined 造成的錯誤。
本文將詳細介紹可選鏈接運算符的概念、用法以及常見的實際應用場景。
1. 可選鏈接運算符的基本語法
可選鏈接運算符（?.） 是 JavaScript 中一種新的語法，通過它我們可以安全地訪問對象的屬性，並且在中途如果遇到 null 或 undefined，就會停止執行並返回 undefined，而不是拋出錯誤。
基本語法結構如下：
object?.property
object?.[key]
object?.method()
object?.property：如果object為null或undefined，則返回undefined，否則返回對象的property屬性。object?.[key]：這是動態屬性名的情況，與object?.property類似，當key是變數或表達式時，這種語法很有用。object?.method()：如果object或method為null或undefined，則返回undefined，不會調用該方法。
2. 為什麼需要可選鏈接運算符？
在傳統 JavaScript 中，當我們處理嵌套對象的屬性時，若某個屬性不存在或是 null、undefined，我們會遇到錯誤。例如：
const user = {
name: 'Alice',
address: {
street: '123 Main St',
},
};
console.log(user.address.street); // "123 Main St"
console.log(user.phone.number); // TypeError: Cannot read property 'number' of undefined
在這個例子中，當我們嘗試訪問 user.phone.number 時，由於 phone 屬性不存在，會拋出錯誤。為了解決這個問題，通常我們需要進行多層檢查：
console.log(user && user.phone && user.phone.number); // undefined
這樣的寫法看起來雜亂，並且很難處理更深層次的嵌套。可選鏈接運算符解決了這個問題，使得代碼更加簡潔和安全。
3. 可選鏈接運算符的應用場景
3.1 訪問對象屬性
當我們需要訪問對象的某一層屬性時，如果中間層級的某個屬性為 null 或 undefined，那麼使用可選鏈接運算符就能防止錯誤的拋出。
const user = {
name: 'Alice',
address: {
street: '123 Main St',
},
};
console.log(user?.address?.street); // "123 Main St"
console.log(user?.phone?.number); // undefined
在這個例子中，user?.address?.street 會安全地返回 street 屬性，而 user?.phone?.number 會返回 undefined，因為 phone 屬性並不存在。
3.2 訪問數組元素
在操作數組時，如果我們想訪問某個索引的元素，也可以使用可選鏈接運算符來避免錯誤。
const array = [1, 2, 3];
console.log(array?.[1]); // 2
console.log(array?.[10]); // undefined
這裡，array?.[1] 會返回 2，而 array?.[10] 會返回 undefined，即使索引超出了數組的範圍。
3.3 調用對象方法
如果對象的方法不存在，使用可選鏈接運算符可以避免拋出錯誤，並且返回 undefined。
const user = {
name: 'Alice',
greet() {
console.log('Hello!');
},
};
user?.greet(); // "Hello!"
user?.sayGoodbye(); // undefined
在這個例子中，user?.greet() 會調用 greet 方法並顯示 "Hello!"，而 user?.sayGoodbye() 則返回 undefined，因為 sayGoodbye 方法不存在。
3.4 動態屬性名
可選鏈接運算符也支持用動態屬性名來訪問對象屬性，這在處理具有不確定屬性的對象時非常有用。
const user = {
name: 'Alice',
preferences: {
theme: 'dark',
},
};
const key = 'theme';
console.log(user?.preferences?.[key]); // "dark"
在這個例子中，key 是一個變量，表示要訪問的屬性名，user?.preferences?.[key] 可以安全地獲取 preferences 中的 theme 屬性。
4. 與傳統方法的比較
使用可選鏈接運算符，我們的代碼變得更加簡潔，減少了不必要的檢查。傳統的方式可能需要多次檢查對象的存在，才能安全地訪問某個屬性，而可選鏈接運算符讓這一過程變得直觀且易於維護。
傳統方法：
if (user && user.address && user.address.street) {
console.log(user.address.street);
}
使用可選鏈接運算符：
console.log(user?.address?.street);
5. 可選鏈接運算符與 null 合併運算符（??）
可選鏈接運算符經常與 null 合併運算符（??）一起使用。?? 用來返回當前值是否為 null 或 undefined，如果是則返回其右側的值，否則返回當前值。
const user = null;
const name = user?.name ?? 'Default Name';
console.log(name); // "Default Name"
在這裡，user?.name 會返回 undefined，因為 user 是 null，而 ?? 會將其替換為 'Default Name'。
6. 總結
可選鏈接運算符（?.）是 JavaScript 中非常實用的一個特性，它簡化了嵌套對象屬性訪問的邏輯，避免了 null 或 undefined 帶來的錯誤，使代碼更加簡潔且容易理解。無論是在處理複雜的 API 返回數據還是操作動態結構的對象時，可選鏈接運算符都能發揮重要作用。在日常開發中，我們可以利用它來編寫更健壯、可讀性更強的代碼。