在数组(或对象)上迭代异步最聪明/最干净的方法是什么？

在处理数组或对象的异步迭代时，最聪明/最干净的方法通常是使用现代JavaScript中的Promise.all结合Array.prototype.map。这种方法可以并行处理所有的异步操作，并且代码结构清晰。

基础概念

异步迭代：在JavaScript中，异步迭代是指对数组或对象中的每个元素执行一个返回Promise的函数。
Promise.all：接受一个Promise对象的数组作为参数，当这个数组里的所有Promise对象都成功解析后，返回一个新的Promise对象，该对象在解析后的结果是一个数组，包含每个Promise解析的结果。
Array.prototype.map：创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后的返回值。

优势

并行执行：Promise.all允许所有异步操作并行执行，而不是顺序执行，这样可以显著提高性能。
代码简洁：结合map方法，可以使代码更加简洁和易读。

类型

数组异步迭代：对数组中的每个元素执行异步操作。
对象异步迭代：对对象中的每个属性值执行异步操作。

应用场景

数据获取：从多个API端点并行获取数据。
文件处理：并行读取和处理多个文件。
并发请求：同时发送多个HTTP请求。

示例代码

数组异步迭代

async function fetchData(urls) {
  try {
    const promises = urls.map(url => fetch(url));
    const responses = await Promise.all(promises);
    const data = await Promise.all(responses.map(response => response.json()));
    return data;
  } catch (error) {
    console.error('Error fetching data:', error);
  }
}

// 使用示例
const urls = [
  'https://api.example.com/data1',
  'https://api.example.com/data2',
  'https://api.example.com/data3'
];

fetchData(urls).then(data => {
  console.log('Fetched data:', data);
});

对象异步迭代

async function fetchUserData(users) {
  try {
    const promises = Object.keys(users).map(async key => {
      const user = users[key];
      const response = await fetch(`https://api.example.com/user/${user.id}`);
      const userData = await response.json();
      return { key, ...userData };
    });
    const data = await Promise.all(promises);
    return Object.fromEntries(data.map(item => [item.key, item]));
  } catch (error) {
    console.error('Error fetching user data:', error);
  }
}

// 使用示例
const users = {
  1: { id: 1 },
  2: { id: 2 },
  3: { id: 3 }
};

fetchUserData(users).then(data => {
  console.log('Fetched user data:', data);
});