es11新特性

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)]);
/*
   ["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

标准用法的 import 导入的模块是静态的，会使所有被导入的模块，在加载时就被翻译(无法做到按需编译，降低首页加载速度)。有些场景中，你可能希望根据条件导入模块或者按需导入模块，这时你可以使用动态导入代替静态导入,返回是一个 promise 对象
提示：请不要滥用动态导入（只有在必要情况下采用）。静态框架能更好的初始化依赖，而且更有利于静态分析工具和 tree shaking 发挥作用。

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

并不会真的将导入模块，因此在该模块(menu.js)中，我们是获取不到 ns 的

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

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' }
    ]
*/

BigInt

允许超出js数字最大值(9007199254740991)存在和计算;
BigInt类型的数据必须添加后缀 n;
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

ES2020 中引入 globalThis 作为顶层对象，在任何环境下，都可以简单的通过 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(??)

当左侧的操作作数为 null 或者 undefined 时，返回其右侧操作数，否则返回左侧操作数

// 原取值
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

文章来源：小耿学前端 https://juejin.cn/post/6898518180923506702