ES 2020 新特性

在 ES 2020 中，有一些很是實用的新特性，接下來，就跟我一塊兒看看在新版本中有哪些新特性在平時的開發中能夠用到。

可選鏈式操做符

你們日常在工做中寫代碼的時候，有時候會寫這樣的代碼：

if (a && a. b && a.b.c) {
    console.log(a.b.c);
}

由於咱們不肯定 a 或 b 是否存在，那麼獲取 c 就會報錯，這時候可選鏈式調用就很是有用了。

咱們可使用可選鏈式操做符 ?.，若是沒有值，則返回 undefined 而不是直接報錯，就像下面這樣：

console.log(a?.b?.c || '');

## 空值合併

控制合併運算符爲 ??，它的做用是當左側操做數爲 null 或者 undefined 時，則返回右側操做數，咱們來看實際的例子：

null ?? 7 // 7

有些同窗可能就要問了，這東西和 || 有什麼區別？其實 || 操做符仍是必須的，這是這二者的應用場景不同，好比下面的狀況：

'' ?? 7; // ''
'' || 7; // 7

也就是說 ?? 只有當左邊是 null 和 undefined 時，纔會取右邊的值，而 || 則是左邊爲假時，就會取右邊的值，比較典型的就是 0 和空字符串了。

動態引入

以前咱們能夠經過 webpack 來使用動態引入，如今這個特性原生就支持了。

import('a/b.js').then(b => {
    console.log(b);
});

可是對於大多數開發者來講是沒什麼感知的，畢竟大多數人仍是用 webpack 來打包的。

Promise.allSettled

Promise.allSettled 返回一個包含結果和值的對象數組，不論執行每個 Promise 時是成功仍是失敗，它都會所有執行完成，而後返回結果，下面就是和 Promise.all 的對比。

const p1 = Promise.resolve(1);
const p2 = Promise.reject(2);
const p3 = Promise.resolve(3);

/**
 *[{status: "fulfilled", value: 1}
 * {status: "rejected", reason: 2}
 * {status: "fulfilled", value: 3}]
 */
Promise.allSettled([p1, p2, p3]).then(result => console.log(result));

/**
 * error 2
 */
Promise.all([p1, p2, p3]).catch(error => console.log('error', error));

其餘特性

下面是一些 ES 2020 中提到的其餘的特性：

• 私有屬性：使用 # 來標識類的私有屬性，沒法從外部訪問
• BigInt：可使用 BigInt 來建立更大的數字
• globalThis：提供了 globalThis 來獲取不一樣環境下的全局 this 對象
• matchAll：這個方法返回全部和該字符串正則表達式匹配的結果
• 模塊名稱空間導出：以前須要先 import 進來，而後導出去，如今能夠直接導出模塊下的全部東西

這些特性都沒有詳細說明，想了解更多，請查看下方的資料。

更多資料

1. https://v8.dev/features/tags/...

很是感謝您的閱讀，歡迎關注、轉發、分享支持我。