随着 JavaScript 应用程序越来越依赖于异步编程模型，操作异步数据变得越来越普遍和必要。在 ES9（ECMAScript 2018）中，引入了一个新的特性 for-await 循环，它允许我们轻松地遍历异步数据，并同时处理多个异步操作，使 JS 开发更加简单和高效。
遍历异步数据
遍历异步数据在现代 JavaScript 开发中非常常见，而且为了避免回调地狱和保持代码清晰，我们通常使用 Promise 和 Async/Await。这是一个很好的选择，但是当我们的数据是一个可迭代对象（如数组、字符串或 Map）时，并不是一种理想的选择。
随着 for-await 的引入，我们现在可以使用异步迭代器来遍历类数组对象，以及异步生成器函数（async generators）。
使用异步生成器函数
异步生成器函数是异步函数的一个变体，它可以不间断地向外部生成值，同时在必要的时候挂起和恢复它。它的语法看起来像是生成器函数和 async 函数的组合，比如：
async function* asyncGenerate() {
yield await Promise.resolve(1);
yield await Promise.resolve(2);
yield await Promise.resolve(3);
}在这个例子中，我们可以循环遍历这个异步生成器，并使用 async/await 处理每个值的产生，比如：
async function iterateAsyncData() {
for await (const value of asyncGenerate()) {
console.log(value);
}
}在这种情况下，遍历器会在每次 yield 调用之后暂停，等待 await Promise 完成，然后恢复执行。
异步生成器函数能够异步、惰性地生成数据流，并支持一些有趣的操作，如数据过滤、窗口函数等。
自定义异步迭代器
我们也可以定义自己的异步迭代器来遍历我们需要的数据。通过使用一个 Symbol.asyncIterator 方法和 async next() 方法，我们可以定义我们自己的异步迭代器。下面是一个简单的示例：
// javascriptcn.com 代码示例
class AsyncIterable {
async *[Symbol.asyncIterator]() {
const data = [1,2,3,4,5];
for(let i = 0; i < data.length; i++) {
const delay = Math.floor(Math.random() * 500);
await new Promise(resolve => setTimeout(resolve, delay));
yield data[i];
}
}
}在这个例子中，我们在一个数组中随机生成每个值，然后使用 yield 来返回一个值。我们还在每次 yield 前添加了一个随机值的延时，以模拟异步操作。
现在，我们可以使用 for-await 循环来遍历并处理异步可迭代对象，如下所示：
async function iterateAsyncData() {
for await (const value of new AsyncIterable()) {
console.log(value);
}
}在这种情况下，我们首先创建了 AsyncIterable 对象，使用 for-await 循环来遍历每个值，并使用 console.log 打印出来。
总结
使用 for-await 循环来遍历异步数据是一种简单有效的方式，能够处理异步可迭代对象，以及异步生成器。我们可以定义自己的异步迭代器来提供自定义迭代逻辑，这将为我们带来更高效的代码和更好的异步处理程序。同时，需要注意的是，异步迭代器仅适用于异步操作，不适用于同步操作。
以上是关于 for-await 循环的详细介绍和示例实现。它能为您处理大规模异步数据提供很好的帮助，同时也能让您的代码更加简洁和清晰易懂。在编写异步代码时，我们应始终注意性能和可读性，并学习和应用新的状态管理技术和最佳实践。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/651ec0cc95b1f8cacd66d4ae