种草 ES2020 新特性

一：Promise.allSettled

并发任务中，无论一个任务正常或者异常，都会返回对应的的状态（fulfilled 或者 rejected）与结果（业务value 或者拒因 reason），在 then 里面通过 filter 来过滤出想要的业务逻辑结果，这就能最大限度的保障业务当前状态的可访问性，而 Promise.allSettled 就是解决这问题的。

Promise.allSettled([
    Promise.reject({code: 500, msg: '服务异常'}),
    Promise.resolve({ code: 200, list: []}),
    Promise.resolve({code: 200, list: []})
])
.then((ret) => {
    /*
        0: {status: "rejected", reason: {…}}
        1: {status: "fulfilled", value: {…}}
        2: {status: "fulfilled", value: {…}}
    */
    // 过滤掉 rejected 状态，尽可能多的保证页面区域数据渲染
    RenderContent(ret.filter((el) => {
        return el.status !== 'rejected';
    }));
});

二：可选链（Optional chaining）

可选链可让我们在查询具有多层级的对象时，不再需要进行冗余的各种前置校验。


var name = user && user.info && user.info.name;
var age = user && user.info && user.info.getAge && user.info.getAge();
// 之后：
var name = user?.info?.name;
var age = user?.info?.getAge?.();

三：空值合并运算符

只有值为undefined 或者 null 的时候，才会取默认值

var level = user.data?.level ?? '暂无等级';

四：dynamic-import

el.onclick = () => {
    import(`/path/current-logic.js`)
    .then((module) => {
        module.doSomthing();
    })
    .catch((err) => {
        // load error;
    })
}

五：globalThis

而 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'); 
}; 

var globals = getGlobal();

MDN

六：BigInt

BigInt 是一种新的数据原始（primitive）类型

我们可以用 BigInt 对象表示大于的整数。可以通过常规操作（例如算术运算符）进行加、减、乘、除、余数和幂等运算。它可以由数字和十六进制或二进制字符串构造。此外它还支持 AND、OR、NOT 和 XOR 之类的按位运算。唯一无效的位运算是零填充右移运算符（>>>）。

使用 BigInt 有两种方式：

1、在整数字面量后面加n。

var bigIntNum = 9007199254740993n;

2、使用 BigInt 函数。

var bigIntNum = BigInt(9007199254740);

七：String.prototype.matchAll

var str = '<text>JS</text><text>正则</text>';
var reg = /<\\w+>(.*?)<\\/\\w+>/g;

console.log(str.match(reg));
// -> ["<text>JS</text>", "<text>正则</text>"]

ES2020提供了一种简易的方式：String.prototype.matchAll, 该方法会返回一个迭代器。

var str = '<text>JS</text><text>正则</text>';
var allMatchs = str.matchAll(/<\\w+>(.*?)<\\/\\w+>/g);

for (const match of allMatchs) {
    console.log(match);
}



// 第一次迭代返回：
// [
//     "<text>JS</text>", 
//     "JS", 
//     index: 0, 
//     input: "<text>JS</text><text>正则</text>", 
//     groups: undefined
// ]

// 第二次迭代返回：
// [
//     "<text>正则</text>", 
//     "正则", 
//     index: 15, 
//     input: "<text>JS</text><text>正则</text>", 
//     groups: undefined
// ]

能看出每次迭代中可获取所有的匹配，以及本次匹配的成功的一些其他元信息。

八、for-in 结构

ECMA-262 几乎全部未指明 for (a in b) 顺序，但真正的引擎至少在某些情况下是一致的。

历史上为获得完整的 for-in 顺序规范的一致意见所做的努力一再失败，部分原因是所有的引擎都有自己独特的实现，这是大量工作的结果，而且它们并不想重新讨论。

总之，当使用 for (a in b) 控制结构时，不同的引擎已就如何迭代属性达成一致，从而使行为标准化。

参考：

JavaScript ES2020 新特性的实例

tc39-Github

种草 ES2020 新特性