JavaScript 如何将多个对象数组合并为单个目标数组？

结构定位 #

你通过类方法拿到的内容，本质是一个二维嵌套数组：控制台展示时虽然会把8个存了8个对象的小数组分开显示，但代码里这些小数组一定是被收集在一个外层的可迭代容器里的，不存在互相独立、没有挂载关系的零散数组。最终要做的就是消除这层嵌套，把所有对象合并到同一个一维数组里，不需要复杂的递归或遍历逻辑。

具体实现方式 #

1. 最简便的原生方案：Array.flat() #

这是JS原生提供的数组扁平化方法，完美匹配你当前的嵌套层级：

// 接收类方法返回的嵌套结构
const nestedData = this.yourClassMethod();
// 直接拍平一层，得到最终的单数组
const finalArray = nestedData.flat();

• 该方法默认的拍平深度就是1，刚好适配你“外层装小数组、小数组装对象”的两层结构，不需要额外传参
• 如果后续结构嵌套深度变化，只需要给方法传入对应深度值即可，比如flat(2)代表拍平两层

2. 适配你之前尝试的concat()实现 #

你之前用concat()没跑通的核心原因，是没有把外层嵌套的各个小数组拆成独立参数传入。搭配扩展运算符就能完美适配场景：

const nestedData = this.yourClassMethod();
// 用...把外层数组里的每个小数组拆成独立参数，传给空数组的concat方法
const finalArray = [].concat(...nestedData);

老旧环境兼容方案 #

如果项目需要兼容不支持flat()的低版本浏览器，可以用reduce实现完全等价的效果：

const finalArray = nestedData.reduce((result, currentSmallArr) => {
  // 逐一把每个小数组拼到结果数组里
  return result.concat(currentSmallArr);
}, []);

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