在 JavaScript 引入可選鏈（optional chaining）和空值合并運算符（nullish coalescing operator）之前，開發者需要使用多種方法來安全地訪問對象的嵌套屬性以及處理可能為 null 或 undefined 的值。這些方法雖然有效，但存在一些痛點。ES2020 引入的可選鏈和空值合并運算符則極大地簡化了這些問題的處理。
1. 使用邏輯與運算符 (&&)
在早期，判斷對象是否包含某個屬性并且該屬性不是 null 或 undefined，通常使用邏輯與運算符：
var value = obj && obj.prop;
但這種方法僅適用于一層屬性檢查，對于深層次的嵌套屬性，代碼會變得冗長且難以維護。
2. 使用邏輯或運算符 (||)
為了提供一個默認值，當變量可能是 null 或 undefined 時，可以使用邏輯或運算符：
var value = obj && obj.prop || defaultValue;
這種方式不僅會在 null 和 undefined 時返回 defaultValue，還會在 false, 0, '' (空字符串) 等其他假值情況下返回 defaultValue，這可能導致不期望的行為。
3. 嵌套檢查
對于更深層次的嵌套屬性，需要進行多層檢查以確保每一層都不是 null 或 undefined：
var value = obj && obj.level1 && obj.level1.level2 && obj.level1.level2.level3;
盡管可以這樣使用，但代碼會變得冗長、難以閱讀，并且容易出錯。每次添加或修改屬性層級時都需要調整代碼。
當對象嵌套層級較深或者屬性可能不存在時，我們需要進行一系列的條件判斷來避免程序報錯。為了簡化這些復雜的邏輯，JavaScript 引入了兩個非常實用的操作符：可選鏈操作符（?.） 和 空值合并操作符（??）。今天介紹下這兩個操作符的使用方法以及它們背后的原理。
什么是可選鏈操作符（?.）
基本概念
可選鏈操作符（?.）用于簡化訪問嵌套對象的屬性或調用函數時的檢查過程。它允許我們在訪問可能為 null 或 undefined 的對象屬性時避免拋出錯誤。
使用場景
假設我們有一個用戶對象 user，其中包含地址信息 address，而地址信息中又包含城市信息 city：
const user = {
address: {
city: "Beijing"
}
};
如果我們直接訪問 user.address.city，這是安全的。但如果 user.address 不存在，則會拋出錯誤。這時我們可以使用可選鏈操作符來避免這種情況：
console.log(user.address?.city); // 輸出 "Beijing"
console.log(user.unknown?.city); // 輸出 undefined
工作原理
當使用可選鏈操作符時，如果左側的操作數為 null 或 undefined，則整個表達式的值立即變為 undefined，而不會繼續嘗試訪問右側的屬性或調用方法。
console.log(null?.prop); // 輸出 undefined
console.log(undefined?.prop); // 輸出 undefined
空值合并操作符（??）
基本概念
空值合并操作符（??）用于提供一個默認值給一個可能為 null 或 undefined 的變量。它只會在操作數為 null 或 undefined 時返回右側的值，否則返回左側的操作數。
在以往，
var value = obj && obj.prop || defaultValue;
但是要注意，這種方式不僅會在 null 和 undefined 時返回 defaultValue，也會在 false, 0, '' (空字符串) 等其他假值情況下返回 defaultValue，這可能不是你想要的行為。
使用場景
當我們希望為某個變量設置一個默認值時，可以使用空值合并操作符。例如，假設我們有一個可能為空的字符串變量 name，我們希望在它為空時使用一個默認名字：
let name = null;
const defaultName = "Guest";
console.log(name ?? defaultName); // 輸出 "Guest"
工作原理
空值合并操作符僅在左側的操作數為 null 或 undefined 時返回右側的操作數，否則返回左側的操作數。這使得我們可以優雅地處理缺失數據的情況。
console.log(null ?? "default"); // 輸出 "default"
console.log(undefined ?? "default"); // 輸出 "default"
console.log("Hello" ?? "default"); // 輸出 "Hello"
結合使用
在實際開發中，我們經常需要結合使用這兩種操作符來處理復雜的數據結構。例如，我們可能需要從一個深度嵌套的對象中獲取一個值，并為其提供一個默認值：
const user = {
address: {
city: null
}
};
const cityName = user.address?.city ?? "Unknown City";
console.log(cityName); // 輸出 "Unknown City"
在這個例子中，首先使用可選鏈操作符檢查 user.address.city 是否存在，如果不存在則返回 undefined。然后，空值合并操作符確保最終結果是 "Unknown City" 而不是 undefined。
通過使用可選鏈操作符和空值合并操作符，我們可以大大簡化對可能為 null 或 undefined 的數據的處理邏輯，使代碼更加簡潔和易于維護。這兩種操作符在處理復雜對象和默認值時提供了強大的支持，是現代JavaScript開發中的重要工具。
該文章在 2024/12/25 9:24:57 編輯過
400 186 1886
