JavaScript中如何在for await...of循环中获取当前迭代元素及索引

我来帮你搞定这个问题～你现在的困境是，reagentItems.map(objectElement => getPricing(objectElement))生成的是一堆Promise，每个Promise只会返回getPricing的结果，拿不到对应的原objectElement。下面给你几种可行的解决方案：

方案1：修改map的返回值，同时携带原元素 #

你可以在map里用async函数包裹，让每个Promise最终resolve成一个包含原元素和定价结果的对象，这样for await...of循环里就能同时拿到两者：

for await (let { item, pricing } of reagentItems.map(async (objectElement) => {
  const pricingResult = await getPricing(objectElement);
  // 返回包含原元素和结果的对象
  return { item: objectElement, pricing: pricingResult };
})) {
  console.log(item); // 这里就是你要的当前迭代的原元素
  console.log(pricing); // 这是getPricing的返回结果
}

这个方案的优点是保持了原代码的并行发起请求的特性（所有getPricing会同时开始），然后按原数组的顺序逐个处理完成的结果。

方案2：用普通for循环+await（串行执行） #

如果你的场景不需要并行发起所有请求，用普通的for循环会更直观，直接通过索引访问原数组元素：

for (let i = 0; i < reagentItems.length; i++) {
  const objectElement = reagentItems[i];
  const pricing = await getPricing(objectElement);
  console.log(objectElement); // 直接拿到当前元素
  console.log(pricing);
}

注意这个方案是串行执行的，每个getPricing会等前一个完成后才会执行，适合对请求顺序有要求的场景。

方案3：用Promise.all批量处理 #

你提到的Promise.all当然也能解决问题，它会等待所有Promise都完成后，返回一个结果数组，你可以提前把原元素和结果绑定在一起：

// 先批量发起请求，每个Promise返回包含原元素和结果的对象
const allResults = await Promise.all(
  reagentItems.map(async (item) => ({
    item,
    pricing: await getPricing(item)
  }))
);

// 遍历结果数组，直接访问原元素
for (const { item, pricing } of allResults) {
  console.log(item);
  console.log(pricing);
}

这个方案适合需要所有请求都完成后再统一处理的场景，比如需要统计所有结果再渲染页面。

关于是否修改getPricing函数 #

其实完全不需要修改原getPricing函数，上面的所有方案都能在不改动它的前提下拿到原元素。当然如果你希望getPricing本身就返回原元素+结果，也可以修改它，但这样会降低函数的单一职责性，不太推荐。

内容的提问来源于stack exchange，提问作者alexzedim