ES2020 中你应该知道的 10 个 JavaScript 新特性

我正在开启一个名为“周二小贴士”的新系列，每周二都会写一篇文章，分享一些小贴士和技巧。所以请关注我，及时了解最新动态！

嘿，开发人员，ES2020 的新功能已经推出一段时间了，但并不是每个人都知道它们，所以这里有一些很酷的功能可以尝试一下！

如果你喜欢、分享和评论，那将会非常有帮助

周二小贴士 - 2021年3月30日

1. BigInt

JavaScript 中最令人期待的功能之一 BigInt 终于来了。它实际上允许开发人员在 JS 代码中使用更大的整数来处理数据。

目前，JavaScript 中可以存储的最大整数是pow(2, 53) - 1。但 BigInt 实际上可以让你存储更多。

但是，如上所示，你需要n在数字的末尾添加一个 。这n表示这是一个 BigInt 类型，JavaScript 引擎（例如 V8 引擎）应该区别对待。

这种改进不向后兼容，因为传统的数字系统是 IEEE754（无法支持这种大小的数字）。

2.动态导入

JavaScript 中的动态导入功能让您可以在应用程序中以模块的形式动态导入 JS 文件。这就像您目前使用 Webpack 和 Babel 一样。

此功能可帮助您按需交付代码（通常称为代码拆分），而无需 Webpack 或其他模块打包工具的开销。您还可以根据需要在 if-else 语句块中条件性地加载代码。这样做的好处是，您实际上导入了一个模块，因此它不会污染全局命名空间。

3. 空值合并

nullish空值合并增加了真正检查值而不是值本身的能力。你可能会问，和值falsey之间有什么区别？nullishfalsey

在 JavaScript 中，许多值都是，例如falsey空字符串、数字 0 undefined、、、、等等null。falseNaN

但是，您可能需要检查大量次变量是否为空 - 即它是否为undefined或null，例如当变量可以具有空字符串甚至假值时。

在这种情况下，您将使用新的空值合并运算符，??

您可以清楚地看到OR运算符始终返回真值，而空值运算符返回非空值。

4. 可选链式调用

可选链式语法允许你访问深层嵌套的对象属性，而无需担心该属性是否存在。如果存在，则undefined返回结果。这不仅适用于对象属性，也适用于函数调用和数组。超级方便！例如：

5. Promise.allSettled

该Promise.allSettled方法接受一个 Promise 数组，并且只有当所有 Promise 都得到解决（无论是解决还是拒绝）时才会解决。

此前，此功能并非原生可用，尽管有一些接近的实现，例如race和all。

6. 字符串#matchAll

matchAll是原型中新增的一个与正则表达式相关的方法String。该方法返回一个迭代器，该迭代器会逐个返回所有匹配的组。请看以下示例：

7. globalThis

如果您编写了一些可以在 Node、浏览器环境以及 Web-worker 内部运行的跨平台 JS 代码，那么您将很难掌握全局对象。

这是因为它适用window于浏览器、globalNode 和selfWeb Worker。如果有更多的运行时，它们的全局对象也会有所不同。

因此，你必须自己实现检测运行时，然后使用正确的全局变量。因此，ES2020 引入了globalThis无论在何处执行代码，都始终引用全局对象的机制：

8. 模块命名空间导出

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

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

然而，export到目前为止，还不存在对称语法：

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

这等效于以下内容：

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

9. 定义良好的 for-in 顺序

ECMA 规范并未指定for (x in y)应以何种顺序运行。尽管此前浏览器已自行实现了一致的顺序，但这已在 ES2020 中正式标准化。

10. 导入.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；对于内联脚本，该 URL 是包含该脚本的文档的基本 URL。

非常感谢您阅读这篇文章。

评论你喜欢的 JavaScript 特性以及你认为下一个 ES 中应该改进的特性

请点赞、分享和评论

在Dev和Twitter上关注我