空值合并運(yùn)算符 ?? 提供了一種簡(jiǎn)短的語(yǔ)法，用來(lái)獲取列表中第一個(gè)“已定義”的變量（譯注：即值不是 null 或 undefined 的變量）。

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

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

所以，x = a ?? b 是下面這個(gè)表達(dá)式的簡(jiǎn)寫(xiě)：

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

下面是一個(gè)更長(zhǎng)一點(diǎn)的例子。

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

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

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

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

與 || 比較

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

重要的區(qū)別是：

• || 返回第一個(gè) 真 值。
• ?? 返回第一個(gè) 已定義的 值。

當(dāng)我們想將 null/undefined 與 0 區(qū)別對(duì)待時(shí)，這個(gè)區(qū)別至關(guān)重要。

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

height = height ?? 100;

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

讓我們將其與 || 進(jìn)行比較：

let height = 0;

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

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

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

哪種行為更好取決于特定的使用場(chǎng)景。當(dāng)高度 0 為有效值時(shí)，?? 運(yùn)算符更適合。

優(yōu)先級(jí)

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

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

如果我們需要在復(fù)雜表達(dá)式中使用 ?? 進(jìn)行取值，需要考慮加括號(hào)：

let height = null;
let width = null;

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

alert(area); // 5000

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

運(yùn)算過(guò)程將等同于下面這個(gè)表達(dá)式：

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

這里還有一個(gè)相關(guān)的語(yǔ)言級(jí)別的限制。

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

下面的代碼會(huì)觸發(fā)一個(gè)語(yǔ)法錯(cuò)誤：

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

這個(gè)限制無(wú)疑是值得商榷的，但是它被添加到語(yǔ)言規(guī)范中是為了避免編程錯(cuò)誤，因?yàn)槿藗冮_(kāi)始使用 ?? 替代 ||。

可以明確地使用括號(hào)來(lái)解決這個(gè)問(wèn)題：

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

alert(x); // 2

總結(jié)

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

它被用于為變量分配默認(rèn)值：

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

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

如果沒(méi)有明確添加括號(hào)，不能將其與 || 或 && 一起使用。

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

最新評(píng)論