JavaScript中Array.map异步使用导致结果异常的问题咨询

你的代码里有两个核心问题，导致没能拿到预期的最终数组结果：

1. 为什么result是[1,2,3]？ #

你在array.map的异步回调里写了return test.push(arr)，但**Array.push()的返回值是数组的新长度**，不是添加后的数组本身。再加上每个map回调是async函数，所以files数组里是三个分别resolve为1、2、3的Promise，Promise.all(files)自然就得到[1,2,3]了。

2. 为什么test数组里有重复对象？ #

arr是在details函数内部声明的单个数组，你每次循环都往同一个arr里push元素，然后把arrpush到test里。因为数组是引用类型，test里的每一项其实都是指向同一个arr的引用——当arr后续被修改时，test里的所有项都会跟着变化，最终看起来就是重复的对象。

修正后的代码（推荐写法） #

如果你想要的是包含所有处理后元素的最终数组，其实不需要额外的test数组，直接在map里返回每个处理后的对象，再用Promise.all收集结果即可：

const array = [ { methods: 'user.js'}, { methods: 'test.js'}, { methods: 'hello.js' }, ];
async function bigTest() {
  async function details() {
    // 用map生成每个元素处理后的Promise数组
    const files = array.map(async (i) => {
      // 这里可以加入实际需要的异步操作（比如await接口请求）
      return { 
        name: i, 
        item: [ { name: 'test', }, ], 
      };
    });
    // Promise.all会等待所有异步操作完成，返回完整结果数组
    return Promise.all(files);
  }
  const result = await details();
  console.log(JSON.stringify(result));
}
bigTest();

另一种思路：串行逐步收集元素 #

如果你的实际场景需要按顺序处理元素（比如有依赖关系），可以改用for...of循环，写法更直观，也不会有引用重复的问题：

const array = [ { methods: 'user.js'}, { methods: 'test.js'}, { methods: 'hello.js' }, ];
async function bigTest() {
  async function details() {
    const arr = [];
    // 按顺序遍历处理每个元素
    for (const i of array) {
      // 有异步操作的话，这里直接await即可
      arr.push({ 
        name: i, 
        item: [ { name: 'test', }, ], 
      });
    }
    return arr;
  }
  const result = await details();
  console.log(JSON.stringify(result));
}
bigTest();

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