在 ECMAScript 2017 (ES7) 中，新加入了一个 for-await-of 循环，用于遍历异步迭代器（async iterators）。在这篇文章中，我们将会详细介绍 for-await-of 循环的使用方法以及其在前端开发中的指导意义。
什么是异步迭代器？
在理解 for-await-of 循环之前，我们需要先了解异步迭代器的概念。异步迭代器是一个对象，它可以返回一个异步迭代器对象（AsyncIterator），这个迭代器对象可以通过 next() 方法来逐个返回 Promise 对象，这个 Promise 对象会在异步操作完成后 resolve 并返回相应的值。
异步迭代器可以通过 Symbol.asyncIterator 属性来定义，例如：
-- -------------------- ---- -------
----- ------------ -
------------------ -
---------- - ------
-
------------------------ -
--- ----- - --
------ -
----- ------ -
-- ------ - ----------- -
----- --- --------------- -- ------------------- -------
------ - ------ -------- ----- ----- --
- ---- -
------ - ----- ---- --
-
-
-
-
-在这个例子中，我们定义了一个 AsyncCounter 类，它可以返回一个异步迭代器对象，该对象可以逐个返回 Promise 对象，每个 Promise 对象在 1 秒钟后 resolve 并返回一个计数值。当计数值达到给定的 limit 值时，迭代器对象将返回 { done: true }。
for-await-of 循环的使用方法
for-await-of 循环可以用于遍历异步迭代器对象，例如：
-- -------------------- ---- -------
----- -------- ------- -
----- ------- - --- ----------------
--- ----- ------ ----- -- -------- -
-------------------
-
--------------------
-
--------在这个例子中，我们使用 for-await-of 循环遍历了 AsyncCounter 类返回的异步迭代器对象，并通过 console.log() 输出了每个计数值。最终输出 done 表示循环结束。
需要注意的是，for-await-of 循环只能用于异步迭代器对象，如果我们试图用它来遍历一个普通的迭代器对象，会抛出 TypeError 错误。
for-await-of 循环的指导意义
for-await-of 循环的出现，使得我们可以更方便地处理异步操作的结果。在前端开发中，我们经常需要进行异步操作，例如发送 Ajax 请求、读取文件等等。使用 for-await-of 循环可以让我们更加优雅地处理这些异步操作的结果。
例如，我们可以通过 for-await-of 循环来读取一个文件夹下的所有文件：
-- -------------------- ---- -------
----- -- - --------------
----- - --------- - - ----------------
----- ------- - ----------------------
----- -------- - -----------------------
----- -------- ----------- -
----- ----- - ----- --------------
--- ----- ------ ---- -- ------ -
----- ------- - ----- ---------------
---------------------
-
-
------------在这个例子中，我们使用 Node.js 的 fs 模块来读取当前文件夹下的所有文件名，然后通过 for-await-of 循环遍历这些文件名，并逐个读取文件内容并打印出来。
总结
在 ES7 中，我们可以使用 for-await-of 循环来遍历异步迭代器对象，这使得我们可以更加方便地处理异步操作的结果。在前端开发中，使用 for-await-of 循环可以让我们更加优雅地处理异步操作，提高代码的可读性和可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65c592a4add4f0e0ff01c15c