在前端发展的过程中，ECMAScript 2018（也称 ES9）是前端端开发人员应该关注的最新版本。它在 2018 年 6 月底发布，其中包含了一些很有用的、具有前瞻性的特性。在本文中，我们将讨论 ES9 中的五项新特性，并提供一些实际的代码示例。
1. 异步迭代（Asynchronous iteration）
异步迭代是新特性中最受欢迎的之一，它在遍历异步数据时提供了一种更加优雅、清晰的方式。在 ES9 中，我们使用 for-await-of 循环来遍历符合异步迭代协议的对象。例如：
----- -------- --------------- -
----- ------------------- - ------------------------- ------
----- ------------- - --------------------------------------------
----------------- ---------------------- -- - ------ ---- ----- ----- -
----------------- ---------------------- -- - ------ ---- ----- ----- -
----------------- ---------------------- -- - ------ ---------- ----- ---- -
-
----- --------- ----------------------------- -
--- ------ ------- -- --------- -
----- --- --------------- -- -
------------- -- -
-----------------
-- ------
---
-
-在上面的示例中，我们定义了一个异步迭代的生成器，将每个元素包装在 Promise 中，并在生成器返回该元素之前等待 1 秒钟。然后，我们使用 for-await-of 循环遍历异步迭代器，并打印每个元素的值。
2. 为 Promise 添加 finally() 方法
ES9 为 Promise 对象添加了一个 finally() 方法。该方法接收一个回调函数，无论 Promise 对象的状态如何，都会被调用。这使我们能够在 Promise 成功或失败后执行清理代码，例如关闭文件或释放资源。
----- -------- ------------------ -
--- -
-------------------- -----------
------ -----------
- ----- ------- -
-------------------- -----------
----- ------
- ------- -
-------------------- ------- ---------
-
-
------------------------------ -- -------------------------------- -- --------------------
-- -------
-- ------- --------
-- ------- ------- ------
-- --------在上面的示例中，我们定义了一个异步任务，在 try 块中打印消息并返回特定的字符串。在 finally 中，我们打印另一条消息。当 Promise 成功解析时，catch 不会被调用，但 finally 仍然会被调用。同样地，当 Promise 失败时，finally 也会被调用。
3. 使用扩展运算符和剩余参数重构参数列表
ES9 允许我们在函数参数列表中使用扩展运算符和剩余参数。这使我们能够更加简单地处理函数参数，例如将一个函数的所有参数传递给另一个函数。
-------- ---------------------- - ------ ------------------ -- -- - - --- - ------------------------- -- ---- -- - -------- ----------------- -- -- - -------------- -- --- - ----- ------- - --- -- --- --------------------------- -- - - -
在上面的示例中，我们定义了一个函数 addNumbers，它接收可变数量的参数并在所有参数上进行求和。我们还定义了一个将三个参数显示在控制台上的函数displayNumbers，然后在集合上使用扩展运算符调用该函数。
4. 使用 rest 属性进行对象解构赋值
ES9 引入了一种新的对象解构赋值语法，它使用 rest 属性（...）来将对象的其余属性赋值给一个变量。
----- ------ - -
---------- -------
--------- ------
---- ---
-------- -
------- ---- ---- ----
----- ----------
------ -----
-
--
----- - ---------- --------- ------- - - -------
---------------------- --------- ------
-- ------- ---- --- - ---- --- -------- - ------- ---- ---- ---- ----- ---------- ------ ----- - -在上面的示例中，我们定义了一个对象 person，它具有 firstName、lastName、age 和 address 属性。使用对象解构赋值时，我们使用 rest 属性将剩余属性分配给变量 rest。
5. Object.fromEntries() 将键值对数组转换为对象
Object.fromEntries() 方法允许我们将数组中的键值对转换为对象。这非常方便，我们可以在对象和数组之间轻松转换数据。
----- ------------ - -
------------- --------
------------ -------
------- ----
----------- -
------- ---- ---- ----
----- ----------
------ -----
--
--
----- ------ - ---------------------------------
--------------------
-- ------- - ---------- ------- --------- ------ ---- --- -------- - ------- ---- ---- ---- ----- ---------- ------ ----- - -在上面的示例中，我们定义一个数组 entriesArray，包含键值对数组，然后使用 Object.fromEntries() 方法将该数组转换为对象，并将其分配给 person 变量。
结论
上面概述的是 ES9 的五个新特性，这些特性将帮助我们开发更具有前瞻性、可靠和高效的前端应用程序。了解这些特性并使用它们将有助于我们提高编写代码的效率并从前端发展的最新趋势中受益。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/671f2a142e7021665efc08ee