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('[email protected]')[0]:  </div>
   <script>
      const lookBeind = /(?<=@)\w+/;
      document.getElementById("output").innerHTML += 
	  lookBeind.exec('[email protected]')[0]; // Prints domain
   </script>
</body>
</html>

输出

lookBeind.exec('[email protected]')[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}

打印页面