概述
ECMAScript 2018 增加了异步迭代器（Async Iterator）和 for-await 语句，这为我们处理异步任务带来了很大的便利。本文将介绍这些新功能的使用方法和示例代码，希望能为前端开发者开拓思路，提高编程效率。
异步迭代器
在传统的同步迭代器中，我们可以通过 for-of 循环来遍历一个迭代器。比如：
const iterable = [1, 2, 3];
for (const value of iterable) {
console.log(value);
}然而，在异步任务中，我们无法简单地使用 for-of 循环来遍历一个迭代器。因此，ECMAScript 2018 增加了异步迭代器的概念。
异步迭代器是一种实现了 [Symbol.asyncIterator] 接口的对象。这个接口包含了一个 next 方法，其返回值是一个 Promise 对象，用于获取迭代器的下一个值。
我们可以通过下面的代码来使用一个异步迭代器：
-- -------------------- ---- -------
----- -------- -------------------- -
----- ------------- - ---------------------------------
----- ------ -
----- - ----- ----- - - ----- ---------------------
-- ------ -
------
-
-------------------
-
-
----- ------------- - -
----- ------------------------- -
----- -------------------
----- -------------------
----- -------------------
-
--
--------------------------
-- ---
-- -
-- -
-- -这个例子中，我们先通过 [Symbol.asyncIterator] 方法获取了一个异步迭代器，然后使用 while 循环来遍历这个迭代器，在每次循环中通过 await 操作符来获取迭代器下一个值。
值得注意的是，异步迭代器可以使用 async 或 async* 定义。在这个例子中，我们使用了 async* 定义一个异步生成器（Async Generator），这个生成器返回的是 Promise 对象。
for-await 语句
for-await 语句是 ECMAScript 2018 引入的一个语法结构，用于处理异步任务。它可以轻松地遍历异步迭代器，并在每次迭代中通过 await 操作符来获取异步结果。for-await 语句的语法形式如下：
for await (const variable of asyncIterable) {
// ...
}我们可以通过下面的代码来使用 for-await 语句：
-- -------------------- ---- -------
----- -------- -------------------- -
--- ----- ------ ----- -- --------- -
-------------------
-
-
----- ------------- - -
----- ------------------------- -
----- -------------------
----- -------------------
----- -------------------
-
--
--------------------------
-- ---
-- -
-- -
-- -这个例子中，我们通过 for-await 语句来遍历异步迭代器 asyncIterable，同时在每次迭代中通过 const value of iterable 获取迭代器的值。
案例分析
为了更好地理解异步迭代器和 for-await 语句的用法，我们来看一个案例：
假如我们需要从网络上获取一个长度为 10 的数组，然后计算这个数组中每个元素的平方，最终返回平方和。这个任务可以使用异步操作来实现，并且我们可以使用异步迭代器和 for-await 语句来简化代码。
我们可以使用下面的代码来实现这个功能：
-- -------------------- ---- -------
----- -------- ---------------- -
-- ----------
----- --- --------------- -- ------------------- ------
------ ------
-
----- ------------- - -
----- ------------------------- -
--- ---- - - -- - - --- ---- -
----- -------------
-
-
--
------ ---------- -
--- --- - --
--- ----- ------ ---- -- -------------- -
--- -- ---- - -----
-
-----------------
-----
-- ------在这个例子中，我们首先定义了一个 fetchItem 函数，用于模拟从网络上获取元素的过程。接着，我们使用异步迭代器来创建一个长度为 10 的数组，其中的元素是通过 fetchItem 函数获取的。最后，我们使用 for-await 语句遍历这个数组，计算每个元素的平方并保存到 sum 变量中，最终输出平方和。
总结
ECMAScript 2018 引入了异步迭代器和 for-await 语句，这为我们处理异步任务带来了很大的便利。通过使用异步迭代器和 for-await 语句，我们可以轻松地遍历异步任务的结果，并在每次迭代中获取最新的异步结果。
因此，在实现异步任务的过程中，我们应该优先使用异步迭代器和 for-await 语句，以提高代码的可读性和执行效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647c47a5968c7c53b0762a3f