javascript - 使用 for 循环与 .map 构建数组

Question

我想创建一个异步函数数组，但我不明白为什么它适用于 map 而不适用于 for 循环。在这种情况下，有人可以解释 for 循环和 map 之间的区别吗？

async function sleep(ms) {
  await new Promise((r) => setTimeout(r, ms));
}

async function logic(i) {
  let time = i * 500;
  await sleep(time);
  console.log(`${i} finished after ${time}`);
  return time;
}

function exampleConstructResultsViaMap(data) {
    const tasks = data.map((date, i) => {
      const task = async() => logic(i);
      return task;
    });
  return tasks;
}

function exampleConstructResultsViaFor(data) {
  const tasks = [];
  let i = 0;
  for (const date of data) {
    const task = async() => logic(i);
    tasks.push(task);
    i++;
  }
  return tasks;
}

(async() => {
  const data = ['a', 'b'];

  const tasksMap = exampleConstructResultsViaMap(data);
  const resultsMap = await Promise.all(tasksMap.map((p) => p()));
  console.log(resultsMap); // [0, 500]

  const tasksFor = exampleConstructResultsViaFor(data);
  const resultsFor = await Promise.all(tasksFor.map((p) => p()));
  console.log(resultsFor); // [1000, 1000]
})();

Answer 1

当您在 exampleConstructResultsViaFor 中调用 logic(i) 时，循环已经完成，i 等于 2。

您可以做的是使用一个简单的 for 循环和 block 范围的 let :

function exampleConstructResultsViaFor(data) {
  const tasks = [];
  for (let i = 0; i < data.length; i++) {
    const task = async() => logic(i);
    tasks.push(task);
  }
  return tasks;
}

或者创建一个闭包:

const task = ((j) => async() => logic(j))(i);