JavaScript - ECMAScript 2018

JavaScript 的 ECMAScript 2018 版本於 2018 年釋出。ECMAScript 2017 對語言進行了重大增強。此版本引入的兩個重要特性是用於改進非同步操作處理的 非同步迭代，以及用於無論 Promise 解析結果如何都執行程式碼的 Promise finally()。本章將討論 ECMAScript 2018 中新增的所有新功能。

ECMAScript 2018 中新增的功能

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

非同步迭代
RegExp() 物件的新功能
Promise.finally()
剩餘物件屬性

這裡，我們詳細解釋了每個功能。

JavaScript 非同步迭代

您還可以將 'await' 關鍵字與 for 迴圈一起使用以進行非同步迭代。

例如，您正在迭代多個 Promise，並且在每次迭代中，您都需要停止程式碼執行，直到當前 Promise 被解析或拒絕。

示例

在下面的程式碼中，我們定義了一個名為 gen_function 的非同步生成器函式。gen_func() 函式使用迴圈進行 5 次迭代。在每次迭代中，它等待解析 Promise 並返回 p。

在 test() 函式中，我們使用 for 迴圈中的 'await' 關鍵字進行非同步迭代。它每 0.5 秒更新一次輸出。

<html>
<body>
   <div id = "demo"> </div>
   <script>
      const output = document.getElementById("demo");
      // Generator function
      async function* gen_function() {
         for (let p = 0; p < 5; p++) {
            await new Promise(res => setTimeout(res, 500));
            yield p;
         }
      }
      async function test() {
         for await (const ele of gen_function()) {
            output.innerHTML += "Returned element is: " + ele + "<br>";
         }
      }
      test();
   </script>
</body>
</html>

輸出

Returned element is: 0
Returned element is: 1
Returned element is: 2
Returned element is: 3
Returned element is: 4

RegExp() 物件的新功能

在 ECMAScript 2018 中，引入了以下四個新的正則表示式功能：

Unicode 屬性轉義 (\p{...})
後向斷言 (?<= ) 和 (?<! )
命名捕獲組
s (dotAll) 標誌

Unicode 屬性轉義 (\p{...})

Unicode 屬性轉義允許您轉義 Unicode 字元。您需要在花括號中表示 Unicode，然後是 '\p'。

示例

在下面的程式碼中，我們使用正則表示式來檢查文字是否包含使用 Unicode 屬性訪問的字母。

<html>
<body>
   <div id = "output1">regex.test('Y'):  </div>
   <div id = "output2">regex.test('6'):  </div>
   <script>
      const regex = /\p{Letter}/u; // To Match letters only
      document.getElementById("output1").innerHTML += regex.test('Y'); // true
      document.getElementById("output2").innerHTML += regex.test('6'); // false
   </script>
</body>
</html>

輸出

regex.test('Y'): true
regex.test('6'): false

後向斷言 (?<= ) 和 (?<! )

後向斷言允許您查詢特定子模式後跟特定子模式。正向後向斷言等於 ?<=，負向後向斷言等於 ?<!。

示例

在下面的程式碼中，我們正在使用後向斷言查詢 '@' 之後的單詞。它查詢 '@' 模式之後的單詞。

<html>
<body>
   <div id = "output">lookBeind.exec('abcd@domain.com')[0]:  </div>
   <script>
      const lookBeind = /(?<=@)\w+/;
      document.getElementById("output").innerHTML += 
	  lookBeind.exec('abcd@tutorialspoint.com')[0]; // Prints domain
   </script>
</body>
</html>

輸出

lookBeind.exec('abcd@domain.com')[0]: tutorialspoint

命名捕獲組

您可以為正則表示式的每個組指定一個唯一名稱。組名使從字串中提取模式變得容易。

示例

在下面的程式碼中，我們定義了一個正則表示式來匹配日期模式。此外，我們還命名了組“year”、“month”和“day”。

之後，我們使用組名從日期中提取了年份。

<html>
<body>
   <div id = "output">The year of the date is: </div>
   <script>
      const datePattern = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/;
      const match = datePattern.exec('2023-08-22');
      document.getElementById("output").innerHTML += match.groups.year;
   </script>
</body
</html>

輸出

The year of the date is: 2023

s (dotAll) 標誌

在正則表示式中，'.'（點）字元匹配除換行符之外的任何字元。如果您也希望使用 '.' 字元匹配換行符，則需要使用 '/s' 標誌，如下面的示例所示。

示例

在下面的程式碼中，我們在正則表示式模式中添加了 '.' 字元以匹配任何字元，並且還添加了 \s 標誌。

在輸出中，您可以看到 '.' 字元也與 '\n' 匹配。

<html>
<body>
   <div id = "output">strRegex.test('Hello\nprogrammers'):  </div>
   <script>
      const strRegex = /Hello.programmers/s;
      document.getElementById("output").innerHTML += 
	  strRegex.test('Hello\nprogrammers');
   </script>
</body>
</html>

輸出

strRegex.test('Hello\nprogrammers'): true

JavaScript Promise finally()

您可以將 finally() 塊與 Promise 一起使用，以在 Promise 被解決或拒絕後執行特定的程式碼。它類似於 try...catch...finally 塊。

示例

在下面的示例中，我們建立了 Promise 並將其儲存在 getData 變數中。Promise 在 1000 毫秒後被解決。

之後，我們使用 'then...finally' 塊來執行 Promise。在輸出中，您可以觀察到 'finally' 塊的程式碼始終會被執行。

<html>
<body>
   <div id = "output"> </div>
   <script>
      const getData = new Promise((res, rej) => {
         setTimeout(() => {
            res("Promise resolved!");
         }, 1000);
      });
      getData
         .then(result => {
            document.getElementById("output").innerHTML += result + "<br>";
         })
         .finally(() => {
            document.getElementById("output").innerHTML += "In the finally block!";
         });
   </script>
</body>
</html>

輸出

Promise resolved!
In the finally block!

JavaScript Rest 物件屬性

您可以在解構物件時使用擴充套件運算子。擴充套件運算子允許您將剩餘的屬性收集到物件格式的單個變數中。

示例

在下面的示例中，numbers 物件包含 4 個屬性。在解構時，我們獲取 num1 屬性的值，並使用擴充套件運算子將其他屬性儲存在 nums 變數中。

<html>
<body>
   <div id = "output"> </div>
   <script>
      const numbers = {
         num1: 40,
         num2: 50,
         num3: 80,
         num4: 90,
      }
      const { num1, ...nums } = numbers;
      document.getElementById("output").innerHTML = 
	  "num1 = " + num1 + "<br>" + 
      "nums = " + JSON.stringify(nums);
    </script>
</body>
</html>

輸出

num1 = 40
nums = {"num2":50,"num3":80,"num4":90}

列印頁面