es javascript_javascript es2020在这里

es javascript

JavaScript’s development had been running at a slower pace ahead of the introduction of ES6 (also known as ECMAScript 2015). Now, in 2020, the latest JavaScript features have been finalized and released as ECMAScript 2020 (or ES2020). While ES2020 does not include as many features as they introduced in ES6, it has introduced a number of useful additions. In this article, I will discuss my favorite new features from ES2020.

在引入ES6(也称为ECMAScript 2015)之前，JavaScript的发展步伐缓慢。 现在，在2020年，最新JavaScript功能已经完成并作为ECMAScript 2020 (或ES2020)发布。 尽管ES2020不包括ES6中引入的功能，但是它引入了许多有用的功能。 在本文中，我将讨论我最喜欢的ES2020新功能。

可选链接 (Optional Chaining)

Optional Chaining syntax allows you to access deeply nested objects without worrying about whether the property exists or not. While working with objects, you must be familiar with an error of this kind:

可选的链接语法使您可以访问深度嵌套的对象，而不必担心该属性是否存在。 在处理对象时，您必须熟悉这种错误：

TypeError: Cannot read property <xyz> of undefined

The above error means that you are trying to access the property of an undefined variable. To avoid such errors, your code will look like this:

上面的错误意味着您正在尝试访问未定义变量的属性。 为避免此类错误，您的代码将如下所示：

Instead of checking each node, optional chaining handles these cases with ease. Below is the same example using optional chaining:

可选的链接可以轻松地处理这些情况，而不是检查每个节点。 以下是使用可选链接的相同示例：

You can also check arrays and functions using Optional Chaining. An example is given below:

您还可以使用可选链接检查数组和函数。 下面是一个示例：

全球本 (globalThis)

JavaScript is used in a variety of environments such as web browsers, Node.js, Web Workers, and so on. Each of these environments has its own object model and a different syntax to access it. ES2020 brings us the globalThis property which always refers to the global object, no matter where you are executing your code. This property really shines when you aren’t sure what environment the code is going to run in.

JavaScript在各种环境中使用，例如Web浏览器，Node.js，Web Workers等。 这些环境中的每一个都有其自己的对象模型和不同的语法来访问它。 ES2020 给我们带来了globalThis属性，无论您在哪里执行代码，该属性始终引用全局对象。 当您不确定代码将在什么环境中运行时，此属性确实很出色。

The following is the example of using setTimeout function in Node.js using globalThis:

以下是使用globalThis在Node.js中使用setTimeout函数的示例：

Below, the same method is used in web browser:

下面，在Web浏览器中使用相同的方法：

动态导入 (Dynamic Imports)

Dynamic Imports is one of my favorite feature of ES2020. As the name implies, you can import modules dynamically. Using dynamic imports, the code is delivered via smaller bundles as required (instead of downloading a single large bundle as has been previously required).

动态导入是我最喜欢的ES2020功能之一。 顾名思义，您可以动态导入模块。 使用动态导入，可根据需要通过较小的捆绑软件交付代码(而不是按照以前的要求下载单个大捆绑软件)。

When using dynamic imports, the import keywords can be called as a function, which returns a promise. Below is an example of how you can dynamically import a module when the user clicks on a button:

使用动态导入时，可以将import关键字作为一个函数调用，该函数返回一个promise。 以下是用户单击按钮时如何动态导入模块的示例：

Promise.allSettled() (Promise.allSettled())

This method returns a promise that resolves after all of the given promises are either fulfilled or rejected. It is typically used where asynchronous tasks do not depend upon one another to complete successfully, as illustrated in the following example:

此方法返回一个承诺，该承诺在所有给定的诺言都实现或拒绝后解析。 它通常用于异步任务彼此不依赖而成功完成的地方，如以下示例所示：

空位合并运算符 (Nullish Coalescing Operator)

The syntax for this operator is

该运算符的语法是

let student = {}
let name = student.name ?? ‘John’

This operator will return a Right Hand Side operand when the Left Hand Side operand is either undefined or null. In the example above, the operator will set the value of name as ‘John’ as student.name is undefined.

当左侧操作数未定义或为null时，此运算符将返回右侧操作数。 在上面的示例中，操作员将name的值设置为“ John”，因为Student.name未定义。

At first glance this looks exactly the same as a logical OR operator ( || ), however, logical OR operator Right Hand Side operand when Left Hand Side Operand is false (undefined, null, “”, 0, false, NaN). Below is the comparison of both operators:

乍一看，它看起来与逻辑或运算符(||)完全相同，但是，当左手操作数为false(未定义，null，“，”，0，false，NaN)时，逻辑或运算符“ Right Hand Side”操作数。 下面是两个运算符的比较：

Chaining Nullish Coalescing Operator ( ?? ) with AND ( && ) or OR ( || ) operators

用AND(&&)或OR(||)运算符链接Nullish合并运算符(??)

It’s not possible to chain AND ( && ) and OR ( || ) operators directly with ?? operator. If you need to combine them, then you must wrap && or || operator in the parenthesis

不能直接将AND(&&)和OR(||)运算符与??链接在一起。 操作员。 如果需要将它们合并，则必须将&&或||包装起来 圆括号中的运算符

结论 (Conclusion)

The introduction of ES2020’s new features add even more flexibility and power to the constantly evolving JavaScript. This article explored some of my favorite features but there are a number of others that I’d suggest you look into to see what might suit you best. I hope you found this article useful and that you are as excited as I am about using these features!

ES2020的新功能的引入为不断发展JavaScript增添了更多的灵活性和功能。 本文探讨了我最喜欢的一些功能，但建议您参考其他一些功能，以找出最适合您的功能。 希望您觉得这篇文章对您有所帮助，并且让我为使用这些功能而感到兴奋！

翻译自: https://codeburst.io/javascript-es2020-is-here-360a8304b0e6

es javascript