Javascript 简明教程

JavaScript - ECMAScript 2020

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

Features Added in ECMAScript 2020

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

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

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

BigInt Primitive DataType

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

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

Example

在下面的代码中，我们定义了 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

The Nullish Coalescing Operator (??)

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

Example

在下面的代码中，空值合并运算符的左操作数是 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() Method

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

Example

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

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

<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() 方法匹配特定字符串子字符串的所有出现。它将字符串或正则表达式作为参数。

Example

在下面的代码中，我们使用 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

The Optional Chaining Operator (?.)

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

Example

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

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

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