ECMAScript 2020 是 ECMAScript 語言規範的第11版。自1997年出版第一版以來，ECMAScript 已發展成為世界上使用最廣泛的通用程式語言之一。

ES2020(ES11) 引入了以下新特性：

• String 的 matchAll 方法
• 動態匯入語句 import()
• import.meta
• export * as ns from 'module'
• Promise.allSettled
• 一種新的資料型別：BigInt
• GlobalThis
• Nullish coalescing Operator
• Optional Chaining

matchAll

matchAll() 方法返回一個包含所有匹配正則表示式的結果的迭代器。使用 for...of 遍歷或者使用 操作符 ... Array.from 將其轉換成陣列。

const reg = /[0-3]/g;
const data = '2020'; 
console.log(data.matchAll(reg));//data.matchAll 的返回值是一個迭代器
console.log([...data.matchAll(reg)]);
/**
 * 0: ["2",index: 0,input: "2020",groups: undefined]
 * 1: ["0",index: 1,groups: undefined]
 * 2: ["2",index: 2,groups: undefined]
 * 3: ["0",index: 3,groups: undefined]
 */

Dynamic import

標準用法的 import 匯入的模組是靜態的，會使所有被匯入的模組，在載入時就被編譯（無法做到按需編譯，降低首頁載入速度）。有些場景中，你可能希望根據條件匯入模組或者按需匯入模組，這時你可以使用動態匯入代替靜態匯入。

在 import() 之前，當我們需要根據條件匯入模組時，不得不使用 require()。

如:

if(XXX) {
 const menu = require('./menu');
}

如今可以替換為:

if(XXX) {
 const menu = import('./menu');
}

@babel/preset-env 已經包含了 @babel/plugin-syntax-dynamic-import，因此如果要使用 import() 語法，只需要配置 @babel/preset-env 即可。

提示： 請不要濫用動態匯入（只有在必要情況下采用）。靜態框架能更好的初始化依賴，而且更有利於靜態分析工具和 tree shaking 發揮作用。

另外，import() 返回的是一個 promise 物件。例如：

//menu.js
export default {
 menu: 'menu'
}

//index.js
if(true) {
 let menu = import('./menu');
 console.log(menu); //Promise {<pending>
 menu.then(data => console.log(data));//Module {default: {menu: "menu"},__esModule: true,Symbol(Symbol.toStringTag): "Module"}
} else {

}

import.meta

import.meta 會返回一個物件，有一個 url 屬性，返回當前模組的url路徑，只能在模組內部使用。

<script src='./main.js' type="module"></script>

//main.js
console.log(import.meta); //{url: "http://localhost:8080/main.js"} PS：使用了 http-server 啟動

因為 import.meta 必須要在模組內部使用，如果不加 type="module"，控制檯會報錯：Cannot use 'import.meta' outside a module。

最開始測試時，我是在 React 的專案中測試的，僅配置了 @babel/preset-env 和 @babel/preset-react 預設，使用 import.meta 時，會報錯如下：

安裝 @open-wc/webpack-import-meta-loader，修改 webpack 的配置，可以正常執行。

module: {
 rules: [
  {
   test: /\.js$/,use: [
    require.resolve('@open-wc/webpack-import-meta-loader'),{
     loader: 'babel-loader',options: {
      presets: [
       "@babel/preset-env","@babel/preset-react"
      ]
     },}
   ]
  }
 ]
}

效果如下：

//src/index.js
import React from 'react';
console.log(import.meta);//{index.js:38 {url: "http://127.0.0.1:3000/src/index.js"}}

export * as ns from 'module'

ES2020新增了 export * as XX from 'module'，和 import * as XX from 'module'

//menu.js
export * as ns from './info';

可以理解為是將下面兩條語句合併為一句：

import * as ns from './info';
export { ns };

不過需要注意的是 export * as ns from './info' 並不會真的將匯入模組，因此在該模組(menu.js)中，我們是獲取不到 ns 的。

Promise.allSettled

Promise.all 或者 Promise.race 有的時候並不能滿足我們的需求。比如，我們需要在所有的 promise 都結束的時候做一些操作，而並不在乎它們是成功還是失敗。在沒有 Promise.allSettled 之前，我們需要自己去寫實現。

Promise.allSettled() 方法返回一個在所有給定的 promise 都已經 fulfilled 或 rejected 後的 promise ，並帶有一個物件陣列，每個物件表示對應的 promise 結果。

const promise1 = Promise.resolve(100);
const promise2 = new Promise((resolve,reject) => setTimeout(reject,100,'info'));
const promise3 = new Promise((resolve,reject) => setTimeout(resolve,200,'name'))

Promise.allSettled([promise1,promise2,promise3]).
 then((results) => console.log(result));
/* 
 [
  { status: 'fulfilled',value: 100 },{ status: 'rejected',reason: 'info' },{ status: 'fulfilled',value: 'name' }
 ]
*/

可以看到，Promise.allSettled() 的成功的結果是一個數組，該陣列的每一項是一個物件，每個物件都有一個 status 屬性，值為 fulfilled 或 rejected，如果status 的值是 fulfilled，那麼該物件還有一個 value 屬性，其屬性值是對應的 promise 成功的結果；如果 status 的值是 rejected，那麼該物件有一個 reason 屬性，其屬性值是對應的 promise 失敗的原因。

BigInt

