ES6 Spread运算符合并对象时重复键转数组的实现方案

轻量实现方案 #

不需要写冗长的手动遍历循环，借助JS内置的Map、数组原生方法和Object.fromEntries组合，就能用极少的代码满足需求，还能自动适配任意数量的待合并对象。

实现代码：

const mergeDedupToArr = (...sources) => Object.fromEntries(
  sources.flatMap(item => Object.entries(item))
    .reduce((acc, [key, value]) => {
      const curVal = acc.get(key)
      acc.set(key, curVal ? [...(Array.isArray(curVal) ? curVal : [curVal]), value] : value)
      return acc
    }, new Map())
)

实际调用方式：

let user = { name: 'John', lastName: 'Doe', phone: '000111222' };
let otherInfo = { phone: '123456', age: '30' };
let result = mergeDedupToArr(user, otherInfo)

最终输出和预期结构完全一致：

{
  name: 'John',
  lastName: 'Doe',
  phone: ['000111222', '123456'],
  age: '30'
}

方案特点 #

• 没有手写显式的对象遍历、判断重复键的样板代码，所有键值提取、聚合逻辑全部由内置API完成，整体代码量很低
• 聚合逻辑完全匹配需求：不重复的键保留原始单值类型，不会被强行包装成数组；只有出现重复键时，才自动把之前的单值转为数组结构，把新值追加进去
• 支持传入任意数量的待合并对象，不需要针对两个、三个对象的场景单独调整代码逻辑

补充：如果确定只合并两个固定对象，还可以进一步压缩代码长度，去掉可变参数的逻辑，在不损失可读性的前提下把代码量降到最低。

内容的提问来源于stack exchange，提问作者Yoshio H Palacios