如何合并两个对象？

在JavaScript项目中，合并对象是一项日常操作，无论是合并配置项、整合状态还是组合数据。根据不同的需求和合并策略（浅合并或深合并），我们有多种方法可以选择，理解它们的区别能帮你写出更健壮的代码。

使用扩展运算符进行浅合并

ES6的扩展运算符提供了一种非常简洁的方式来合并对象。它将源对象的所有可枚举自身属性展开，合并到一个新对象中。这是一种浅合并。

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

注意，当属性名冲突时，后面对象的属性会覆盖前面的。这个操作不会修改原始对象，而是创建一个全新的对象。如果属性的值是一个对象，那么复制的是该对象的引用，而非对象本身。

Object.assign方法

在ES6之前，Object.assign是标准的对象合并方法，它的行为与扩展运算符类似，也是执行可枚举属性的浅拷贝。

const target = { a: 1 };
const source = { b: 2 };
const result = Object.assign({}, target, source);
console.log(result); // { a: 1, b: 2 }

Object.assign的第一个参数是目标对象，后续参数是源对象。它会修改目标对象并返回。为了避免意外修改原始对象，通常将空对象{}作为第一个参数，就像上面示例那样。

处理嵌套对象的深合并

浅合并无法解决嵌套对象的合并问题。如果属性值是对象，合并后双方会共享同一个引用，修改其中一个会影响另一个。这时需要进行深合并。

const objA = { a: 1, nested: { x: 1 } };
const objB = { b: 2, nested: { y: 2 } };
const shallowMerge = { ...objA, ...objB };
console.log(shallowMerge.nested); // { y: 2 }， nested被整个覆盖了

// 一个简单的手动深合并思路
const deepMerge = {
  ...objA,
  ...objB,
  nested: {
    ...objA.nested,
    ...objB.nested
  }
};
console.log(deepMerge.nested); // { x: 1, y: 2 }

对于复杂的深层嵌套结构，手动展开会非常繁琐。在实际项目中，通常会使用工具库来实现健壮的深合并，例如Lodash的_.merge函数。

Lodash的merge函数

Lodash库的_.merge方法递归合并源对象和目标的自身及继承的可枚举属性。它会深度遍历对象，并合并它们内部的属性。

// 假设已引入lodash
const object = { a: [{ b: 2 }, { d: 4 }] };
const other = { a: [{ c: 3 }, { e: 5 }] };
_.merge(object, other);
// 结果： { 'a': [{ 'b': 2, 'c': 3 }, { 'd': 4, 'e': 5 }] }

_.merge会改变第一个参数（目标对象）。对于数组属性，它不是简单地覆盖，而是会合并数组项。

在现代前端开发中，React的状态更新等场景常使用扩展运算符进行不可变的浅合并。当需要处理复杂的配置合并时，深合并工具则更为合适。选择哪种方式，取决于你的数据结构和你是否需要保持对象的不可变性。