ES 2020 新特性

2,578 阅读2分钟

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

可选链式操作符

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

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

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

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

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

空值合并

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

null ?? 7 // 7

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

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

也就是说 ?? 只有当左边是 nullundefined 时,才会取右边的值,而 || 则是左边为假时,就会取右边的值,比较典型的就是 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. v8.dev/features/ta…

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