ES2020系列之空值合并運(yùn)算符 '??'
空值合并運(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)寫:
x = (a !== null && a !== undefined) ? a : b;
下面是一個(gè)更長(zhǎng)一點(diǎn)的例子。
假設(shè),我們有一個(gè)用戶,變量 firstName、lastName 和 nickName 分別對(duì)應(yī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)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JS實(shí)現(xiàn)加載時(shí)鎖定HTML頁(yè)面元素的方法
這篇文章主要介紹了JS實(shí)現(xiàn)加載時(shí)鎖定HTML頁(yè)面元素的方法,涉及javascript針對(duì)頁(yè)面元素的遍歷與屬性操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-06-06
JS控制div跳轉(zhuǎn)到指定的位置的幾種解決方案總結(jié)
這篇文章主要介紹了JS控制div跳轉(zhuǎn)到指定的位置的幾種解決方案總結(jié),小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。2016-11-11
js實(shí)現(xiàn)購(gòu)物車計(jì)算的方法
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)購(gòu)物車的計(jì)算方法,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-08-08
js實(shí)現(xiàn)將選中內(nèi)容分享到新浪或騰訊微博
這篇文章主要介紹了js實(shí)現(xiàn)將選中內(nèi)容分享到新浪或騰訊微博,需要的朋友可以參考下2015-12-12
mint-ui的search組件在鍵盤顯示搜索按鈕的實(shí)現(xiàn)方法
這篇文章主要介紹了mint-ui的search組件在鍵盤顯示搜索按鈕的實(shí)現(xiàn)方法,需要的朋友可以參考下2017-10-10
給事件響應(yīng)函數(shù)傳參數(shù)的四種方式小結(jié)
這篇文章主要介紹了給事件響應(yīng)函數(shù)傳參數(shù)的四種方式。需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2013-12-12

