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

我有三个不同的函数应该做同样的事情 – 使用已解析的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 ]

注意第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)

这将使用10个执行someFn填充arr数组(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);
})();