在 ECMAScript 2019 中，新增了一个循环语句：for...await...of。这个循环语句可以用于遍历异步迭代器（async iterators），让我们的异步编程更加方便。
异步迭代器
在介绍 for...await...of 循环语句之前，我们需要先了解一下异步迭代器。
异步迭代器是一种实现了 Symbol.asyncIterator 方法的对象。这个方法返回一个异步迭代器对象。异步迭代器对象具有 next() 方法，这个方法返回一个 Promise，Promise 的结果是一个包含 value 和 done 两个属性的对象。其中，value 表示当前迭代的值，done 表示迭代是否结束。
下面是一个简单的异步迭代器示例：
-- -------------------- ---- -------
----- ------------- - -
------------------------ -
--- - - --
------ -
----- ------ -
-- -- - -- -
------ - ------ ---- ----- ----- --
-
------ - ----- ---- --
-
--
-
--
------ ---------- -
--- ----- ------ --- -- -------------- -
-----------------
-
-----在这个示例中，我们定义了一个异步迭代器 asyncIterable，它会依次返回 0、1、2 三个数字。然后我们使用 for await...of 循环语句遍历这个异步迭代器，输出每个数字。
for...await...of 循环语句
有了异步迭代器的基础，我们就可以介绍 for...await...of 循环语句了。
for...await...of 循环语句的语法和 for...of 循环语句类似，只不过它用于遍历异步迭代器。它的语法如下：
for await (const value of asyncIterable) {
// ...
}在这个循环语句中，asyncIterable 是一个异步迭代器，value 是当前迭代的值。for await...of 循环语句会自动调用异步迭代器的 next() 方法，等待 Promise 结束后才会进行下一次循环。
下面是一个使用 for...await...of 循环语句的示例代码：
async function fetchUsers(userIds) {
const results = [];
for await (const userId of userIds) {
const userData = await fetch(`/users/${userId}`);
results.push(userData);
}
return results;
}在这个示例中，我们定义了一个异步函数 fetchUsers，它接收一个用户 ID 的数组 userIds，然后使用 for...await...of 循环语句遍历这个数组，依次获取每个用户的数据。由于获取用户数据是异步的，所以我们需要使用 await 关键字等待 Promise 结束后才能进行下一次循环。
总结
for...await...of 循环语句是 ECMAScript 2019 中新增的一个循环语句，它可以用于遍历异步迭代器，让我们的异步编程更加方便。使用 for...await...of 循环语句，我们可以避免回调地狱，让异步编程变得更加清晰和可读。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65f28cca2b3ccec22fb1f6e7