为什么最后两个函数有效,但不是第一个？

Question

我有三个不同的函数应该做同样的事情 - 使用已解析的Promises填充数组,但它不适用于第一个示例.

这是我的代码:

(async() => {
  const items = [];
  const someFn = async() => {
    const v = await Promise.resolve(10);
    items.push(Math.random());
    return Promise.resolve(v * 10);
  }
  const arr = [];
  for (let i = 0; i < 10; i++) {
    arr.push(someFn);
  }
  await Promise.all(arr);
  console.log("item 1", items);
})();

(async() => {
  const items = [];
  const someFn = async() => {
    const v = await Promise.resolve(10);
    items.push(Math.random());
    return Promise.resolve(v * 10);
  }
  const arr = [...Array(10).keys()].map(someFn)
  await Promise.all(arr);
  console.log("items 2", items);
})();

(async() => {
  const items = [];
  const someFn = async() => {
    const v = await Promise.resolve(10);
    items.push(Math.random());
    return Promise.resolve(v * 10);
  }
  for (let i = 0; i < 10; i++) {
    await someFn();
  }
  console.log("items 3", items);
})()

这是输出:

item 1 []

items 2 [ 0.7450904427103939,
  0.37106667256699555,
  0.12035280341441346,
  0.265221052932904,
  0.7775494303685422,
  0.4872532010723445,
  0.6497680191919464,
  0.2570485072009576,
  0.5613137531648884,
  0.95109416178435 ]

items 3 [ 0.25328649499657585,
  0.5452758396760038,
  0.7274346878509064,
  0.9306670111476503,
  0.22942578229725785,
  0.32547900377461625,
  0.9722902638678983,
  0.9964743517593542,
  0.2828162584401659,
  0.7672256760378469 ]

请注意如何item 1是一个空数组.

Answer 1

那是因为在第一个例子中,someFn从未执行过:

for (let i = 0; i < 10; i++) {
    arr.push(someFn);
}
await Promise.all(arr);

这部分只是将函数推送到arr变量中,它不会运行它们,因此不会创建Promises并且永远不会填充items数组.

另一方面,其他示例运行函数someFn:

const arr = [...Array(10).keys()].map(someFn)

这将arr使用10次执行填充数组someFn(map使用当前值(0-9),索引(也是0-9)和数组本身执行它们).

for (let i = 0; i < 10; i++) {
    await someFn();
}

这显然是someFn在一个循环中运行.

要使第一个示例工作,请将函数的结果推送到数组中:

(async () => {
    const items = [];
    const someFn = async () => {
        const v = await Promise.resolve(10);
        items.push(Math.random());
        return Promise.resolve(v * 10);
    }
    const arr = [];
    for (let i = 0; i < 10; i++) {
        arr.push(someFn()); // <-- () added
    }
    await Promise.all(arr);
    console.log("item 1", items);
})();