ES6 運算符的擴展

指數運算符

ES2016 新增了一個指數運算符（**）。

2 ** 2 // 4
2 ** 3 // 8

鏈判斷運算符

在寫代碼的時候，通常讀取對象內部的某個屬性，往往需要判斷一下，屬性的上層對象是否存在。比如，讀取 user.name 這個屬性，安全的寫法是寫成下面這樣。

// 如果不存在 user 對象將報錯
const  firstName = user.name || 'default';
// 正確的寫法
const firstName = (user && user.name) || 'default';

三元運算符 ?: 也常用於判斷對象是否存在。

const firstName = user ? user.name : 'default'

上面例子中，必須先判斷 user 是否存在，才能讀取 user.name。

這樣的層層判斷非常麻煩，因此 ES2020 引入了 “鏈判斷運算符” ?.，簡化上面的寫法。

const  firstName = user?.name || 'default';

上面代碼使用了?. 運算符，直接在鏈式調用的時候判斷，左側的對象是否爲 null 或 undefined。如果是的，就不再往下運算，而是返回 undefined。

下面是判斷對象方法是否存在，如果存在就立即執行的例子。

iterator.return?.()

上面代碼中，iterator.return 如果有定義，就會調用該方法，否則 iterator.return 直接返回 undefined，不再執行 ?. 後面的部分。

對於那些可能沒有實現的方法，這個運算符尤其有用。

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

Null 判斷運算符

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

const  firstName = user.name || 'default';

上面的代碼都通過 || 運算符指定默認值，但是這樣寫是錯的。開發者的原意是，只要屬性的值爲 null 或 undefined，默認值就會生效，但是屬性的值如果爲空字符串或 false 或 0 ，默認值也會生效。

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

const  firstName = user.name ?? 'default';

上面代碼中，默認值只有在左側屬性值爲 null 或 undefined 時，纔會生效。

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

const  firstName = user?.name ?? 'default';

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

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

邏輯賦值運算符

ES2021 引入了三個新的邏輯賦值運算符，將邏輯運算符與賦值運算符進行結合。

// 或賦值運算符
x ||= y
// 等同於
x || (x = y)
// 與賦值運算符
x &&= y
// 等同於
x && (x = y)
// Null 賦值運算符
x ??= y
// 等同於
x ?? (x = y)

它們的一個用途是，爲變量或屬性設置默認值。

// 老的寫法
user.id = user.id || 1;
// 新的寫法
user.id ||= 1;

上面示例中，user.id 屬性如果不存在，則設爲 1，新的寫法比老的寫法更緊湊一些。

下面是另一個例子。

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

設置默認值非常便捷。

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/v1hV9McchR60LlbT_C8Huw

猜你喜歡