将Array.forEach执行结果存入另一数组时返回undefined的问题排查

你的代码出现两个关键问题导致返回undefined，同时还有异步循环的处理误区，我来一步步帮你拆解修复：

1. details 函数没有返回值 #

你在forEach的异步回调里写了return files，但这个return只属于回调函数本身，不是details函数的返回值。details函数没有任何顶层return语句，所以默认返回undefined——这就是你拿到undefined的直接原因。

2. forEach 不支持异步/await #

forEach的设计初衷是同步遍历，它会一次性触发所有循环的回调，完全不会等待异步回调执行完成。哪怕你给details加上return，也会在所有异步逻辑跑完前就返回files，导致拿到的是未完成的空数组（或不完整的数组）。

修复后的代码 #

我们需要做两个核心调整：用for...of替代forEach来处理异步循环，同时让details函数正确返回最终的files数组；另外如果需要每次循环存入独立的数组副本（避免后续修改影响所有元素），也要调整arr的创建逻辑：

const iam = ['dd', 'aaa', 'cc']; 

async function bigTest() { 
  async function details() { 
    const files = []; 
    // 用for...of替代forEach，天然支持await等待异步操作完成
    for (const i of iam) {
      // 每次循环创建新的arr，避免files里的所有元素引用同一个数组
      const arr = [];
      arr.push({ name: 'test' });
      files.push(arr);
    }
    // 正确返回files数组给调用方
    return files; 
  } 

  const result = await details(); 
  console.log(result); 
} 

bigTest();

如果你的循环里有实际异步操作（比如API请求） #

如果你的forEach回调里原本有真实的异步逻辑（比如接口调用、文件读取），for...of也能完美支持顺序执行：

const iam = ['dd', 'aaa', 'cc']; 

async function bigTest() { 
  async function details() { 
    const files = []; 
    for (const i of iam) {
      const arr = [];
      // 模拟异步操作，比如实际项目中的API请求
      await new Promise(resolve => setTimeout(resolve, 100));
      arr.push({ name: 'test', item: i });
      files.push(arr);
    }
    return files; 
  } 

  const result = await details(); 
  console.log(result); 
} 

bigTest();

为什么forEach不行？ #

forEach的回调如果是async函数，会变成一个个独立的Promise，但forEach完全不会跟踪这些Promise的状态，也不会等待它们完成。而for...of会等待每个循环里的await执行完毕后，再进入下一次循环，确保所有操作按顺序完成，最后返回完整的结果数组。

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