今天就跟大家聊聊有關(guān)怎么在ES2020中使用運(yùn)算符優(yōu)化代碼，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。
非常好用、常用，搭配Null 判斷運(yùn)算符使用，效果更佳，完美！
來，上代碼：
我們通常獲取一個(gè)對(duì)象多層的屬性值時(shí)，需要進(jìn)行多次的判斷。如不判斷，一個(gè)為空則報(bào)錯(cuò)，導(dǎo)致后面無法繼續(xù)下去。
// error const firstName = message.body.user.firstName; // ok const firstName = (message && message.body && message.body.user && message.body.user.firstName) || 'default';
也可以用三元運(yùn)算符?:來判斷單個(gè)值，下面例子中，必須先判斷fooInput是否存在，才能讀取fooInput.value。
重慶分公司
重慶分公司
const fooInput = myForm.querySelector('input[name=foo]')
const fooValue = fooInput ? fooInput.value : undefined接著，我們來使用 ?. 運(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] // 無匹配返回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)。
?.運(yùn)算符相當(dāng)于一種短路機(jī)制，只要不滿足條件，就不再往下執(zhí)行。
a?.[++x] // 等同于 a == null ? undefined : a[++x]
上面代碼中，如果a是undefined或null，那么x不會(huì)進(jìn)行遞增運(yùn)算。也就是說，鏈判斷運(yùn)算符一旦為真，右側(cè)的表達(dá)式就不再求值。
delete a?.b // 等同于 a == null ? undefined : delete a.b
上面代碼中，如果a是undefined或null，會(huì)直接返回undefined，而不會(huì)進(jìn)行delete運(yùn)算。
如果屬性鏈有圓括號(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í)行。
一般來說，使用?.運(yùn)算符的場(chǎng)合，不應(yīng)該使用圓括號(hào)。
以下寫法是禁止的，會(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為了保證兼容以前的代碼，允許foo?.3:0被解析成foo ? .3 : 0，因此規(guī)定如果?.后面緊跟一個(gè)十進(jìn)制數(shù)字，那么?.不再被看成是一個(gè)完整的運(yùn)算符，而會(huì)按照三元運(yùn)算符進(jìn)行處理，也就是說，那個(gè)小數(shù)點(diǎn)會(huì)歸屬于后面的十進(jìn)制數(shù)字，形成一個(gè)小數(shù)。
讀取對(duì)象屬性的時(shí)候，如果某個(gè)屬性的值是null或undefined，有時(shí)候需要為它們指定默認(rèn)值。常見做法是通過||運(yùn)算符指定默認(rèn)值。
const headerText = response.settings.headerText || 'Hello, world!'; const animationDuration = response.settings.animationDuration || 300; const showSplashScreen = response.settings.showSplashScreen || true;
上面的三行代碼都通過||運(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。也就是說，這一行代碼包括了兩級(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í)孰高孰低。現(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);
看完上述內(nèi)容，你們對(duì)怎么在ES2020中使用運(yùn)算符優(yōu)化代碼有進(jìn)一步的了解嗎？如果還想了解更多知識(shí)或者相關(guān)內(nèi)容，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝大家的支持。
