在 JavaScript 引入可選鏈（optional chaining）和空值合并運算符（nullish coalescing operator）之前，開發(fā)者需要使用多種方法來安全地訪問對象的嵌套屬性以及處理可能為 null 或 undefined 的值。這些方法雖然有效，但存在一些痛點。ES2020 引入的可選鏈和空值合并運算符則極大地簡化了這些問題的處理。

1. 使用邏輯與運算符 (&&)

在早期，判斷對象是否包含某個屬性并且該屬性不是 null 或 undefined，通常使用邏輯與運算符：

var value = obj && obj.prop;

但這種方法僅適用于一層屬性檢查，對于深層次的嵌套屬性，代碼會變得冗長且難以維護。

2. 使用邏輯或運算符 (||)

為了提供一個默認值，當(dāng)變量可能是 null 或 undefined 時，可以使用邏輯或運算符：

var value = obj && obj.prop || defaultValue;

這種方式不僅會在 null 和 undefined 時返回 defaultValue，還會在 false, 0, '' (空字符串) 等其他假值情況下返回 defaultValue，這可能導(dǎo)致不期望的行為。

3. 嵌套檢查

對于更深層次的嵌套屬性，需要進行多層檢查以確保每一層都不是 null 或 undefined：

var value = obj && obj.level1 && obj.level1.level2 && obj.level1.level2.level3;

盡管可以這樣使用，但代碼會變得冗長、難以閱讀，并且容易出錯。每次添加或修改屬性層級時都需要調(diào)整代碼。

當(dāng)對象嵌套層級較深或者屬性可能不存在時，我們需要進行一系列的條件判斷來避免程序報錯。為了簡化這些復(fù)雜的邏輯，JavaScript 引入了兩個非常實用的操作符：可選鏈操作符（?.） 和 空值合并操作符（??）。今天介紹下這兩個操作符的使用方法以及它們背后的原理。

4. 什么是可選鏈操作符（?.）

(1) 基本概念

可選鏈操作符（?.）用于簡化訪問嵌套對象的屬性或調(diào)用函數(shù)時的檢查過程。它允許我們在訪問可能為 null 或 undefined 的對象屬性時避免拋出錯誤。

(2) 使用場景

假設(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

(3) 工作原理

當(dāng)使用可選鏈操作符時，如果左側(cè)的操作數(shù)為 null 或 undefined，則整個表達式的值立即變?yōu)?nbsp;undefined，而不會繼續(xù)嘗試訪問右側(cè)的屬性或調(diào)用方法。

console.log(null?.prop); // 輸出 undefined
console.log(undefined?.prop); // 輸出 undefined

5. 空值合并操作符（??）

(1) 基本概念

空值合并操作符（??）用于提供一個默認值給一個可能為 null 或 undefined 的變量。它只會在操作數(shù)為 null 或 undefined 時返回右側(cè)的值，否則返回左側(cè)的操作數(shù)。

在以往，

var value = obj && obj.prop || defaultValue;

但是要注意，這種方式不僅會在 null 和 undefined 時返回 defaultValue，也會在 false, 0, '' (空字符串) 等其他假值情況下返回 defaultValue，這可能不是你想要的行為。

(2) 使用場景

當(dāng)我們希望為某個變量設(shè)置一個默認值時，可以使用空值合并操作符。例如，假設(shè)我們有一個可能為空的字符串變量 name，我們希望在它為空時使用一個默認名字：

let name = null;
const defaultName = "Guest";
console.log(name ?? defaultName); // 輸出 "Guest"

(3) 工作原理

空值合并操作符僅在左側(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"

6. 結(jié)合使用

在實際開發(fā)中，我們經(jīng)常需要結(jié)合使用這兩種操作符來處理復(fù)雜的數(shù)據(jù)結(jié)構(gòu)。例如，我們可能需要從一個深度嵌套的對象中獲取一個值，并為其提供一個默認值：

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ù)的處理邏輯，使代碼更加簡潔和易于維護。這兩種操作符在處理復(fù)雜對象和默認值時提供了強大的支持，是現(xiàn)代JavaScript開發(fā)中的重要工具。