ES11新增的9個(gè)新特性

原文來源于 前端宇宙 公眾號淹接，作者 劉小夕

簡介

ECMAScript 2020 是 ECMAScript 語言規(guī)范的第11版氯庆。自1997年出版第一版以來命咐，ECMAScript 已發(fā)展成為世界上使用最廣泛的通用編程語言之一景殷。

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

String 的 matchAll 方法

動態(tài)導(dǎo)入語句 import()

import.meta

export * as ns from 'module'

Promise.allSettled

一種新的數(shù)據(jù)類型：BigInt

GlobalThis

Nullish coalescing Operator

Optional Chaining

image

1. 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]
 */

2. Dynamic import

標(biāo)準(zhǔn)用法的 import 導(dǎo)入的模塊是靜態(tài)的披蕉，會使所有被導(dǎo)入的模塊，在加載時(shí)就被編譯（無法做到按需編譯，降低首頁加載速度）没讲。有些場景中眯娱，你可能希望根據(jù)條件導(dǎo)入模塊或者按需導(dǎo)入模塊，這時(shí)你可以使用動態(tài)導(dǎo)入代替靜態(tài)導(dǎo)入爬凑。

在 import() 之前徙缴，當(dāng)我們需要根據(jù)條件導(dǎo)入模塊時(shí)，不得不使用 require()嘁信。

如:

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

如今可以替換為:

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

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

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

另外糊余，import() 返回的是一個(gè) 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 {

}

3. import.meta

import.meta 會返回一個(gè)對象单寂，有一個(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 啟動

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

最開始測試時(shí)昵时，我是在 React 的項(xiàng)目中測試的，僅配置了 @babel/preset-env 和 @babel/preset-react 預(yù)設(shè)椒丧，使用 import.meta 時(shí)壹甥，會報(bào)錯(cuò)如下：

image

安裝 @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"}}

4. 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' 并不會真的將導(dǎo)入模塊棒假，因此在該模塊(menu.js)中溯职，我們是獲取不到 ns 的。

5. Promise.allSettled

Promise.all 或者 Promise.race 有的時(shí)候并不能滿足我們的需求帽哑。比如谜酒，我們需要在所有的 promise 都結(jié)束的時(shí)候做一些操作，而并不在乎它們是成功還是失敗妻枕。在沒有 Promise.allSettled 之前僻族，我們需要自己去寫實(shí)現(xiàn)粘驰。

Promise.allSettled() 方法返回一個(gè)在所有給定的 promise 都已經(jīng) fulfilled 或 rejected 后的 promise ，并帶有一個(gè)對象數(shù)組述么，每個(gè)對象表示對應(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è)對象顶伞，每個(gè)對象都有一個(gè) status 屬性，值為 fulfilled 或 rejected剑梳，如果status 的值是 fulfilled唆貌，那么該對象還有一個(gè) value 屬性，其屬性值是對應(yīng)的 promise 成功的結(jié)果垢乙；如果 status 的值是 rejected挠锥，那么該對象有一個(gè) reason 屬性，其屬性值是對應(yīng)的 promise 失敗的原因侨赡。

6. BigInt

BigInt 是一種數(shù)字類型的數(shù)據(jù)，它可以表示任意精度格式的整數(shù)粱侣。在此之前羊壹，JS 中安全的最大數(shù)字是 9009199254740991，即2^53-1齐婴，在控制臺中輸入 Number.MAX_SAFE_INTEGER 即可查看油猫。超過這個(gè)值，JS 沒有辦法精確表示柠偶。另外情妖，大于或等于2的1024次方的數(shù)值，JS 無法表示诱担，會返回 Infinity毡证。

BigInt 即解決了這兩個(gè)問題。BigInt 只用來表示整數(shù)蔫仙，沒有位數(shù)的限制料睛，任何位數(shù)的整數(shù)都可以精確表示。為了和 Number 類型進(jìn)行區(qū)分摇邦，BigInt 類型的數(shù)據(jù)必須添加后綴 n.

//Number類型在超過9009199254740991后恤煞，計(jì)算結(jié)果即出現(xià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); //一串超級長的數(shù)字，這里就不貼了

我們還可以使用 BigInt 對象來初始化 BigInt 實(shí)例：

console.log(BigInt(999)); // 999n 注意：沒有 new 關(guān)鍵字Ｊ┘＞影恰！

需要說明的是丑慎，BigInt 和 Number 是兩種數(shù)據(jù)類型喜喂，不能直接進(jìn)行四則運(yùn)算瓤摧，不過可以進(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

7. GlobalThis

JS 中存在一個(gè)頂層對象夜惭，但是姻灶，頂層對象在各種實(shí)現(xiàn)里是不統(tǒng)一的。

從不同的 JavaScript 環(huán)境中獲取全局對象需要不同的語句诈茧。在 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 作為頂層對象障涯，在任何環(huán)境下，都可以簡單的通過 globalThis 拿到頂層對象膳汪。

8. 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í)，都會使用右側(cè)的操作數(shù)冯痢。如果使用 || 來為某些變量設(shè)置默認(rèn)值搁料，可能會遇到意料之外的行為。

例如:

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ī)避以上問題，它只有在左操作數(shù)是 null 或者是 undefined 時(shí)椒振，才會返回右側(cè)操作數(shù)昭伸。

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

9. Optional Chaining

可選鏈操作符 ?. 允許讀取位于連接對象鏈深處的屬性的值澎迎，而不必明確驗(yàn)證鏈中的每個(gè)引用是否有效庐杨。?. 操作符的功能類似于 . 鏈?zhǔn)讲僮鞣〉鳎煌幵谟冢谝脼榭?nullish, 即 null 或者 undefined) 的情況下不會引起錯(cuò)誤灵份，該表達(dá)式短路返回值是 undefined仁堪。

例如，我們要訪問 info 對象的 animal 的 reptile 的 tortoise填渠。但是我們不確定 animal, reptile 是否存在弦聂，因此我們需要這樣寫：

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

因?yàn)?null.reptile 或 undefined.reptile 會拋出錯(cuò)誤：TypeError: Cannot read property 'reptile' of undefined 或 TypeError: Cannot read property 'reptile' of null，為了避免報(bào)錯(cuò)氛什，如果我們需要訪問的屬性更深莺葫，那么這個(gè)這句代碼會越來越長。

而有了可選鏈操作符 ?.枪眉，我們在訪問 reptile 之前捺檬，不再需要校驗(yàn) info.animal 的值。同樣贸铜，在訪問 info.animal.reptile.tortoise 之前堡纬，也不需要校驗(yàn) info.animal.reptile 的值。

上面的代碼簡化為：

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

JS在嘗試訪問 info.animal.reptile 之前蒿秦，會隱式檢查并確定 info.animal 的值不是 null 或 undefined烤镐，如果其值是 null 或 undefined，那么表達(dá)式短路計(jì)算直接返回 undefined渤早。

可以看到可選鏈操作符 ?. 和空位合并操作符一樣，都是針對的 null 和 undefined 這兩個(gè)值瘫俊。

參考資料

ecma-262
A Super Hacky Alternative to import.meta.url
import
export 與 import 的復(fù)合寫法
BigInt 數(shù)據(jù)類型
globalThis
globalThis對象