Javascript对象合并

一、浅合并（只合并第一层属性）

1. Object.assign()（不会递归合并）

const obj1 = { a: 1, b: 2 };
const obj2 = { b: 3, c: 4 };

const merged = Object.assign({}, obj1, obj2);
console.log(merged); // { a: 1, b: 3, c: 4 }

• 后面的对象属性会覆盖前面的。

• 不修改原始对象（如果第一个参数是空对象 {}）。

2. 展开运算符 …

const merged = { ...obj1, ...obj2 };

效果同 Object.assign，更简洁。

二、深合并（递归合并多层对象）

浅合并只处理第一层属性，如果属性值是对象，不会递归合并：

const obj1 = { a: 1, b: { x: 1 } };
const obj2 = { b: { y: 2 }, c: 3 };

// 浅合并
const merged = { ...obj1, ...obj2 };
console.log(merged); // { a: 1, b: { y: 2 }, c: 3 }，丢失了 b.x

实现一个简单的深合并函数：

function deepMerge(target, source) {
  const result = { ...target };
  for (const key in source) {
    if (
      source[key] instanceof Object &&
      key in target &&
      target[key] instanceof Object
    ) {
      result[key] = deepMerge(target[key], source[key]);
    } else {
      result[key] = source[key];
    }
  }
  return result;
}

// 示例
const obj1 = { a: 1, b: { x: 1 } };
const obj2 = { b: { y: 2 }, c: 3 };

const merged = deepMerge(obj1, obj2);
console.log(merged); // { a: 1, b: { x: 1, y: 2 }, c: 3 }

三、使用库：lodash 的 _.merge

如果你项目中已经用到了 lodash，推荐直接使用：

import _ from 'lodash';

const merged = _.merge({}, obj1, obj2);

支持深合并且可靠、处理边界情况多。

总结