空值合并運算符 ?? 提供了一種簡短的語法，用來獲取列表中第一個“已定義”的變量（譯注：即值不是 null 或 undefined 的變量）。

a ?? b 的結(jié)果是：

• a，如果 a 不是 null 或 undefined，
• b，其他情況。

所以，x = a ?? b 是下面這個表達式的簡寫：

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

下面是一個更長一點的例子。

假設(shè)，我們有一個用戶，變量 firstName、lastName 和 nickName 分別對應用戶的名字、姓氏和昵稱。如果用戶決定不輸入任何值，那么這些變量都可能是未定義的。

我們想要顯示用戶的名稱：顯示這三個變量中的一個，如果都沒有設(shè)置值，則顯示 "Anonymous"。
讓我們使用 ?? 運算符選擇第一個已定義的變量：

let firstName = null;
let lastName = null;
let nickName = "Supercoder";

// 顯示第一個不是 null/undefined 的值
alert(firstName ?? lastName ?? nickName ?? "Anonymous"); // Supercoder

與 || 比較

或運算符 || 可以與 ?? 運算符以同樣的方式使用。正如 上一章 所講的，我們可以用 || 替換上面示例中的 ??，也可以獲得相同的結(jié)果。

重要的區(qū)別是：

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

當我們想將 null/undefined 與 0 區(qū)別對待時，這個區(qū)別至關(guān)重要。

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

height = height ?? 100;

如果 height 未定義，則將其賦值為 100。

讓我們將其與 || 進行比較：

let height = 0;

alert(height || 100); // 100
alert(height ?? 100); // 0

在這個例子中，height || 100 將值為 0 的 height 視為未設(shè)置的（unset），與 null、undefined 以及任何其他假（falsy）值同等對待。因此得到的結(jié)果是 100。

height ?? 100 僅當 height 確實是 null 或 undefined 時才返回 100。因此，alert 按原樣顯示了 height 值 0。

哪種行為更好取決于特定的使用場景。當高度 0 為有效值時，?? 運算符更適合。

優(yōu)先級

?? 運算符的優(yōu)先級相當?shù)停涸?MDN table 中為 5。

因此，?? 在大多數(shù)其他運算之后，但在 = 和 ? 之前進行運算。

如果我們需要在復雜表達式中使用 ?? 進行取值，需要考慮加括號：

let height = null;
let width = null;

// 重要：使用括號
let area = (height ?? 100) * (width ?? 50);

alert(area); // 5000

否則，如果我們省略了括號，* 的優(yōu)先級比 ?? 高，會優(yōu)先執(zhí)行。

運算過程將等同于下面這個表達式：

// 可能不正確的
let area = height ?? (100 * width) ?? 50;

這里還有一個相關(guān)的語言級別的限制。

出于安全原因，禁止將 ?? 運算符與 && 和 || 運算符一起使用。

下面的代碼會觸發(fā)一個語法錯誤：

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

這個限制無疑是值得商榷的，但是它被添加到語言規(guī)范中是為了避免編程錯誤，因為人們開始使用 ?? 替代 ||。

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

let x = (1 && 2) ?? 3; // 起作用

alert(x); // 2

總結(jié)

空值合并運算符 ?? 提供了一種簡潔的方式獲取列表中“已定義”的值。

它被用于為變量分配默認值：

// 當 height 的值為 null 或 undefined 時，將 height 的值設(shè)置為 100
height = height ?? 100;

?? 運算符的優(yōu)先級非常低，只略高于 ? 和 =。

如果沒有明確添加括號，不能將其與 || 或 && 一起使用。

到此這篇關(guān)于ES2020系列之空值合并運算符 '??'的文章就介紹到這了,更多相關(guān)ES2020 空值合并運算符 內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論