JavaScript - ECMAScript 2020

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

ECMAScript 2020 中添加的功能

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

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

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

BigInt 原生数据类型

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

要将数字转换为 Big int，您可以编写数字后跟 n。

示例

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

<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 都 fulfilled 后返回所有 Promise 的状态。

示例

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

之后，我们使用 promise.allSettled() 方法来 fulfilled 所有 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() 方法

字符串 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，则返回 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 来避免错误。

打印页面