ES11新增的這9個新特性，你都掌握了嗎？

ECMAScript 2020 是 ECMAScript 語言規範的第11版。自 1997年出版初版以來，ECMAScript已發展成爲世界上使用最普遍的通用編程語言之一。react

ES2020(ES11)引入瞭如下新特性：webpack

String的matchAll方法
動態導入語句 import()
import.meta
export * as ns from 'module'
Promise.allSettled
一種新的數據類型: BigInt
GlobalThis
Promise.allSettled
一種新的數據類型： BigInt
Nullish coalescing Operator

matchAll

matchAll() 方法返回一個包含全部匹配正則表達式的結果的迭代器。使用 for...of 遍歷或者使用操做符 ... Array.from 將其轉換成數組。web

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, input: "2020", groups: undefined]
2: ["2", index: 2, input: "2020", groups: undefined]
3: ["0", index: 3, input: "2020", groups: undefined]

*/編程

Dynamic import

標準用法的 import 導入的模塊是靜態的，會使全部被導入的模塊，在加載時就被翻譯(沒法作到按需編譯，下降首頁加載速度)。有些場景中，你可能但願根據條件導入模塊或者按需導入模塊，這時你可使用動態導入代替靜態導入、數組

在 import() 以前，當咱們須要根據條件導入模塊時，不得不使用 require()。promise

如：安全

if(XXX){
	const menu = require('./menu');
}
複製代碼

現在能夠替換爲：babel

if(XXX){
	const menu = import('./menu');
}
複製代碼

@babel/preset-env 已經包含了 @babel/plugin-syntax-dynamic-import，所以若是要使用 import() 語法，只須要配置 @babel/preset-env 便可。markdown

提示： 請不要濫用動態導入（只有在必要狀況下采用）。靜態框架能更好的初始化依賴，並且更有利於靜態分析工具和 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-s<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 的值是 rejectedd，那麼該對象有一個 reason 屬性，其屬性值是對應的 promise 失敗的緣由。

BigInt

BigInt 是一種數字類型的數據，它能夠表示任意精度格式的整數。在此以前，JS中安全的最大數字是 9009199254740091，即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，若是其值是 null 或 undefined，那麼表達式短路計算直接返回 undefined。

能夠看到可選鏈操做符 ?. 和空位合併操做符同樣，都是針對的 null 和 undefined 這兩個值。

至此，ES2020 的新特性就都介紹完畢了，總得來說，新增內容並很少，一杯咖啡的時間就能夠掌握個大概，不過仍是要常常回顧，否則會很容易遺忘。