Javascript 简明教程

JavaScript - ECMAScript 2020

ECMAScript 2020 版本的 JavaScript 于 2020 年发布。此版本中添加的显著功能包括用于更简洁的默认值分配的空值合并运算符（??）和用于按需加载模块的 dynamic import()。BigInt 提供了一种安全处理非常大的整数的方法。本章将讨论 ECMAScript 2020 中所有新添加的功能。

The ECMAScript 2020 version of JavaScript was released in 2020. Notable features added in this version include the nullish coalescing operator (??) for more concise default value assignment and dynamic import() for on-demand module loading. BigInt provides a way to safely work with very large integers. This chapter will discuss all the newly added features in ECMAScript 2020.

Features Added in ECMAScript 2020

以下是添加到 ECMAScript 2020 版本 JavaScript 的新方法、功能等。

Here are the new methods, features, etc., added to the ECMAScript 2020 version of JavaScript.

  1. BigInt

  2. Promise allSettled()

  3. String matchAll()

  4. The Nullish Coalescing Operator (??)

  5. The Optional Chaining Operator (?.)

这里，我们详细解释了每项特性。

Here, we have explained each feature in detail.

BigInt Primitive DataType

ECMAScript 2020 将 BigInt 引入了基本数据类型。当您需要存储一个大数字时可以使用 BigInt，该数字无法使用 64 位表示法表示。

The ECMAScript 2020 introduced BigInt to the primitive data types. You can use the Big Int when you need to store a large number, which can’t be represented using the 64-bit representation.

若要将数字转换为 BigInt，您可以在数字后跟一个 n。

To convert the number into the Big int, you can write the number followed by n.

Example

在下面的代码中，我们定义了 BigInt 数据类型的数字。

In the below code, we have defined the number of big int data type.

<html>
<body>
   <div id = "output">The number of bigint type is: </div>
   <script>
      const bigNum = 1325461651565143545565n;
      document.getElementById("output").innerHTML += bigNum;
   </script>
</body>
</html>
The number of bigint type is: 1325461651565143545565

The Nullish Coalescing Operator (??)

JavaScript 空值合并运算符在左操作数不是 undefined 或 null 的情况下返回左操作数。否则，它返回右操作数。用于为变量设置默认值。

The JavaScript Nullish Coalescing operator returns the left operand if it is not undefined or null. Otherwise, it returns the right operand. It is used to set default values to the variables.

Example

在下面的代码中，空值合并运算符的左操作数是 undefined。因此，它返回右操作数的值。

In the below code, the left operand for the nullish coalescing operator is undefined. So, it returns the value of the right operand.

<html>
<body>
   <div id = "output">The value of the str is: </div>
   <script>
      let str = undefined ?? "Hello";
      document.getElementById("output").innerHTML += str;
   </script>
</body>
</html>
The value of the str is: Hello

Promise allSettled() Method

Promise.allSettled() 方法在所有 Promise 都得到满足后返回所有 Promise 的状态。

The Promise.allSettled() method returns the status of all promises once all promises get fulfilled.

Example

在下面的代码中，我们定义了 Promise 数组。

In the code below, we have defined the array of promises.

完成所有承诺后，我们使用了 promise.allSettled() 方法。在输出中，您可以看到方法返回一个对象数组，表示每个承诺的状态和结果。

After that, we used the promise.allSettled() method to fulfill all promises. In the output, you can see that method returns the array of objects, representing the status and result of each promise.

<html>
<body>
   <div id = "output"> </div>
   <script>
      const promises = [
         Promise.resolve("Hello"),
         Promise.reject("Error message"),
         Promise.resolve(21342)
      ];
      Promise.allSettled(promises)
         .then(results => {
            document.getElementById("output").innerHTML += JSON.stringify(results);
         });
   </script>
</body>
</html>
[{"status":"fulfilled","value":"Hello"},{"status":"rejected","reason":"Error message"},{"status":"fulfilled","value":21342}]

The String matchAll() Method

String matchAll() 方法匹配特定字符串子字符串的所有出现。它将字符串或正则表达式作为参数。

The string matchAll() method matches all occurrences of the particular string substring. It takes the string or regular expression as a parameter.

Example

在下面的代码中，我们使用 String.matchAll() 方法匹配 str 字符串中的‘abcd’子字符串。该方法返回所有匹配项的迭代器。

In the below code, we used the String.matchAll() method to match the ‘abcd’ substring in the str string. The method returns an iterator of all matching occurrences.

<html>
<body>
   <div id = "output">The matching results are: <br></div>
   <script>
      let str = "Abcd abcd abcd";
      let matches = str.matchAll('abcd');
      for (let x of matches) {
         document.getElementById("output").innerHTML += x + "<br>"
      }
   </script>
</body>
</html>
The matching results are:
abcd
abcd

The Optional Chaining Operator (?.)

可选链接运算符用于访问嵌套的对象属性。如果任何嵌套对象是未定义的，则返回未定义而不是引发错误。

The Optional chaining operator is used to access the nested object properties. If any nested object is undefined, it returns undefined rather than throwing an error.

Example

在下面的代码中，obj 对象包含嵌套对象 obj1，其中包含 name 属性。

In the code below, the obj object contians the obj1 nested object, containing the name property.

我们尝试使用可选链接运算符访问 obj2 对象的 name 属性。此处未定义 Obj2，因此它返回未定义而不是引发错误。

We try to access the obj2 object’s name property with an optional chaining operator. Obj2 is not defined here, so it returns the undefined rather than throwing an error.

<html>
<body>
   <div id = "output">The name of obj2 is: </div>
   <script>
      let obj = {
         obj1: {
            name: "JavaScript",
         }
      }
      document.getElementById("output").innerHTML += obj?.obj2?.name;
   </script>
</body>
</html>
The name of obj2 is: undefined

警告 - 某些浏览器不支持上述某些功能。所以，你可以使用 polyfill 来避免错误。

Warning – Some of the above features are not supported by some browsers. So, you can use the polyfill to avoid errors.