在 JavaScript 中，循环遍历是我们经常会用到的一个操作。随着 ECMAScript 的不断更新，新的语言特性也不断被加入其中，从而让我们的代码更加简洁、高效。其中，ECMAScript 2018 中引入的 for-await-of 循环遍历，对于处理异步编程中的迭代器和 generator 相关的操作，拥有着非常好的性能表现。
for-await-of 是什么？
在引入 for-await-of 循环遍历之前，我们经常会用到的是 for...of 这个循环语句，可以用来遍历迭代器对象中的元素。而 for-await-of 就是在异步编程中针对异步迭代器对象所引入的。
for-await-of 的语法结构非常简单，使用时只需要将 for...of 中的 of 改为 await of 即可。例如：
----- -------- --------------- -
--- ----- ------ ---- -- ------ -
------------------
-
-其中，items 是一个异步迭代器，通过使用 for-await-of 循环遍历，获取到每个元素之后，可以用来在控制台打印出每个元素的值。
for-await-of 的优势
使用 for-await-of 的优势是非常明显的，它可以让我们更加方便、高效地处理异步操作。一般来说，我们在处理异步操作时，需要使用回调函数或 Promise 来实现异步操作的并行执行。而对于迭代器对象的操作，则需要使用 generator 去实现。
但是，通过 for-await-of 循环遍历的方式，我们可以在输入输出中使用异步操作，使得代码更加简洁易懂、易于维护。此外，for-await-of 循环遍历也比传统的遍历方式性能更加优秀。
实例分析
下面，我们通过一个触手可及的例子，来感受一下 for-await-of 循环遍历在实际编程中的运用。
首先，我们定义一个异步 Promise 方法，用来获取指定 URL 的内容：
----- -------- --------------- - ----- -------- - ----- ----------- ----- ---- - ----- ---------------- ------ ----- -
这里我们使用了 fetch 方法，用来获取指定 URL 的响应对象，然后将响应内容使用 await 转换为文本格式并返回。
接下来，我们使用 for-await-of 循环遍历方法，对获取到的多个 URL 进行遍历并执行 getContent 操作：
----- -------- ----------------- -
--- ----- ------ --- -- ----- -
----- ------- - ----- ----------------
---------------------
-
-其中，urls 是一个数组，里面包含多个需要获取响应内容的 URL。通过使用 for-await-of 循环遍历方法，我们可以遍历整个数组，并获取每个 URL 的内容。
可以看到，使用 for-await-of 循环遍历使得代码变得十分简洁，而且性能也非常优秀。因此，在日常前端开发中，我们可以合理地使用 for-await-of 循环遍历来简化代码，提高效率和性能。
总结
对于现代化的前端开发来说，异步编程已经成为必不可少的操作之一。与传统的异步编程方式相比，for-await-of 循环遍历具有更加高效、易懂的优势，能够让我们在处理异步操作时更加方便快捷地实现操作。
当然，对于初学者来说，使用 for-await-of 循环遍历还需要一些时间的熟悉和练习。但是，只要通过逐步实践和积累经验，我们就能够在前端开发中更加游刃有余，写出更加高效、简洁、易于维护的代码。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6658264ed3423812e4df9986