JavaScript：将循环获取的数组数据合并为单个数组的方案求助

我来帮你搞定这个数据合并的问题！咱们先理清楚问题核心：你每次从服务端循环拿到的是单对象数组，但之前的代码只处理了其中一组，导致最终的arrayData只有一条数据。要实现把所有对象都合并进去，咱们可以这样做：

核心思路 #

1. 确保arrayData在循环外部声明，避免每次循环被重置为空数组。
2. 在每一次获取到服务端的data数组后，将数组内的对象提取并添加到arrayData中。

可行的解决方案 #

方法一：使用扩展运算符（推荐，兼容多对象数组） #

如果你的循环逻辑是每次获取一组data（比如每次是[{id: 'x', name: 'y'}]这样的数组），可以用扩展运算符把data里的元素直接展开推入arrayData：

// 先在循环外声明目标数组
var arrayData = [];

// 模拟循环获取服务端数据的过程（实际场景替换成你的请求逻辑）
for (let i = 0; i < 3; i++) {
    // 这里模拟从服务端拿到的单对象数组
    let data = i === 0 ? [{ 'id':'1','name':'sam' }] : 
               i === 1 ? [{ 'id':'2','name':'ram' }] : 
               [{ 'id':'2','name':'ragu' }];
    
    // 把当前data里的对象推入arrayData
    arrayData.push(...data);
}

console.log(arrayData);
// 输出结果：[{ 'id':'1','name':'sam' },{ 'id':'2','name':'ram' },{ 'id':'2','name':'ragu' }]

这种方法的好处是，哪怕未来服务端返回的data数组里有多个对象，代码也不需要修改，直接就能把所有对象合并进去。

方法二：直接提取单个对象（适合确定data只有一个对象的场景） #

如果你能确保每次服务端返回的data都是只有一个对象的数组，也可以用你之前的解构写法，但是要在每次循环内执行：

var arrayData = [];

// 模拟循环获取数据
for (let i = 0; i < 3; i++) {
    let data = i === 0 ? [{ 'id':'1','name':'sam' }] : 
               i === 1 ? [{ 'id':'2','name':'ram' }] : 
               [{ 'id':'2','name':'ragu' }];
    
    // 解构提取数组里的单个对象
    var [objectData] = data;
    // 推入目标数组
    arrayData.push(objectData);
}

方法三：使用concat合并数组 #

concat方法会返回一个新数组，将当前data的元素合并到arrayData中，也能达到效果：

var arrayData = [];

// 模拟循环获取数据
for (let i = 0; i < 3; i++) {
    let data = i === 0 ? [{ 'id':'1','name':'sam' }] : 
               i === 1 ? [{ 'id':'2','name':'ram' }] : 
               [{ 'id':'2','name':'ragu' }];
    
    arrayData = arrayData.concat(data);
}

为什么你之前的代码不行？ #

你之前的代码只执行了一次arrayData.push(objectData)，而且如果每次获取数据时都用var data = ...重新声明变量，会导致之前的data被覆盖，自然只能拿到其中一组数据。只要把提取和推入的逻辑放到每次循环的内部，就能把所有数据都合并进去了。

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