javascript - 在外部范围内对变量使用等待内联

Question

(async function iife () {
  const numbers = [1, 2, 3, 4]
  let count = 0
  async function returnNumberAsync (number) {
    return new Promise(resolve => {
      setTimeout(() => resolve(number), 0)
    })
  }
  await Promise.all(numbers.map(async number => {
    count += await returnNumberAsync(number)
  }))
  console.log(count)
})()

此代码段将 4 记录到控制台，这完全超出了我的理解范围。一旦我将 map 中的 promise 值分配给它自己的局部变量……

const result = await returnNumberAsync(number)
count += result;

…它像我期望的那样记录 10。当我 count += await … 时发生了什么？？

Answer 1

当你做 count += await <expression> ，初始值为count要添加到解析值的保存之前 await部分得到解决。所以

count += await returnNumberAsync(number)

就像

count = count + await returnNumberAsync(number)

如你所见:

(async function iife () {
  const numbers = [1, 2, 3, 4]
  let count = 0
  async function returnNumberAsync (number) {
    return new Promise(resolve => {
      setTimeout(() => resolve(number), 0)
    })
  }
  await Promise.all(numbers.map(async number => {
    count = count + await returnNumberAsync(number)
  }))
  console.log(count)
})()

在 4 个闭包中的每一个中，count在 await 之前被视为 0 s 决心，所以只在最后 await微任务，它解析为

count += await returnNumberAsync(4)
// or
count = 0 + await returnNumberAsync(4)
// or
count = 4

是4被分配到 count .其他号码被分配给 count 的事实较早的被忽略。它们确实发生了，但是您在当前代码中看到的只是最终迭代的分配。