JavaScript 合并同键对象并将同键值转数组的实现方法

普通JS内置的对象合并方法（比如Object.assign、对象扩展运算符{...obj1, ...obj2}）默认会对同名属性执行覆盖操作，无法匹配同属性值聚合为数组的需求，需要通过自定义合并逻辑实现，核心判断规则为：

• 仅存在于单个对象的属性，直接保留原有值
• 两个对象共有的同名属性，将对应值聚合为数组存储，同时兼容原有值已经是数组的场景，避免嵌套生成二维数组

可运行实现代码 #

// 自定义合并函数
function mergeObjectWithArrayConcat(sourceObj, targetObj) {
  const result = {};
  // 收集两个对象的所有去重属性名
  const allKeys = new Set([...Object.keys(sourceObj), ...Object.keys(targetObj)]);

  for (const key of allKeys) {
    const hasSourceKey = Object.prototype.hasOwnProperty.call(sourceObj, key);
    const hasTargetKey = Object.prototype.hasOwnProperty.call(targetObj, key);

    // 仅源对象存在的属性
    if (hasSourceKey && !hasTargetKey) {
      result[key] = sourceObj[key];
      continue;
    }
    // 仅目标对象存在的属性
    if (!hasSourceKey && hasTargetKey) {
      result[key] = targetObj[key];
      continue;
    }

    // 两个对象共有的属性，聚合为数组
    const sourceValue = sourceObj[key];
    const targetValue = targetObj[key];
    result[key] = [
      ...(Array.isArray(sourceValue) ? sourceValue : [sourceValue]),
      ...(Array.isArray(targetValue) ? targetValue : [targetValue])
    ];
  }
  return result;
}

对应题目场景的测试调用 #

const obj1 = {name: "John", hobby: "Football"};
const obj2 = {hobby: "Basketball"};

const mergedObj = mergeObjectWithArrayConcat(obj1, obj2);
// 最终合并结果：{ name: "John", hobby: ["Football", "Basketball"] }

注：题目给出的期望结果中"Foootbal"为拼写笔误，实际实现会保留原对象中正确的"Football"值，不会沿用错误拼写。

可选调整方向 #

• 如果需要直接修改原obj1而非生成全新的合并对象，可以将函数内部的结果存储目标替换为原obj1，逐属性赋值更新即可
• 当前实现为浅合并，若需要处理深层嵌套的同名属性，可在共有属性的判断分支中增加递归调用逻辑

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