BigInt 是一種數字型別的資料，它可以表示任意精度格式的整數。在此之前，JS 中安全的最大數字是 9009199254740991，即2^53-1，在控制檯中輸入 Number.MAX_SAFE_INTEGER 即可檢視。超過這個值，JS 沒有辦法精確表示。另外，大於或等於2的1024次方的數值，JS 無法表示，會返回 Infinity。

BigInt 即解決了這兩個問題。BigInt 只用來表示整數，沒有位數的限制，任何位數的整數都可以精確表示。為了和 Number 型別進行區分，BigInt 型別的資料必須新增字尾 n.

//Number型別在超過9009199254740991後，計算結果即出現問題
const num1 = 90091992547409910;
console.log(num1 + 1); //90091992547409900

//BigInt 計算結果正確
const num2 = 90091992547409910n;
console.log(num2 + 1n); //90091992547409911n

//Number 型別不能表示大於 2 的 1024 次方的數值
let num3 = 9999;
for(let i = 0; i < 10; i++) {
 num3 = num3 * num3;
}
console.log(num3); //Infinity

//BigInt 型別可以表示任意位數的整數
let num4 = 9999n;
for(let i = 0n; i < 10n; i++) {
 num4 = num4 * num4;
}
console.log(num4); //一串超級長的數字，這裡就不貼了

我們還可以使用 BigInt 物件來初始化 BigInt 例項：

console.log(BigInt(999)); // 999n 注意：沒有 new 關鍵字！！！

需要說明的是，BigInt 和 Number 是兩種資料型別，不能直接進行四則運算，不過可以進行比較操作。

console.log(99n == 99); //true
console.log(99n === 99); //false 
console.log(99n + 1);//TypeError: Cannot mix BigInt and other types,use explicit conversionss

GlobalThis

JS 中存在一個頂層物件，但是，頂層物件在各種實現裡是不統一的。

從不同的 JavaScript 環境中獲取全域性物件需要不同的語句。在 Web 中，可以通過 window、self 取到全域性物件，但是在 Web Workers 中，只有 self 可以。在 Node.js 中，它們都無法獲取，必須使用 global。

在 globalThis 之前，我們這樣去獲取全域性物件：

var getGlobal = function () {
 if (typeof self !== 'undefined') { return self; }
 if (typeof window !== 'undefined') { return window; }
 if (typeof global !== 'undefined') { return global; }
 throw new Error('unable to locate global object');
};

ES2020 中引入 globalThis 作為頂層物件，在任何環境下，都可以簡單的通過 globalThis 拿到頂層物件。

Nullish coalescing Operator

ES2020 新增了一個運算子 ??。當左側的運算元為 null 或者 undefined時，返回其右側運算元，否則返回左側運算元。

使用 || 操作符，當左側的運算元為 0 、 null、 undefined、 NaN、 false、 '' 時，都會使用右側的運算元。如果使用 || 來為某些變數設定預設值，可能會遇到意料之外的行為。
例如:

const defaultValue = 100;
let value = someValue || defaultValue;
//當 someValue 轉成 boolean 值為 false 時，value 的值都是 defaultValue

當 someValue 的值為 0 時 ，我們其實期望 value 值為 0,但是它卻被錯誤的分配成了 100.

?? 操作符可以規避以上問題，它只有在左運算元是 null 或者是 undefined 時，才會返回右側運算元。

const defaultValue = 100;
let value = someValue ?? defaultValue;//someValue 為 0 ，value 的值是 0

Optional Chaining

可選鏈操作符 ?. 允許讀取位於連線物件鏈深處的屬性的值，而不必明確驗證鏈中的每個引用是否有效。?. 操作符的功能類似於 . 鏈式操作符，不同之處在於，在引用為空(nullish,即 null 或者 undefined) 的情況下不會引起錯誤，該表示式短路返回值是 undefined。

例如，我們要訪問 info 物件的 animal 的 reptile 的 tortoise。但是我們不確定 animal,reptile 是否存在，因此我們需要這樣寫：

const tortoise = info.animal && info.animal.reptile && info.animal.reptile.tortoise;

因為 null.reptile 或 undefined.reptile 會丟擲錯誤：TypeError: Cannot read property 'reptile' of undefined 或 TypeError: Cannot read property 'reptile' of null，為了避免報錯，如果我們需要訪問的屬性更深，那麼這個這句程式碼會越來越長。
而有了可選鏈操作符 ?.，我們在訪問 reptile 之前，不再需要校驗 info.animal 的值。同樣，在訪問 info.animal.reptile.tortoise 之前，也不需要校驗 info.animal.reptile 的值。

上面的程式碼簡化為：

const tortoise = info.animal?.reptile?.tortoise;

JS在嘗試訪問 info.animal.reptile 之前，會隱式檢查並確定 info.animal 的值不是 null 或 undefined，如果其值是 null 或 undefined，那麼表示式短路計算直接返回 undefined。

可以看到可選鏈操作符 ?. 和空位合併操作符一樣，都是針對的 null 和 undefined 這兩個值。
至此，ES2020 的新特性就都介紹完畢了，總得來講，新增內容並不多，一杯咖啡的時間就可以掌握個大概，不過還是要經常回顧，不然會很容易遺忘。

參考資料

ecma-262
A Super Hacky Alternative to import.meta.url
import
export 與 import 的複合寫法
BigInt 資料型別
globalThis
globalThis物件

到此這篇關於ES11新增的這9個新特性，你都掌握了嗎 的文章就介紹到這了,更多相關ES11 新特性 內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！