在 ECMAScript 2018 中，新增了一个非常强大的循环语法：for await...of 循环。这个循环语法主要用于异步迭代器，可以方便地遍历异步数据集合，是前端开发中非常实用的技术。
什么是异步迭代器？
首先，我们需要了解什么是异步迭代器。在 JavaScript 中，迭代器是一个对象，它提供了一种顺序访问数据集合的方法。在循环中，我们可以使用 for...of 循环来遍历迭代器中的数据。
而异步迭代器则是指在数据集合中存在异步操作的迭代器。例如，我们可以使用异步迭代器来遍历一个异步生成器函数返回的数据集合，或者遍历一个异步的网络请求结果。
for await...of 循环的语法
for await...of 循环的语法与普通的 for...of 循环类似，只是在循环中使用了 async/await 关键字来处理异步操作。具体来说，for await...of 循环的语法如下：
--- ----- ---- ----- -- -------------- - -- --- -
其中，asyncIterable 是一个异步迭代器，value 则是异步迭代器中的每一个值。
for await...of 循环的示例
我们可以通过一个简单的示例来了解 for await...of 循环的使用方法。假设我们有一个异步迭代器 asyncGenerator，它可以异步地从一个数据集合中取出每一个值。我们可以使用 for await...of 循环来遍历 asyncGenerator 中的每一个值，代码如下：
----- -------- ---------------- -
----- -------------------
----- -------------------
----- -------------------
-
----- -------- ------ -
--- ----- ---- ----- -- ----------------- -
-------------------
-
-
------- -- -- -- -- -在这个示例中，我们定义了一个异步迭代器 asyncGenerator，它会异步地返回一个数据集合。在 main 函数中，我们使用 for await...of 循环遍历 asyncGenerator 中的每一个值，并将其输出到控制台上。
for await...of 循环的指导意义
for await...of 循环是一个非常实用的技术，它可以帮助我们方便地处理异步数据集合。在实际开发中，我们经常需要从异步数据源中获取数据，例如从后端服务器获取数据或者从浏览器的 IndexedDB 中读取数据。使用 for await...of 循环，我们可以很方便地遍历这些异步数据集合，并进行相应的操作。
同时，for await...of 循环也可以帮助我们更好地理解异步操作的本质。在 JavaScript 中，异步操作是一种非常重要的编程模式，它可以帮助我们提高程序的性能和响应速度。使用 for await...of 循环，我们可以更加深入地了解异步操作的实现原理，并更好地利用它们来编写高效的程序。
总结
for await...of 循环是 ECMAScript 2018 中新增的一个非常实用的循环语法，它可以帮助我们方便地遍历异步数据集合。在实际开发中，我们可以使用 for await...of 循环来处理异步数据源，例如从后端服务器获取数据或者从浏览器的 IndexedDB 中读取数据。同时，for await...of 循环也可以帮助我们更好地理解异步操作的本质，提高程序的性能和响应速度。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/661269fad10417a222310d3e