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 來避免錯誤。

列印頁面