ES2020讓代碼更優(yōu)美的運(yùn)算符 (?.) (??)
鏈判斷運(yùn)算符(?.)
非常好用、常用,搭配Null 判斷運(yùn)算符使用,效果更佳,完美!
來(lái),上代碼:
我們通常獲取一個(gè)對(duì)象多層的屬性值時(shí),需要進(jìn)行多次的判斷。如不判斷,一個(gè)為空則報(bào)錯(cuò),導(dǎo)致后面無(wú)法繼續(xù)下去。
// error const firstName = message.body.user.firstName; // ok const firstName = (message && message.body && message.body.user && message.body.user.firstName) || 'default';
也可以用三元運(yùn)算符?:來(lái)判斷單個(gè)值,下面例子中,必須先判斷fooInput是否存在,才能讀取fooInput.value。
const fooInput = myForm.querySelector('input[name=foo]') const fooValue = fooInput ? fooInput.value : undefined
接著,我們來(lái)使用 ?. 運(yùn)算符看看有多神奇:
const firstName = message?.body?.user?.firstName || 'default'; const fooValue = myForm.querySelector('input[name=foo]')?.value
一氣呵成,直接在鏈?zhǔn)秸{(diào)用的時(shí)候判斷,左側(cè)的對(duì)象是否為null或undefined。如果是,就不再往下運(yùn)算,直接返回undefined
鏈判斷運(yùn)算符有三種用法。
- obj?.prop // 對(duì)象屬性
- obj?.[expr] // 同上
- func?.(...args) // 函數(shù)或?qū)ο蠓椒ǖ恼{(diào)用
"#C0FFEE".match(/#([A-Z]+)/i)?.[1] // 無(wú)匹配返回null,匹配則返回一個(gè)數(shù)組 a?.b // 等同于 a == null ? undefined : a.b a?.[x] // 等同于 a == null ? undefined : a[x] a?.b() // 等同于 a == null ? undefined : a.b() a?.() // 等同于 a == null ? undefined : a()
上面代碼中,特別注意后兩種形式,如果a?.b()里面的a.b不是函數(shù),那么a?.b()是會(huì)報(bào)錯(cuò)的。a?.()也是如此,如果a不是null或undefined,但也不是函數(shù),那么a?.()會(huì)報(bào)錯(cuò)。
使用這個(gè)運(yùn)算符,有幾個(gè)注意點(diǎn)。
(1)短路機(jī)制
?.運(yùn)算符相當(dāng)于一種短路機(jī)制,只要不滿足條件,就不再往下執(zhí)行。
a?.[++x] // 等同于 a == null ? undefined : a[++x]
上面代碼中,如果a是undefined或null,那么x不會(huì)進(jìn)行遞增運(yùn)算。也就是說(shuō),鏈判斷運(yùn)算符一旦為真,右側(cè)的表達(dá)式就不再求值。
(2)delete 運(yùn)算符
delete a?.b // 等同于 a == null ? undefined : delete a.b
上面代碼中,如果a是undefined或null,會(huì)直接返回undefined,而不會(huì)進(jìn)行delete運(yùn)算。
(3)括號(hào)的影響
如果屬性鏈有圓括號(hào),鏈判斷運(yùn)算符對(duì)圓括號(hào)外部沒有影響,只對(duì)圓括號(hào)內(nèi)部有影響。
(a?.b).c // 等價(jià)于 (a == null ? undefined : a.b).c
上面代碼中,?.對(duì)圓括號(hào)外部沒有影響,不管a對(duì)象是否存在,圓括號(hào)后面的.c總是會(huì)執(zhí)行。
一般來(lái)說(shuō),使用?.運(yùn)算符的場(chǎng)合,不應(yīng)該使用圓括號(hào)。
(4)報(bào)錯(cuò)場(chǎng)合
以下寫法是禁止的,會(huì)報(bào)錯(cuò)。
// 構(gòu)造函數(shù) new a?.() new a?.b() // 鏈判斷運(yùn)算符的右側(cè)有模板字符串 a?.`` a?.b`{c}` // 鏈判斷運(yùn)算符的左側(cè)是 super super?.() super?.foo // 鏈運(yùn)算符用于賦值運(yùn)算符左側(cè) a?.b = c
(5)右側(cè)不得為十進(jìn)制數(shù)值
為了保證兼容以前的代碼,允許foo?.3:0被解析成foo ? .3 : 0,因此規(guī)定如果?.后面緊跟一個(gè)十進(jìn)制數(shù)字,那么?.不再被看成是一個(gè)完整的運(yùn)算符,而會(huì)按照三元運(yùn)算符進(jìn)行處理,也就是說(shuō),那個(gè)小數(shù)點(diǎn)會(huì)歸屬于后面的十進(jìn)制數(shù)字,形成一個(gè)小數(shù)。
Null 判斷運(yùn)算符(??)
讀取對(duì)象屬性的時(shí)候,如果某個(gè)屬性的值是null或undefined,有時(shí)候需要為它們指定默認(rèn)值。常見做法是通過(guò)||運(yùn)算符指定默認(rèn)值。
const headerText = response.settings.headerText || 'Hello, world!'; const animationDuration = response.settings.animationDuration || 300; const showSplashScreen = response.settings.showSplashScreen || true;
上面的三行代碼都通過(guò)||運(yùn)算符指定默認(rèn)值,屬性的值如果為''或false或0,默認(rèn)值也會(huì)生效。
為了避免這種情況,ES2020 引入了一個(gè)新的 Null 判斷運(yùn)算符??。它的行為類似||,但是只有運(yùn)算符左側(cè)的值為null或undefined時(shí),才會(huì)返回右側(cè)的值。
const headerText = response.settings.headerText ?? 'Hello, world!'; const animationDuration = response.settings.animationDuration ?? 300; const showSplashScreen = response.settings.showSplashScreen ?? true;
上面代碼中,默認(rèn)值只有在左側(cè)屬性值為null或undefined時(shí),才會(huì)生效。
這個(gè)運(yùn)算符的一個(gè)目的,就是跟鏈判斷運(yùn)算符?.配合使用,為null或undefined的值設(shè)置默認(rèn)值。
const animationDuration = response.settings?.animationDuration ?? 300;
上面代碼中,如果response.settings是null或undefined,或者response.settings.animationDuration是null或undefined,就會(huì)返回默認(rèn)值300。也就是說(shuō),這一行代碼包括了兩級(jí)屬性的判斷。
這個(gè)運(yùn)算符很適合判斷函數(shù)參數(shù)是否賦值:
function Component(props) { const enable = props?.enable ?? true; // … } // 上面代碼等同于 function Component(props) { const { enable: enable = true, } = props; // … }
??有一個(gè)運(yùn)算優(yōu)先級(jí)問題,它與&&和||的優(yōu)先級(jí)孰高孰低?,F(xiàn)在的規(guī)則是,如果多個(gè)邏輯運(yùn)算符一起使用,必須用括號(hào)表明優(yōu)先級(jí),否則會(huì)報(bào)錯(cuò)。
// 報(bào)錯(cuò) lhs && middle ?? rhs lhs ?? middle && rhs lhs || middle ?? rhs lhs ?? middle || rhs
上面四個(gè)表達(dá)式都會(huì)報(bào)錯(cuò),必須加入表明優(yōu)先級(jí)的括號(hào)。
(lhs && middle) ?? rhs; lhs && (middle ?? rhs); (lhs ?? middle) && rhs; lhs ?? (middle && rhs); (lhs || middle) ?? rhs; lhs || (middle ?? rhs); (lhs ?? middle) || rhs; lhs ?? (middle || rhs);
ES版本更新的福利
在幾個(gè)月前的騰訊開發(fā)者大會(huì)上,有位熱心市民向ES開發(fā)者請(qǐng)教了這個(gè)問題,剛好借這篇文章的話題,在這里分享給大家!
關(guān)于ES版本更新,為什么ES5到ES6是大幅度書籍式的更新,此后版本更新只新增稀少的幾個(gè)新技術(shù)?
原因:“怕你們學(xué)不動(dòng)!”
其實(shí),前者的更新方式,要學(xué)那么多東西,那么厚的一本天書,會(huì)給人一種望而卻步的感覺,還沒進(jìn)門就先跪了。
后者來(lái)說(shuō),只是幾個(gè)新技術(shù),可能半天一天的,就能完全掌握并大結(jié)局了,收獲的成就感會(huì)更多更快!
到此這篇關(guān)于ES2020讓代碼更優(yōu)美的運(yùn)算符 (?.) (??)的文章就介紹到這了,更多相關(guān)ES2020 運(yùn)算符 (?.) (??)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JS聲明式函數(shù)與賦值式函數(shù)實(shí)例分析
這篇文章主要介紹了JS聲明式函數(shù)與賦值式函數(shù),結(jié)合實(shí)例形式分析了JS函數(shù)解析的流程與執(zhí)行順序,需要的朋友可以參考下2016-12-12javascript實(shí)現(xiàn)點(diǎn)擊按鈕變色
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)點(diǎn)擊按鈕變色,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-07-07js神秘的電報(bào)密碼 哈弗曼編碼實(shí)現(xiàn)
這篇文章主要介紹了js神秘的電報(bào)密碼 哈弗曼編碼,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-09-09javascript仿京東導(dǎo)航左側(cè)分類導(dǎo)航下拉菜單效果
這篇文章主要為大家詳細(xì)介紹了javascript仿京東導(dǎo)航左側(cè)分類導(dǎo)航下拉菜單效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-03-03uniapp添加操作日志的方法(uniapp、日志、文件、html5+)
近期一直在寫微信小程序,有一個(gè)問題一直沒有解決,就是在測(cè)試環(huán)境中調(diào)試代碼會(huì)打印很多日志,方便看到問題所在,這篇文章主要給大家介紹了關(guān)于uniapp添加操作日志(uniapp、日志、文件、html5+)的相關(guān)資料,需要的朋友可以參考下2023-11-11js 事件對(duì)象 鼠標(biāo)滾輪效果演示說(shuō)明
第三篇,繼續(xù)總結(jié)事件對(duì)象 先看看監(jiān)聽鼠標(biāo)滾輪事件能幫我們做什么2010-05-05bootstrap多層模態(tài)框滾動(dòng)條消失的問題
本篇文章主要介紹了bootstrap多層模態(tài)框滾動(dòng)條消失的問題,具有一定的參考價(jià)值,有興趣的可以了解一下2017-07-07js中Math之random,round,ceil,floor的用法總結(jié)
本篇文章是對(duì)js中Math之random,round,ceil,floor的用法進(jìn)行了總結(jié)介紹,需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2013-12-12