笙亿网络策划

ECMAScript 2018 新特性有哪些？JavaScript ES8 怎么用？

约 11 分钟读完 31 阅
文章导读
Previous Quiz Next ECMAScript 2018 版本的 JavaScript 于 2018 年发布。ECMAScript 2017 为语言引入了显著的增强。本版本引入的两个重要特性是用于改进异步操作处理的 asynchronous iteration，
📋 目录
  1. A ECMAScript 2018 中的新增特性
  2. B JavaScript Asynchronous Iteration
  3. C RegExp() 对象的最新特性
  4. D JavaScript Promise finally()
  5. E JavaScript Rest Object Properties
A A

JavaScript - ECMAScript 2018

Previous
Quiz
Next

ECMAScript 2018 版本的 JavaScript 于 2018 年发布。ECMAScript 2017 为语言引入了显著的增强。本版本引入的两个重要特性是用于改进异步操作处理的 asynchronous iteration，以及无论 promise 解析结果如何都会执行代码的 promise finally()。本章将讨论 ECMAScript 2018 中所有新增特性。

ECMAScript 2018 中的新增特性

以下是 ECMAScript 2018 版本的 JavaScript 中新增的方法、特性等。

  • Asynchronous iteration
  • RegExp() 对象的新特性
  • Promise.finally()
  • Rest object properties

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

JavaScript Asynchronous Iteration

您还可以结合 for 循环使用 'await' 关键字来实现异步迭代。

例如，您正在迭代多个 promise，在每次迭代中，需要停止代码执行，直到当前 promise 被解析或拒绝。

示例

在下面的代码中，我们定义了一个名为 gen_function 的 async generator 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 += "返回的元素是: " + 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; // 只匹配字母
      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@example.com')[0]; // 输出 domain
   </script>
</body>
</html>

输出

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

命名捕获组

你可以为正则表达式的每个组赋予一个唯一的名称。组名使得从字符串中提取模式变得更容易。

示例

在下面的代码中，我们定义了匹配日期模式的正则表达式。同时，我们为组命名了 year、month 和 day。

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

<html>
<body>
   <div id = "output">日期的年份是： </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 被 resolve 或 reject 后执行特定代码。它类似于 try...catch...finally 块。

示例

在下面的示例中，我们创建了一个 promise 并将其存储在 getData 变量中。该 promise 在 1000 毫秒后被 resolve。

之后，我们使用 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 Object Properties

在解构对象时，你可以使用 spread operator。spread operator 允许你将剩余属性收集到一个单一变量中，并保持对象格式。

示例

在下面的示例中，numbers 对象包含 4 个属性。在解构时，我们获取 num1 属性的值，并使用 spread operator 将其他属性存储在 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}