你应该知道的 10 个关于 ES2020 的新特性

作者：Mehul Mohan
原文：https://www.freecodecamp.org/news/javascript-new-features-es2020/

好消息：ES2020 的新特性都已经完成了！这意味着我们现在对新的 JavaScript 规范 ES2020 的变化有了完整的了解。So，让我们看看都有哪些变化把。

1：BigInt

BigInt 是 JavaScript 最值得期待的特性之一，它终于来了。实际上，它允许开发人员在其 JS 代码中能使用大得多的整数表示形式进行数据处理。

目前，我们可以在 JavaScript 中能存储的整数最大值是 pow(2, 53) - 1。但是 BigInt 实际上允许你超过这个范围。

不过，就像你上面看到的一样，你需要在数字后面添加一个 n。额外的 n 说明这是一个 BigInt，并且告诉 JS 引擎应该区别对待（v8 引擎或者其他使用的任意引擎）。

由于过去使用的标准是 IEEE754（不支持这种大小的数字），因此 BigInt 的改进不向后兼容。

2：动态 Import

JavaScript 中的动态导入使我们可以选择将 JS 文件作为模块自然地动态导入应用程序中。这就好像当前使用的 Webpack 和 Babel 一样，有相同的效果。

这个特性将有助于我们写出按需加载的代码（通常称为代码拆分），而不会增加 webpack 或其他模块打包器的开销。如果需要的话，还可以有条件地在 if-else 块中加载代码。

由于实际上导入的是一个模块，因此永远不会污染全局命名空间。

if (myCondition) {
  const module = await import('./dynamicmodule.js')
  module.addNumbers(3, 4, 5)
}

3：空值合并

空值合并增加了真正检验空值而不是虚值的能力。那么你可能又会问，什么是空值，什么是虚值？

在 JavaScript 中，有一些值会被认定为 false，就比如说空字符串，数字 0，null，undefined，false和 NaN 等等。

但是，很多时候你可能想判断一个变量是否为空值，空值是指变量为 undefined 或者 null，而这个变量也可能为空字符串或者甚至是 false。

上述的这种情况，你将可以用上新的空值合并运算符 ?? 了。

你可以清楚的看到上面的 4 种情况，|| 运算符始终返回的是真值，而 ?? 运算符始终返回的是一个非空值。

4：可选链

可选链语法允许我们读取一个被连接对象的深层次的属性的值而无需明确校验链条上每一个引用的有效性。如果存在，那就太好了，正常返回对应属性值。如果不存在，将直接返回 undefined。

可选链不仅适用于对象属性，而且适用于函数调用和数组。使用起来非常方便！下面展示一些例子。

5：Promise.allSettled

Promise.allSettled 方法接收一个 Promise 的数组（译注：准确的说接收的是一个可迭代对象），并且仅当所有的这些 Promise 都被决议（不管 Promise 的最终状态是成功达成或者被拒绝）之后才会最终完成。

6：String#matchAll

matchAll 是一个添加到 String 原型对象的关于正则表达式的新方法。这个方法的返回值是一个迭代器，可以一个接一个的返回所有的捕获组。让我们看一个简单的例子：

7：globalThis

如果你写过一些能运行在 Node 环境，浏览器环境并且也能运行在 web-worker 中的跨平台 JS 代码，你就会觉得持有全局对象是一件很麻烦的事。

这是因为在浏览器中全局对象是 window，在 Node 环境中是 global，而在 web worker 里是 self。如果有更多的运行时环境，那么全局对象也将是不同的。

所以你不得不有自己的实现来检测运行时，在实现中使用正确的全局对象。这种方式一直延续到现在。

ES2020 给我们带来了 globalThis，不管我们的代码在什么环境下执行，globalThis 始终指向的都是全局对象。

8：模块命名空间导出

在 JavaScript 模块中，已经可以使用以下语法了：

import * as utils from './utils.mjs'

但是，到目前为止，还没有类似的导出语法：

export * as utils from './utils.mjs'

等效于以下代码：

import * as utils from './utils.mjs'
export { utils }

9：明确定义 for-in 顺序

ECMA 规范未指定 for (x in y) 应按哪个顺序运行。即使在这之前浏览器都已经自己实现了固定的顺序，但 ES2020 已正式将其标准化。

10：import.meta

import.meta 对象是由 ECMAScript 实现并创建的，带有 null 的原型对象。

假设一个模块 module.js：

<script type="module" src="module.js"></script>

你可以使用 import.meta 对象访问有关模块的元信息：

console.log(import.meta) // { url: "file:///home/user/module.js" }

它返回一个带有 url 属性的对象，指明模块的基本 URL。可以是获取的脚本的 URL（指外部脚本），也可以是包含文档的文档基 URL（指内联脚本）。

同内容的视频