在JavaScript中，异步编程是不可避免的，因为它允许程序在执行耗时操作时不会被阻塞。通常我们使用 Promise 或 async/await 来编写异步代码，但在ES11(也称为ES2020)中，已经添加了一种新的遍历异步生成器的方法：for await...of 循环。
ES11 的 for await...of 循环允许我们在异步可迭代对象上进行一系列操作，这是一项非常有用的功能，特别是对于处理大量数据的情况下，for await...of 循环可以使代码保持简洁易读。
异步生成器
在了解 for await...of 循环之前，我们需要先了解异步生成器的概念。异步生成器是一种生成器，它可以异步生成值。
异步生成器使用 async function* 关键字定义，与普通生成器的声明方式相似。异步生成器会自动把返回的值进行 Promise 处理，从而避免因为异步操作而导致程序不能正常运行的问题。
下面是一个简单的异步生成器示例，在控制台中打印数字 0 到 4。
-- -------------------- ---- ------- ----- --------- ----------- - --- ---- - - -- - - -- ---- - ----- --- ----------- -- --------------- ------- ----- -- - - ------ -- -- - --- ----- ---- --- -- ------------ - ----------------- - -----展开代码
在这个异步生成器中，我们使用了 await 关键字来等待一个 Promise 对象完成，然后再执行下一步骤。生成器中的 yield 语句将返回一个值并暂停执行。在上面的例子中，我们在每个值之间停顿了一秒钟，以模拟异步操作。
for await...of 循环
for await...of 循环是一个新的语法结构，它允许我们在异步可迭代对象（如异步生成器）上进行操作。for...of 循环只能用于同步迭代器，而 for await...of 循环则专门用于异步迭代器。
for await...of 循环的语法结构与 for...of 循环的语法结构非常相似，只是前者使用 await 关键字来等待每个值的到来，从而避免代码阻塞。
下面是一个使用 for await...of 循环遍历异步生成器的例子，我们使用过程同上：
-- -------------------- ---- ------- ----- --------- ----------- - --- ---- - - -- - - -- ---- - ----- --- ----------- -- --------------- ------- ----- -- - - ------ -- -- - --- ----- ---- --- -- ------------ - ----------------- - -----展开代码
这段代码与前面的代码完全一样，只不过我们使用了 for await...of 循环来遍历异步生成器。
for await...of vs. for...of
在某些情况下，使用 for...of 循环可以与 for await...of 循环类比。for...of 循环用于同步的迭代器，它会按顺序遍历给定的对象。而 for await...of 循环则用于异步迭代器，它会等待迭代器返回值，从而避免代码阻塞。
在下面的示例中，我们会发现：for...of 循环未按顺序打印数组元素，因为其值被同时返回。而 for await...of 循环按顺序打印 Promise 的解析值。
-- -------------------- ---- ------- --- --- - - ------------------- ------------------- ------------------ -- -- -------- -------------- --- ------ ----- -- ---- - -------------- -- - ----------------- --- - -- --- ---------- ------ ------ -- -- - --- ----- ------ --- -- ---- - ----------------- ----- - -----展开代码
总结
ES11 的 for await...of 循环为异步编程带来了新的方法。它允许我们直接在异步可迭代对象（如异步生成器）上进行遍历，避免了代码阻塞等问题。使用 for await...of 循环可以使异步代码更加清晰优雅，特别是在处理大量数据时。
值得一提的是，在使用 for await...of 循环时我们还需要注意：异步可迭代对象必须是实现了 Symbol.asyncIterator 方法的对象，否则遍历操作将无法进行。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64716ef1968c7c53b0f4cac7
