ECMAScript2020是ECMAScript語(yǔ)言規(guī)范的第11版。自1997年出版第一版以來(lái)拔创，ECMAScript已發(fā)展成為世界上使用最廣泛的通用編程語(yǔ)言之一利诺。

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

• String 的matchAll方法
• 動(dòng)態(tài)導(dǎo)入語(yǔ)句import()
• import.meta
• export * as ns from 'module'
• Promise.allSettled
• 一種新的數(shù)據(jù)類型：BigInt
• GlobalThis
• Nullish coalescing Operator
• Optional Chaining
  
  

matchAll

matchAll() 方法返回一個(gè)包含所有匹配正則表達(dá)式的結(jié)果的迭代器。使用 for...of 遍歷或者使用 操作符... Array.from將其轉(zhuǎn)換成數(shù)組剩燥。

const reg = /[0-3]/g;
const data = '2020'; 
console.log(data.matchAll(reg));//data.matchAll 的返回值是一個(gè)迭代器
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

標(biāo)準(zhǔn)用法的 import導(dǎo)入的模塊是靜態(tài)的慢逾，會(huì)使所有被導(dǎo)入的模塊，在加載時(shí)就被編譯（無(wú)法做到按需編譯灭红，降低首頁(yè)加載速度）侣滩。有些場(chǎng)景中，你可能希望根據(jù)條件導(dǎo)入模塊或者按需導(dǎo)入模塊变擒，這時(shí)你可以使用動(dòng)態(tài)導(dǎo)入代替靜態(tài)導(dǎo)入君珠。


在import()之前，當(dāng)我們需要根據(jù)條件導(dǎo)入模塊時(shí)娇斑，不得不使用 require()策添。
如:

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

@babel/preset-env已經(jīng)包含了 @babel/plugin-syntax-dynamic-import，因此如果要使用import() 語(yǔ)法毫缆，只需要配置 @babel/preset-env 即可唯竹。

： 請(qǐng)不要濫用動(dòng)態(tài)導(dǎo)入（只有在必要情況下采用）。靜態(tài)框架能更好的初始化依賴悔醋，而且更有利于靜態(tài)分析工具和 tree shaking 發(fā)揮作用摩窃。

另外，import() 返回的是一個(gè)promise 對(duì)象。例如：

//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會(huì)返回一個(gè)對(duì)象猾愿，有一個(gè) url 屬性鹦聪，返回當(dāng)前模塊的url路徑，只能在模塊內(nèi)部使用蒂秘。

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

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

因?yàn)? import.meta 必須要在模塊內(nèi)部使用泽本，如果不加 type="module" ，控制臺(tái)會(huì)報(bào)錯(cuò)：Cannot use 'import.meta' outside a module姻僧。

安裝@open-wc/webpack-import-meta-loader规丽，修改 webpack 的配置，可以正常運(yùn)行撇贺。

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';

可以理解為是將下面兩條語(yǔ)句合并為一句：

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

不過(guò)需要注意的是 export * as ns from './info' 并不會(huì)真的將導(dǎo)入模塊，因此在該模塊(menu.js)中松嘶，我們是獲取不到 ns的艘狭。

Promise.allSettled

Promise.all或者 Promise.race 有的時(shí)候并不能滿足我們的需求。比如翠订，我們需要在所有的 promise都結(jié)束的時(shí)候做一些操作巢音，而并不在乎它們是成功還是失敗。在沒(méi)有 Promise.allSettled之前尽超，我們需要自己去寫實(shí)現(xiàn)官撼。
Promise.allSettled() 方法返回一個(gè)在所有給定的 promise 都已經(jīng) fulfilled或 rejected后的 promise，并帶有一個(gè)對(duì)象數(shù)組似谁，每個(gè)對(duì)象表示對(duì)應(yīng)的promise結(jié)果傲绣。

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()的成功的結(jié)果是一個(gè)數(shù)組棘脐，該數(shù)組的每一項(xiàng)是一個(gè)對(duì)象斜筐，每個(gè)對(duì)象都有一個(gè)status 屬性，值為 fulfilled 或 rejected蛀缝，如果status的值是fulfilled顷链，那么該對(duì)象還有一個(gè)value 屬性，其屬性值是對(duì)應(yīng)的 promise 成功的結(jié)果屈梁；如果status 的值是 rejected嗤练，那么該對(duì)象有一個(gè) reason 屬性，其屬性值是對(duì)應(yīng)的promise 失敗的原因.

BigInt

BigInt 是一種數(shù)字類型的數(shù)據(jù)在讶，它可以表示任意精度格式的整數(shù)煞抬。在此之前，JS 中安全的最大數(shù)字是9009199254740991构哺，即2^53-1革答，在控制臺(tái)中輸入 Number.MAX_SAFE_INTEGER 即可查看战坤。超過(guò)這個(gè)值，JS 沒(méi)有辦法精確表示残拐。另外渗磅，大于或等于2的1024次方的數(shù)值丐枉，JS 無(wú)法表示贮配，會(huì)返回 Infinity半火。
BigInt即解決了這兩個(gè)問(wèn)題。BigInt 只用來(lái)表示整數(shù)错沃，沒(méi)有位數(shù)的限制栅组，任何位數(shù)的整數(shù)都可以精確表示。為了和 Number 類型進(jìn)行區(qū)分枢析，BigInt類型的數(shù)據(jù)必須添加后綴 n.

