ES 2020 新特性

在 ES 2020 中，有一些非常实用的新特性，接下来，就跟我一起看看在新版本中有哪些新特性在平时的开发中可以用到。

可选链式操作符

大家平常在工作中写代码的时候，有时候会写这样的代码：

if (a && a. b && a.b.c) {
    console.log(a.b.c);
}

因为我们不确定 a 或 b 是否存在，那么获取 c 就会报错，这时候可选链式调用就非常有用了。

我们可以使用可选链式操作符 ?.，如果没有值，则返回 undefined 而不是直接报错，就像下面这样：

console.log(a?.b?.c || '');

## 空值合并

控制合并运算符为 ??，它的作用是当左侧操作数为 null 或者 undefined 时，则返回右侧操作数，我们来看实际的例子：

null ?? 7 // 7

有些同学可能就要问了，这东西和 || 有什么区别？其实 || 操作符还是必须的，这是这两者的应用场景不一样，比如下面的情况：

'' ?? 7; // ''
'' || 7; // 7

也就是说 ?? 只有当左边是 null 和 undefined 时，才会取右边的值，而 || 则是左边为假时，就会取右边的值，比较典型的就是 0 和空字符串了。

动态引入

之前我们可以通过 webpack 来使用动态引入，现在这个特性原生就支持了。

import('a/b.js').then(b => {
    console.log(b);
});

但是对于大多数开发者来说是没什么感知的，毕竟大多数人还是用 webpack 来打包的。

Promise.allSettled

Promise.allSettled 返回一个包含结果和值的对象数组，不论执行每一个 Promise 时是成功还是失败，它都会全部执行完成，然后返回结果，下面就是和 Promise.all 的对比。

const p1 = Promise.resolve(1);
const p2 = Promise.reject(2);
const p3 = Promise.resolve(3);

/**
 *[{status: "fulfilled", value: 1}
 * {status: "rejected", reason: 2}
 * {status: "fulfilled", value: 3}]
 */
Promise.allSettled([p1, p2, p3]).then(result => console.log(result));

/**
 * error 2
 */
Promise.all([p1, p2, p3]).catch(error => console.log('error', error));

其他特性

下面是一些 ES 2020 中提到的其他的特性：

• 私有属性：使用 # 来标识类的私有属性，无法从外部访问
• BigInt：可以使用 BigInt 来创建更大的数字
• globalThis：提供了 globalThis 来获取不同环境下的全局 this 对象
• matchAll：这个方法返回所有和该字符串正则表达式匹配的结果
• 模块名称空间导出：之前需要先 import 进来，然后导出去，现在可以直接导出模块下的所有东西

这些特性都没有详细说明，想了解更多，请查看下方的资料。

更多资料

1. https://v8.dev/features/tags/...

非常感谢您的阅读，欢迎关注、转发、分享支持我。