matchAll

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

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

Dynamic import

標(biāo)準(zhǔn)用法的 import 導(dǎo)入的模塊是靜態(tài)的，會使所有被導(dǎo)入的模塊，在加載時就被翻譯(無法做到按需編譯，降低首頁加載速度)。有些場景中，你可能希望根據(jù)條件導(dǎo)入模塊或者按需導(dǎo)入模塊，這時你可以使用動態(tài)導(dǎo)入代替靜態(tài)導(dǎo)入,返回是一個 promise 對象
提示： 請不要濫用動態(tài)導(dǎo)入（只有在必要情況下采用）。靜態(tài)框架能更好的初始化依賴，而且更有利于靜態(tài)分析工具和 tree shaking 發(fā)揮作用。

//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));
} else {

}

import.meta

export * as ns from 'module'

并不會真的將導(dǎo)入模塊，因此在該模塊(menu.js)中，我們是獲取不到 ns 的

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

Promise.allSettled

Promise.allSettled() 方法返回一個在所有給定的 promise 都已經(jīng) fulfilled 或 rejected 后的 promise，并帶有一個對象數(shù)組，每個對象表示對應(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' }
    ]
*/

BigInt

允許超出js數(shù)字最大值(9007199254740991)存在和計算;
BigInt類型的數(shù)據(jù)必須添加后綴 n;
BigInt 和 Number 是兩種數(shù)據(jù)類型，不能直接進行四則運算，不過可以進行比較操作

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

ES2020 中引入 globalThis 作為頂層對象，在任何環(huán)境下，都可以簡單的通過 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');
};

Nullish coalescing Operator(??)

當(dāng)左側(cè)的操作作數(shù)為 null 或者 undefined 時，返回其右側(cè)操作數(shù)，否則返回左側(cè)操作數(shù)

// 原取值
var apple = null,
    orange = 0,
    grape = false,
    banana;
console.log(apple || 10)   // 10
console.log(orange || 10)   // 10
console.log(grape || 10)   // 10
console.log(banana || 10)   // 10

// ??
var apple = null,
    orange = 0,
    grape = false,
    banana;
console.log(apple ?? 10)   // 10
console.log(orange ?? 10)   // 0
console.log(grape ?? 10)   // false
console.log(banana ?? 10)   // 10

Optional Chaining(?.)

可選鏈操作符，該表達式短路返回值是 undefined

var mobile = {
    huawei: {}
}

console.log(mobile.huawei)  // {}
console.log(mobile.huawei.system)  // undefind
console.log(mobile.huawei.system.version)  // 報錯
console.log(mobile.huawei.system?.version?.xxx?.xxxx)  // undefined

文章來源：小耿學(xué)前端 https://juejin.cn/post/6898518180923506702