JavaScript如何合并数组中的多个对象为单个对象？

你之前使用Object.assign()没有成功的核心原因是：Object.assign()要求接收多个对象作为入参，直接传入数组结构是无法完成合并的，需要先把数组里的对象展开作为参数传入即可。

方案1：展开数组 + Object.assign 实现 #

这是最简洁的实现方式，适合所有支持ES6扩展运算符的环境：

const test = [{name: ""}, {age: ""}, {nac: ""}];
const test2 = [Object.assign({}, ...test)];

说明：通过扩展运算符...把数组里的3个对象展开为Object.assign()的入参，所有属性会合并到第一个参数的空对象中，最后外层包裹数组就是你要的输出格式。

方案2：reduce遍历合并（兼容性更好） #

如果需要兼容不支持扩展运算符的旧环境，或者数组内对象数量较多时，用reduce方法更稳妥：

const test = [{name: ""}, {age: ""}, {nac: ""}];
const mergedObj = test.reduce((accumulator, currentObj) => {
  return Object.assign(accumulator, currentObj);
}, {});
const test2 = [mergedObj];

说明：reduce会遍历数组的每一个对象，把当前对象的属性逐步合并到累加器accumulator中，初始值设置为空对象避免修改原数组内的对象。

方案3：纯对象扩展运算符实现 #

ES2018之后支持对象扩展运算符，可以完全替代Object.assign()，代码可读性更高：

const test = [{name: ""}, {age: ""}, {nac: ""}];
const test2 = [test.reduce((acc, curr) => ({...acc, ...curr}), {})];

注意事项 #

以上所有方案的合并逻辑都是一致的：如果数组内多个对象存在同名属性，后出现的对象的属性值会覆盖先出现的对象的属性值，和Object.assign()的默认行为保持一致。

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