//Number類型在超過(guò)9009199254740991后玉掸，計(jì)算結(jié)果即出現(xiàn)問(wèn)題
const num1 = 90091992547409910;
console.log(num1 + 1); //90091992547409900

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

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

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

需要說(shuō)明的是登疗，BigInt和Number 是兩種數(shù)據(jù)類型排截，不能直接進(jìn)行四則運(yùn)算，不過(guò)可以進(jìn)行比較操作辐益。

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 中存在一個(gè)頂層對(duì)象，但是脱吱，頂層對(duì)象在各種實(shí)現(xiàn)里是不統(tǒng)一的智政。

從不同的 JavaScript環(huán)境中獲取全局對(duì)象需要不同的語(yǔ)句。在 Web 中箱蝠，可以通過(guò)window续捂、self 取到全局對(duì)象，但是在 Web Workers中宦搬，只有 self 可以牙瓢。在 Node.js中，它們都無(wú)法獲取间校，必須使用 global矾克。

在globalThis之前，我們這樣去獲取全局對(duì)象：

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 作為頂層對(duì)象憔足，在任何環(huán)境下胁附，都可以簡(jiǎn)單的通過(guò) globalThis 拿到頂層對(duì)象。

Nullish coalescing Operator

ES2020 新增了一個(gè)運(yùn)算符 ??滓彰。當(dāng)左側(cè)的操作數(shù)為 null或者undefined時(shí)控妻，返回其右側(cè)操作數(shù)，否則返回左側(cè)操作數(shù)揭绑。
使用 || 操作符弓候，當(dāng)左側(cè)的操作數(shù)為0、 null、 undefined菇存、 NaN夸研、 false、 '' 時(shí)撰筷，都會(huì)使用右側(cè)的操作數(shù)陈惰。如果使用 ||來(lái)為某些變量設(shè)置默認(rèn)值，可能會(huì)遇到意料之外的行為毕籽。

例如:

const defaultValue = 100;
let value = someValue || defaultValue;
//當(dāng) someValue 轉(zhuǎn)成 boolean 值為 false 時(shí)抬闯，value 的值都是 defaultValue

當(dāng) someValue 的值為 0 時(shí) ，我們其實(shí)期望value 值為 0, 但是它卻被錯(cuò)誤的分配成了 100.

??操作符可以規(guī)避以上問(wèn)題关筒，它只有在左操作數(shù)是 null或者是 undefined時(shí)溶握，才會(huì)返回右側(cè)操作數(shù)。

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

Optional Chaining

可選鏈操作符?. 允許讀取位于連接對(duì)象鏈深處的屬性的值睡榆，而不必明確驗(yàn)證鏈中的每個(gè)引用是否有效。?.操作符的功能類似于.鏈?zhǔn)讲僮鞣塾埽煌幵谟谡陀欤谝脼榭?nullish, 即null 或者undefined) 的情況下不會(huì)引起錯(cuò)誤，該表達(dá)式短路返回值是undefined包雀。

例如宿崭，我們要訪問(wèn) info 對(duì)象的 animal的 reptile 的tortoise。但是我們不確定 animal, reptile 是否存在才写，因此我們需要這樣寫：

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

因?yàn)?null.reptile 或 undefined.reptile 會(huì)拋出錯(cuò)誤：TypeError: Cannot read property 'reptile' of undefined或TypeError: Cannot read property 'reptile' of null葡兑，為了避免報(bào)錯(cuò)，如果我們需要訪問(wèn)的屬性更深赞草，那么這個(gè)這句代碼會(huì)越來(lái)越長(zhǎng)讹堤。

而有了可選鏈操作符 ?.，我們?cè)谠L問(wèn) reptile之前厨疙，不再需要校驗(yàn)info.animal的值洲守。同樣，在訪問(wèn) info.animal.reptile.tortoise之前轰异，也不需要校驗(yàn) info.animal.reptile的值岖沛。
上面的代碼簡(jiǎn)化為：

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

JS在嘗試訪問(wèn)info.animal.reptile之前，會(huì)隱式檢查并確定info.animal 的值不是null或undefined搭独，如果其值是null 或 undefined婴削，那么表達(dá)式短路計(jì)算直接返回undefined。

可以看到可選鏈操作符?. 和空位合并操作符一樣牙肝，都是針對(duì)的 null和 undefined 這兩個(gè)值唉俗。
至此嗤朴，ES2020的新特性就都介紹完畢了，總得來(lái)講虫溜，新增內(nèi)容并不多雹姊，一杯咖啡的時(shí)間就可以掌握個(gè)大概，不過(guò)還是要經(jīng)澈饫悖回顧吱雏，不然會(huì)很容易遺忘。

參考：https://juejin.im/post/6883306672064987149