'for of' 和 'for await of' 之间的区别

Question

下面是一个计时器函数

const timer = (time) => {
  return new Promise((resolve, reject) => {
    console.log(`${time} timer start`);
    setTimeout(() => {
      console.log(`${time} timer end`);
      resolve();
    }, time);
  });
};

我将使用'for await of'和'for of'来调用此计时器函数。

首先，'for await of'

async function runForAwaitOf() {
  const times = [300, 100, 700, 500];

  for await (let time of times) {
      await timer(time);
  }

  console.log('All the timers end');
}
runForAwaitOf()

第二，'for of'

async function runForOf() {
  const times = [300, 100, 700, 500];

  for (let time of times) {
      await timer(time);
  }

  console.log('All the timers end');
}
runForOf()

当我运行上述代码时，我没有看到它们之间的任何差异。

如果它们的结果是相同的，为什么ECMA会使用"for await of"呢？

- jspking

---

for...await of 是关于处理异步迭代器，而不仅仅是处理 Promise 可迭代对象。 - VLAZ

MDN解释了JavaScript中for-await...of语句与普通for...of语句的区别，只需查找描述中的差异列表即可。 - Challe

相关：for await of VS Promise.all | 使用 for await...of 处理同步可迭代对象 - VLAZ

@VLAZ，我甚至会将其关闭为重复项，你是否不同意？ - Bergi

@Bergi 我不会反驳。 - VLAZ

Answer 1

for await 可用于消费 异步可迭代对象。它也可以消费标准可迭代对象（例如您问题中的那个）- 但对于标准可迭代对象，使用它不会有任何不同，与使用 for..of 相同。

下面是一个可能有用的异步可迭代对象的示例:

const delay = ms => new Promise(res => setTimeout(res, ms));
async function* multiTimer() {
  await delay(1000);
  yield 1;
  await delay(2000);
  yield 2;
  await delay(3000);
  yield 3;
  await delay(1000);
  yield 4;
};
(async () => {
  for await (const time of multiTimer()) {
      console.log('got', time);
  }
  console.log('All the timers end');
})();

如果你有一个标准的可迭代对象，应该使用 for..of ，如果你有一个异步可迭代对象，则应该使用 for await..of。它们是为不同的情况而设计的。

- CertainPerformance