空值合并運算符 '??'

在本文中，我們將值既不是null 也不是undefined 的表達式稱為“已定義的（defined）”。

空值合并運算符（nullish coalescing operator）的寫法為兩個問號??。

a ?? b 的結果是：

• 如果a 是已定義的，則結果為a，
• 如果a 不是已定義的，則結果為b。

換句話說，如果第一個參數不是null/undefined，則?? 返回第一個參數。否則，返回第二個參數。

空值合并運算符并不是什么全新的東西。它只是一種獲得兩者中的第一個“已定義的”值的不錯的語法。

我們可以使用我們已知的運算符重寫result = a ?? b，像這樣：

result = (a !== null && a !== undefined) ? a : b;

通常?? 的使用場景是，為可能是未定義的變量提供一個默認值。

例如，在這里，如果user 是未定義的，我們則顯示Anonymous：

let user;

alert(user ?? "Anonymous"); // Anonymous

當然，如果user 的值為除null/undefined 外的任意值，那么我們看到的將是它：

let user = "John";

alert(user ?? "Anonymous"); // John

我們還可以使用?? 序列從一系列的值中選擇出第一個非null/undefined 的值。

假設我們在變量firstName、lastName 或nickName 中存儲著一個用戶的數據。如果用戶決定不輸入值，則所有這些變量的值都可能是未定義的。

我們想使用這些變量之一顯示用戶名，如果這些變量的值都是未定義的，則顯示 "Anonymous"。

讓我們使用?? 運算符來實現這一需求：

let firstName = null;

let lastName = null;

let nickName = "Supercoder";

// 顯示第一個已定義的值

alert(firstName ?? lastName ?? nickName ?? "Anonymous"); // Supercoder

與 || 比較

或運算符|| 可以以與?? 運算符相同的方式使用。

例如，在上面的代碼中，我們可以用|| 替換掉??，也可以獲得相同的結果：

let firstName = null;

let lastName = null;

let nickName = "Supercoder";

// 顯示第一個真值：

alert(firstName || lastName || nickName || "Anonymous"); // Supercoder

或|| 運算符自 JavaScript 誕生就存在，因此開發者長期將其用于這種目的。

另一方面，空值合并運算符?? 是最近才被添加到 JavaScript 中的，它的出現是因為人們對|| 不太滿意。

它們之間重要的區別是：

• || 返回第一個 真 值。
• ?? 返回第一個 已定義的 值。

換句話說，|| 無法區分false、0、空字符串"" 和null/undefined。它們都一樣 —— 假值（falsy values）。如果其中任何一個是|| 的第一個參數，那么我們將得到第二個參數作為結果。

不過在實際中，我們可能只想在變量的值為null/undefined 時使用默認值。也就是說，當該值確實未知或未被設置時。

例如，考慮下面這種情況：

let height = 0;

alert(height || 100); // 100

alert(height ?? 100); // 0

• height || 100 首先會檢查height 是否為一個假值，發現它確實是。
• 所以，結果為第二個參數，100。
• height ?? 100 首先會檢查height 是否為null/undefined，發現它不是。
• 所以，結果為height 的原始值，0。

如果高度0 為有效值，則不應將其替換為默認值，所以?? 能夠得出正確的結果。

優先級

?? 運算符的優先級相當低：在 MDN table 中為5。因此，?? 在= 和? 之前計算，但在大多數其他運算符（例如，+ 和*）之后計算。

因此，如果我們需要在還有其他運算符的表達式中使用?? 進行取值，需要考慮加括號：

let height = null;

let width = null;

// 重要：使用括號

let area = (height ?? 100) * (width ?? 50);

alert(area); // 5000

否則，如果我們省略了括號，則由于* 的優先級比?? 高，它會先執行，進而導致錯誤的結果。

// 沒有括號

let area = height ?? 100 * width ?? 50;

// ……與下面這行代碼的計算方式相同（應該不是我們所期望的）：

let area = height ?? (100 * width) ?? 50;

?? 與&& 或|| 一起使用

出于安全原因，JavaScript 禁止將?? 運算符與&& 和|| 運算符一起使用，除非使用括號明確指定了優先級。

下面的代碼會觸發一個語法錯誤：

let x = 1 && 2 ?? 3; // Syntax error

這個限制無疑是值得商榷的，但它被添加到語言規范中是為了避免人們從|| 切換到?? 時的編程錯誤。

可以明確地使用括號來解決這個問題：

let x = (1 && 2) ?? 3; // 正常工作了

alert(x); // 2

鏈接：https://juejin.im/post/6884019851942166536