Good news – the new ES2020 features are now finalised! This means we now have a complete idea of the changes happening in ES2020, the new and improved specification of JavaScript. So let's see what those changes are.

好消息– ES2020的新功能现已完成！ 这意味着我们现在对ES2020中发生的变化有了完整的了解，ES2020是JavaScript的新版本和改进版本。 因此，让我们看看这些更改是什么。

＃1：BigInt (#1: BigInt)

BigInt, one of the most anticipated features in JavaScript, is finally here. It actually allows developers to have much greater integer representation in their JS code for data processing for data handling.

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

At the moment the maximum number you can store as an integer in JavaScript is pow(2, 53) - 1 . But BigInt actually allows you to go even beyond that.

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

However, you need to have an n appended at the very end of the number, as you can see above. This n denotes that this is a BigInt and should be treated differently by the JavaScript engine (by the v8 engine or whatever engine it is using).

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

This improvement is not backwards compatible because the traditional number system is IEEE754 (which just cannot support numbers of this size).

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

＃2：动态导入 (#2: Dynamic import)

Dynamic imports in JavaScript give you the option to import JS files dynamically as modules in your application natively. This is just like how you do it with Webpack and Babel at the moment.

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

This feature will help you ship on-demand-request code, better known as code splitting, without the overhead of webpack or other module bundlers. You can also conditionally load code in an if-else block if you like.

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

The good thing is that you actually import a module, and so it never pollutes the global namespace.

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

＃3：空位合并 (#3: Nullish Coalescing)

Nullish coalescing adds the ability to truly check nullish values instead of falsey values. What is the difference between nullish and falsey values, you might ask?

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

In JavaScript, a lot of values are falsey, like empty strings, the number 0, undefined, null, false, NaN, and so on.

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

However, a lot of times you might want to check if a variable is nullish – that is if it is either undefined or null, like when it's okay for a variable to have an empty string, or even a false value.

但是，很多时候您可能想检查一个变量是否为空-即它是undefined还是为null ，例如当一个变量可以有一个空字符串，甚至是一个假值时。

In that case, you'll use the new nullish coalescing operator, ??

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

You can clearly see how the OR operator always returns a truthy value, whereas the nullish operator returns a non-nulllish value.

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

＃4：可选链接 (#4: Optional Chaining)

Optional chaining syntax allows you to access deeply nested object properties without worrying if the property exists or not. If it exists, great! If not, undefined will be returned.

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

This not only works on object properties, but also on function calls and arrays. Super convenient! Here's an example:

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

＃5：Promise.allSettled (#5: Promise.allSettled)

The Promise.allSettled method accepts an array of Promises and only resolves when all of them are settled – either resolved or rejected.

Promise.allSettled方法接受一个Promises数组，并且仅在所有这些Promises都已结算时才解决-已解决或被拒绝。

This was not available natively before, even though some close implementations like race and all were available. This brings "Just run all promises – I don't care about the results" natively to JavaScript.

这不是本机可用之前，即使像一些接近实现race和all可用。 这为JavaScript带来了“只要兑现所有承诺–我不在乎结果”。

＃6：字符串#matchAll (#6: String#matchAll)

matchAll is a new method added to the String prototype which is related to Regular Expressions. This returns an iterator which returns all matched groups one after another. Let's have a look at a quick example:

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

＃7：globalThis (#7: globalThis)

If you wrote some cross-platform JS code which could run on Node, in the browser environment, and also inside web-workers, you'd have a hard time getting hold of the global object.

如果您编写了一些跨平台的JS代码，它们可以在Node上，浏览器环境中以及在Web工作人员内部运行，那么您将很难掌握全局对象。

This is because it is window for browsers, global for Node, and self for web workers. If there are more runtimes, the global object will be different for them as well.

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

So you would have had to have your own implementation of detecting runtime and then using the correct global – that is, until now.

因此，您将不得不拥有自己的实现来检测运行时，然后使用正确的全局(即直到现在)实现。

ES2020 brings us globalThis which always refers to the global object, no matter where you are executing your code:

ES2020带给我们globalThis不管您在哪里执行代码，它始终引用全局对象：

＃8：模块命名空间导出 (#8: Module Namespace Exports)

In JavaScript modules, it was already possible to use the following syntax:

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

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

However, no symmetric export syntax existed, until now:

但是，到目前为止，还没有对称的export语法：

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

This is equivalent to the following:

这等效于以下内容：

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

＃9：定义明确的顺序 (#9: Well defined for-in order)

The ECMA specification did not specify in which order for (x in y)  should run. Even though browsers implemented a consistent order on their own before now, this has been officially standardized in ES2020.

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

＃10：import.meta (#10: import.meta)

The import.meta object was created by the ECMAScript implementation, with a null prototype.

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

Consider a module, module.js:

考虑一个模块module.js ：

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

You can access meta information about the module using the import.meta object:

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

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

It returns an object with a url property indicating the base URL of the module. This will either be the URL from which the script was obtained (for external scripts), or the document base URL of the containing document (for inline scripts).

它返回一个带有url属性的对象，该属性指示模块的基本URL。 这将是从中获取脚本的URL(对于外部脚本)，或者是包含文档的文档基本URL(对于内联脚本)。

结论 (Conclusion)

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.

我喜欢JavaScript社区不断发展和发展的一致性和速度。 看到JavaScript如何从一种经过十年的嘘的语言发展成为当今有史以来最强大，最灵活和通用性最强的语言之一，真是太神奇了，真是太棒了。

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!

您是否想以全新的方式学习JavaScript和其他编程语言？ 前往面向我正在开发的开发人员的新平台，今天尝试一下！

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

ES2020最喜欢的功能是什么？ 通过在Twitter和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!

这是一篇由我的视频撰写的关于同一主题的博客文章。 如果您能表达爱意，那就对我来说意味着世界！

翻译自: https://www.freecodecamp.org/news/javascript-new-features-es2020/