你应该知道的10个ES2020中的javaScript新功能

好消息-新的ES2020功能现已完成！这意味着我们现在对ES2020中发生的变化有了一个完整的了解，这是一个新的和改进的JavaScript规范。所以我们来看看这些变化有哪些。

1：BigInt

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

目前，你可以在JavaScript中存储的最大整数为pow(2, 53) - 1。但是实际上BigInt允许你超越此范围。

如上所示，你需要在每个数字的末尾加上一个n。n表示这是一个BigInt类型的数字，应被JavaScript引擎区别对待（v8引擎或其他正在使用的引擎）。

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

2：动态导入（Dynamic import）

JavaScript中的动态导入让你可以选择将JS文件作为模块自然地动态导入到应用程序中。这就像你现在用Webpack和Babel做的一样。

此功能将帮助你按需加载请求的代码（通常称为代码拆分），而不会增加webpack或其他模块管理器的开销。如果愿意，还可以有条件地在if-else块中加载代码。

好处是你实际上导入了一个模块，因此它永远不会污染全局命名空间。

3：空值合并（Nullish Coalescing）

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

在JavaScript中，很多值都是falsey，比如空字符串，数字0，undefined，null，false，NaN等。

然而，很多时候你可能想检查一个变量是否为nullish，即它是undefined还是null，比如当希望一个变量可以是空字符串，甚至是false的时候。

在这种情况下，你就可以使用这个新的空值合并运算符 ??。

从上图中，你可以清楚地看到 || 运算符是如何始终返回真实值，而 ?? 运算符是如何返回非nulllish值的。

4：可选链（Optional Chaining）

Optional Chaining 语法允许你访问深度嵌套的对象属性，而不必担心该属性是否存在。如果存在，那么一切顺利，如果不存在，则返回undefined。

这不仅适应于对象属性，也适用于函数调用和数组。超级方便！下面是一个例子：

5：Promise.allSettled

该Promise.allSettled方法接受一个Promise数组，并且仅在所有这些Promise都Settled后才进行解析-resolved或者rejected。

尽管有一些类似的方法如race和all存在，以前也是无法实现该功能的。这就为JavaScript带来了“只要运行所有的promise-我不在乎结果”。

6：字符串matchAll（String#matchAll）

matchAll是添加到String原型的与正则表达式相关的新方法。该方法返回一个迭代器，该迭代器一个个地返回所有匹配的组。让我们看一个简单的例子：

7：globalThis

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

这是因为全局对象在浏览器中是window，在Node中是global，在web workers中是self。如果有更多的运行时环境，全局对象也会有所不同。

因此，您必须自己来实现检测运行时环境，然后使用正确的全局对象-到现在为止也是这样。

ES2020为我们带来了globalThis，无论你在哪里执行代码，它总是指向全局对象：

8：模块命名空间导出（Module Namespace Exports）

在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规范没有指定（x in y）的运行顺序。尽管之前浏览器自己实现了一个一致的顺序，但在ES2020中这已经正式标准化了。

10：import.meta

这个import.meta对象由ECMAScript实现创建，原型为null。

假如有这样一个模块，module.js:

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

你可以通过import.meat对象获取该模块的meta信息：

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

它返回一个对象，该对象的url属性是模块的base URL。它要么是获取script的URL（外链脚本），要么是所引入文件的base URL（内联脚本）。

结论

我喜欢JavaScript社区已经形成和正逐渐形成的一致性和发展速度。看着JavaScript是如何从一种被唾弃了10年的语言发展成为当今最强大、最灵活、最通用的语言之一，真是一件令人惊叹、非常奇妙的事情。