JavaScript - ECMAScript 2020 的新增功能特性

JavaScript 的 ECMAScript 2020 版本于 2020 年发布。此版本新增的显著特性包括:空值合并运算符 (??)，用于更简洁的默认值赋值;以及动态 import()，用于按需加载模块。BigInt 提供了一种安全处理超大整数的方法。本章将讨论 ECMAScript 2020 中所有新增的功能。

ECMAScript 2020 新增的功能

以下是 ECMAScript 2020 版 JavaScript 中新增的方法、功能等。

• BigInt
• Promise allSettled()
• String matchAll()
• 空值合并运算符 (??)
• 可选链式运算符 (?.)

这里，我们详细解释了每个功能。

BigInt 原始数据类型

ECMAScript 2020 将 BigInt 引入原始数据类型。当您需要存储无法使用 64 位表示法表示的大数字时，可以使用 Big Int。

要将数字转换为 Big Int，您可以输入数字后跟 n。

示例

在下面的代码中，我们定义了 Big Int 数据类型的数量。

<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

空值合并运算符 (??)

JavaScript 空值合并运算符如果左操作数不为 undefined 或 null，则返回左操作数。否则，返回右操作数。该运算符用于为变量设置默认值。

示例

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

<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() 方法

Promise.allSettled() 方法会在所有 Promise 均已履行后返回其状态。

示例

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

之后，我们使用 promise.allSettled() 方法履行所有 Promise。在输出中，您可以看到该方法返回一个对象数组，表示每个 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}]

String matchAll() 方法

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

示例

在下面的代码中，我们使用 String.matchAll() 方法匹配 str 字符串中的 abcd 子字符串。该方法返回一个包含所有匹配结果的迭代器。

<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

可选链式运算符 (?.)

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

示例

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

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

<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 来避免错误。