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