JavaScript - ECMAScript 2018 的新增功能特性

JavaScript 的 ECMAScript 2018 版本于 2018 年发布。ECMAScript 2017 对该语言进行了重大增强。此版本引入了两个重要特性:异步迭代(用于改进异步操作的处理)和 promise finally()(用于无论 Promise 是否解析都执行代码)。本章将讨论 ECMAScript 2018 中的所有新增功能。

ECMAScript 2018 中的新增功能

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

• 异步迭代
• RegExp() 对象的新增功能
• Promise.finally()
• Rest 对象属性

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

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");
      // 生成器函数
      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 字符。您需要在大括号中后跟 '\p' 来表示 Unicode 字符。

示例

在下面的代码中，我们使用正则表达式通过 Unicode 属性访问来检查 tet 是否包含该字母。

<html>
<body>
   <div id = "output1">regex.test('Y'):  </div>
   <div id = "output2">regex.test('6'):  </div>
   <script>
      const regex = /\p{Letter}/u; // 仅匹配字母
      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

命名捕获组

您可以为正则表达式的每个组指定一个唯一的名称。组名可以轻松地从字符串中提取模式。

示例

在下面的代码中，我们定义了用于匹配日期模式的正则表达式。此外，我们还命名了组的年、月、日。

之后，我们使用组名从日期中提取年份。

<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 标志。

在输出中，您可以看到"."字符也与' '。

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

输出

strRegex.test('Hello
programmers'): 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 对象属性

你可以在解构对象时使用展开运算符。展开运算符允许你将 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}