如何在JavaScript中合并子数组内的对象以得到单个包含多个对象的数组

你遇到的问题很明确：需要把每个子数组里的多个单键对象合并成一个完整对象，而不是把所有对象平铺成一维数组。之前用[].concat.apply([], array)的方式只是做了数组扁平化，这和你的需求不符，下面给你几种可行的解决方案：

核心思路 #

遍历外层数组的每个子数组，将子数组内的所有小对象合并为一个包含所有键值对的对象，最终组成新的数组。

方法1：使用Object.assign + 展开运算符 #

这是比较简洁的写法，Object.assign可以接收多个对象参数，把它们的键值对合并到目标对象中：

const originalArray = [ 
  [ { "col0": "Glasses" }, { "col1": "Milky Glasses" }, { "col2": "292516467012796941" } ], 
  [ { "col0": "Knives" }, { "col1": "Milky Knives" }, { "col2": "292516484536599049" } ], 
  [ { "col0": "Forks" }, { "col1": "Milky Forks" }, { "col2": "292516497196057096" } ], 
  [ { "col0": "Gloves" }, { "col1": "Kewl Gloves" }, { "col2": "292534063457108493" } ], 
  [ { "col0": "Wrench" }, { "col1": "Kewl Wrench" }, { "col2": "292534088244396552" } ], 
  [ { "col0": "Monkey snake" }, { "col1": "Kewl Monkey snake" }, { "col2": "292534109863936521" } ] 
];

const finalArray = originalArray.map(subArr => Object.assign({}, ...subArr));

方法2：使用reduce进行合并 #

如果需要更灵活的处理（比如子数组长度不固定的情况），reduce是更通用的选择：

const finalArray = originalArray.map(subArr => 
  subArr.reduce((mergedObj, currentObj) => {
    return { ...mergedObj, ...currentObj };
  }, {})
);

方法3：手动展开子数组对象（适合固定长度的子数组） #

如果你的子数组长度确定都是3个对象，也可以直接手动展开合并：

const finalArray = originalArray.map(([obj0, obj1, obj2]) => ({ ...obj0, ...obj1, ...obj2 }));

验证结果 #

执行上述代码后，finalArray会完全符合你的预期：

[
  {"col0":"Glasses","col1":"Milky Glasses","col2":"292516467012796941"},
  {"col0":"Knives","col1":"Milky Knives","col2":"292516484536599049"},
  {"col0":"Forks","col1":"Milky Forks","col2":"292516497196057096"},
  {"col0":"Gloves","col1":"Kewl Gloves","col2":"292534063457108493"},
  {"col0":"Wrench","col1":"Kewl Wrench","col2":"292534088244396552"},
  {"col0":"Monkey snake","col1":"Kewl Monkey snake","col2":"292534109863936521"}
]

为什么之前的方法不行？ #

[].concat.apply([], originalArray)的作用是扁平化嵌套数组，它会把所有子数组里的元素（也就是那些单键对象）全部提取出来放到一个一维数组里，这和你需要的"合并对象"是完全不同的操作，所以得到的结果不符合预期。

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