在 ECMAScript 2019 标准中，新增了一个语法：for await...of。这个语法可以让我们在异步遍历可迭代对象时更加方便和高效。本篇文章将对 for await...of 的用法进行详细介绍，并附上示例代码。
for await...of 是什么？
for await...of 是一个循环语句，用于遍历异步可迭代对象。它的语法与 for...of 类似，但是它可以在异步可迭代对象上进行遍历，并且可以等待每个值的解析。
如何使用 for await...of？
使用 for await...of 语法的步骤如下：
- 获取一个异步可迭代对象。
- 创建一个 for await...of 循环。
- 在循环体内使用 await 等待每个值的解析。
下面是一个示例代码：
// javascriptcn.com 代码示例
// 创建一个异步可迭代对象
const asyncIterable = {
[Symbol.asyncIterator]() {
let count = 0;
return {
async next() {
if (count < 3) {
await new Promise(resolve => setTimeout(resolve, 1000));
return { value: count++, done: false };
}
return { done: true };
}
};
}
};
// 使用 for await...of 遍历异步可迭代对象
(async function() {
for await (const value of asyncIterable) {
console.log(value);
}
})();在上面的示例代码中，我们首先创建了一个异步可迭代对象 asyncIterable，它的 next 方法返回一个 Promise，每个 Promise 都会等待 1 秒钟，然后返回一个数字。当数字达到 3 时，next 方法会返回 done: true。
在主函数中，我们使用 for await...of 循环遍历异步可迭代对象 asyncIterable。在循环体内，我们使用 await 等待每个值的解析，并将解析后的值打印到控制台上。这样，我们就可以在每个值解析完成后再进行下一次循环，而不是等待所有值都解析完成后再一次性输出。
for await...of 的指导意义
for await...of 语法的出现，使得在异步可迭代对象上进行遍历变得更加方便和高效。在使用 for await...of 时，我们可以避免等待所有值都解析完成后再一次性输出的情况，提高了程序的效率。
同时，for await...of 的使用还可以让我们更好地理解异步编程的本质。在使用 for await...of 时，我们需要等待每个值的解析，这使得我们更加清晰地认识到异步编程中的等待和解析的过程，从而更好地掌握异步编程的思想。
总结
for await...of 是 ECMAScript 2019 中新增的语法，用于遍历异步可迭代对象。使用 for await...of 时，我们可以避免等待所有值都解析完成后再一次性输出的情况，提高了程序的效率。同时，for await...of 的使用还可以让我们更好地理解异步编程的本质。希望本篇文章能够对大家理解和使用 for await...of 有所帮助。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65755c94d2f5e1655de886e3