好消息——ES2020 的新功能现已发布!这意味着我们现在可以完整了解 ES2020 中发生的变化。ES2020 是 JavaScript 的新的和改进的规范。我们来看看有哪些更改。

#1:BigInt

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

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

Screenshot-2020-04-03-at-8.21.47-PM

但是,如上所示,你需要在数字的末尾附加 nn 表示这是一个BigInt。JavaScript 引擎(v8 引擎或它使用的任何引擎)应该对它进行不同的处理。

此改进不向后兼容,因为传统的数字系统是 IEEE754(它不能支持这种大小的数字)。

#2:动态导入

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

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

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

Screenshot-2020-04-03-at-8.26.27-PM

#3:空值合并

空值合并增加了真正检查 空值 而不是 假值 的能力。你可能会问,空值假值 之间有什么区别?

在 JavaScript 中,很多值都是 假值,例如空字符串,数字 0、 undefinednullfalseNaN 等等。

但是,很多时候你可能想检查一个变量是否为空——即它是 undefined 还是为 null,例如变量什么时候可以有一个空字符串或一个假值。

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

Screenshot-2020-04-03-at-8.47.03-PM

你可以清楚地看到 OR 运算符如何始终返回真值,而空值运算符如何返回非空值。

#4:可选链

可选链语法使你可以访问深度嵌套的对象属性,而不必担心该属性是否存在。如果存在,那就太好了! 如果不存在,将返回 undefined

这不仅适用于对象属性,还适用于函数调用和数组。超级方便! 这是一个例子:

Screenshot-2020-04-03-at-8.51.58-PM

#5:Promise.allSettled

Promise.allSettled 方法接受一个 Promises 数组,并且仅在所有这些 Promises 都已执行(已执行或已执行失败)时才进行解析。

在这之前,这个方法不可使用。有些相近的操作可以使用,比如 raceall。有了这个方法之后,JavaScript 可以实现“只要运行所有 promise——我不在乎结果”。

Screenshot-2020-04-03-at-8.54.58-PM

#6:String#matchAll

matchAll 是一个用于 String 的新的方法,和正则相关。这个方法将返回一个迭代器,该迭代器一个接一个地返回所有匹配的组。 让我们看一个简单的例子:

Screenshot-2020-04-03-at-8.59.14-PM

#7:globalThis

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

这是因为它对于浏览器是 window,对于 Node 是 global,对于 web workers 是self。 如果有更多的运行时,则全局对象也将有所不同。

因此,你将必须拥有自己的实现来检测运行时,然后使用正确的全局方法来实现。

ES2020 给我们带来 globalThis,不管你在哪里执行代码,它始终引用全局对象:

Screenshot-2020-04-03-at-9.02.27-PM

#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: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(对于内联脚本)。

总结

I love the consistency and speed with which the JavaScript community has evolved and is evolving. It is amazing and truly wonderful to see how JavaScript came from a language which was booed on, 10 years go, to one of the strongest, most flexible and versatile language of all time today.

Do you wish to learn JavaScript and other programming languages in a completely new way? Head on to a new platform for developers I'm working on to try it out today!

What's your favorite feature of ES2020? Tell me about it by tweeting and connecting with me on Twitter and Instagram!

This is a blog post composed from my video which is on the same topic. It would mean the world to me if you could show it some love!

我喜欢 JavaScript 社区始终快速发展。见证 JavaScript 如何在十年内从一种普通的语言发展成有史以来最强大,最灵活和通用性最强的语言之一,真是太神奇了,真是太棒了!

你是否想以全新的方式学习 JavaScript 和其他编程语言? 欢迎访问我正在开发的新平台

你最喜欢 ES2020 的功能是什么?你可以在 TwitterInstagram 上告诉我。

非常希望你喜欢这篇文章!

原文:10 New JavaScript Features in ES2020 That You Should Know,作者:Mehul Mohan