ES2020讓代碼更優美的運算符 (?.) (??)

Posted on by

鏈判斷運算符（?.）

非常好用、常用，搭配Null 判斷運算符使用，效果更佳，完美！

來，上代碼：

我們通常獲取一個對象多層的屬性值時，需要進行多次的判斷。如不判斷，一個為空則報錯，導致後面無法繼續下去。

// error
const firstName = message.body.user.firstName;

// ok
const firstName = (message
 && message.body
 && message.body.user
 && message.body.user.firstName) || 'default';

也可以用三元運算符?:來判斷單個值，下面例子中，必須先判斷fooInput是否存在，才能讀取fooInput.value。

const fooInput = myForm.querySelector('input[name=foo]')
const fooValue = fooInput ? fooInput.value : undefined

接著，我們來使用 ?. 運算符看看有多神奇：

const firstName = message?.body?.user?.firstName || 'default';
const fooValue = myForm.querySelector('input[name=foo]')?.value

一氣呵成，直接在鏈式調用的時候判斷，左側的對象是否為null或undefined。如果是，就不再往下運算，直接返回undefined

鏈判斷運算符有三種用法。

  • obj?.prop // 對象屬性
  • obj?.[expr] // 同上
  • func?.(…args) // 函數或對象方法的調用
"#C0FFEE".match(/#([A-Z]+)/i)?.[1] // 無匹配返回null，匹配則返回一個數組

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不是函數，那麼a?.b()是會報錯的。a?.()也是如此，如果a不是null或undefined，但也不是函數，那麼a?.()會報錯。

使用這個運算符，有幾個註意點。

（1）短路機制

?.運算符相當於一種短路機制，隻要不滿足條件，就不再往下執行。

a?.[++x]
// 等同於
a == null ? undefined : a[++x]

上面代碼中，如果a是undefined或null，那麼x不會進行遞增運算。也就是說，鏈判斷運算符一旦為真，右側的表達式就不再求值。

（2）delete 運算符

delete a?.b
// 等同於
a == null ? undefined : delete a.b

上面代碼中，如果a是undefined或null，會直接返回undefined，而不會進行delete運算。

（3）括號的影響

如果屬性鏈有圓括號，鏈判斷運算符對圓括號外部沒有影響，隻對圓括號內部有影響。

(a?.b).c
// 等價於
(a == null ? undefined : a.b).c

上面代碼中，?.對圓括號外部沒有影響，不管a對象是否存在，圓括號後面的.c總是會執行。

一般來說，使用?.運算符的場合，不應該使用圓括號。

（4）報錯場合

以下寫法是禁止的，會報錯。

// 構造函數
new a?.()
new a?.b()

// 鏈判斷運算符的右側有模板字符串
a?.`{b}`
a?.b`{c}`

// 鏈判斷運算符的左側是 super
super?.()
super?.foo

// 鏈運算符用於賦值運算符左側
a?.b = c

（5）右側不得為十進制數值

為瞭保證兼容以前的代碼，允許foo?.3:0被解析成foo ? .3 : 0，因此規定如果?.後面緊跟一個十進制數字，那麼?.不再被看成是一個完整的運算符，而會按照三元運算符進行處理，也就是說，那個小數點會歸屬於後面的十進制數字，形成一個小數。

Null 判斷運算符（??）

讀取對象屬性的時候，如果某個屬性的值是null或undefined，有時候需要為它們指定默認值。常見做法是通過||運算符指定默認值。

const headerText = response.settings.headerText || 'Hello, world!';
const animationDuration = response.settings.animationDuration || 300;
const showSplashScreen = response.settings.showSplashScreen || true;

上面的三行代碼都通過||運算符指定默認值，屬性的值如果為”或false或0，默認值也會生效。

為瞭避免這種情況，ES2020 引入瞭一個新的 Null 判斷運算符??。它的行為類似||，但是隻有運算符左側的值為null或undefined時，才會返回右側的值。

const headerText = response.settings.headerText ?? 'Hello, world!';
const animationDuration = response.settings.animationDuration ?? 300;
const showSplashScreen = response.settings.showSplashScreen ?? true;

上面代碼中，默認值隻有在左側屬性值為null或undefined時，才會生效。

這個運算符的一個目的，就是跟鏈判斷運算符?.配合使用，為null或undefined的值設置默認值。

const animationDuration = response.settings?.animationDuration ?? 300;

上面代碼中，如果response.settings是null或undefined，或者response.settings.animationDuration是null或undefined，就會返回默認值300。也就是說，這一行代碼包括瞭兩級屬性的判斷。

這個運算符很適合判斷函數參數是否賦值:

function Component(props) {
 const enable = props?.enable ?? true;
 // …
}

// 上面代碼等同於
function Component(props) {
 const {
  enable: enable = true,
 } = props;
 // …
}

??有一個運算優先級問題，它與&&和||的優先級孰高孰低。現在的規則是，如果多個邏輯運算符一起使用，必須用括號表明優先級，否則會報錯。

// 報錯
lhs && middle ?? rhs
lhs ?? middle && rhs
lhs || middle ?? rhs
lhs ?? middle || rhs

上面四個表達式都會報錯，必須加入表明優先級的括號。

(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版本更新的福利

在幾個月前的騰訊開發者大會上，有位熱心市民向ES開發者請教瞭這個問題，剛好借這篇文章的話題，在這裡分享給大傢！

關於ES版本更新，為什麼ES5到ES6是大幅度書籍式的更新，此後版本更新隻新增稀少的幾個新技術？

原因：“怕你們學不動！”

其實，前者的更新方式，要學那麼多東西，那麼厚的一本天書，會給人一種望而卻步的感覺，還沒進門就先跪瞭。

後者來說，隻是幾個新技術，可能半天一天的，就能完全掌握並大結局瞭，收獲的成就感會更多更快！

到此這篇關於ES2020讓代碼更優美的運算符 (?.) (??)的文章就介紹到這瞭,更多相關ES2020 運算符 (?.) (??)內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：