引言：为什么需要对象合并？

在前端开发中，我们经常需要处理多个对象的合并操作。比如合并配置项、组合API返回数据或创建对象副本等场景。ES6引入的Object.assign()方法为我们提供了一种优雅的解决方案。

Object.assign()基础用法

方法签名

javascript Object.assign(target, ...sources)

基本合并示例

javascript
const target = { a: 1 };
const source = { b: 2 };

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

关键点：
- 第一个参数是目标对象
- 后续参数都是源对象
- 方法返回修改后的目标对象

深度解析合并机制

属性覆盖规则

当源对象与目标对象有相同属性时：javascript
const user = { name: "张三", age: 25 };
const update = { age: 26, city: "北京" };

Object.assign(user, update);
// { name: "张三", age: 26, city: "北京" }

多源对象合并

javascript
const defaults = { theme: "light", fontSize: 14 };
const userPrefs = { fontSize: 16 };
const runtimeSettings = { darkMode: true };

const finalConfig = Object.assign({}, defaults, userPrefs, runtimeSettings);

注意事项

1. 浅拷贝问题：只复制属性值，对于引用类型只复制指针
   javascript const obj1 = { nested: { value: 10 } }; const obj2 = Object.assign({}, obj1); obj2.nested.value = 20; console.log(obj1.nested.value); // 也被修改为20

2. 不可枚举属性：不会复制源对象的不可枚举属性

3. 继承属性：不会复制原型链上的属性

实际应用场景

场景1：配置项合并

javascript function init(options) { const defaults = { duration: 300, easing: 'linear' }; return Object.assign({}, defaults, options); }

场景2：React状态更新

javascript this.setState(prevState => ({ user: Object.assign({}, prevState.user, { lastLogin: new Date() }) }));

场景3：创建修改保护

javascript function createSafeObject(obj) { return Object.assign({}, obj); }

与扩展运算符的对比

ES2018引入的对象展开运算符也能实现类似功能：
javascript const merged = { ...obj1, ...obj2 };

主要区别：
- Object.assign()会触发setter，展开运算符不会
- 展开运算符语法更简洁
- 性能差异可以忽略不计

高级技巧与陷阱

陷阱1：原型污染

javascript const dangerous = Object.assign({}, maliciousObject); // 可能复制了不希望继承的属性

解决方案：
javascript const safeCopy = Object.assign( Object.create(null), sourceObject );

技巧1：条件合并

javascript Object.assign(target, condition1 && source1, condition2 && source2 );

技巧2：类型转换

javascript Object.assign({}, true && { a: 1 }, // { a: 1 } false && { b: 2 } // 被忽略 );

性能考量

对于简单的对象合并，Object.assign()通常足够高效。但在处理大型对象或高频操作时，需要考虑：

1. 每次调用都会创建新对象（当第一个参数为{}时）
2. 深度嵌套结构的合并可能更适合专用库（如lodash的_.merge）

替代方案

| 方法 | 特点 |
|------|------|
| 扩展运算符 | 语法简洁，不支持旧浏览器 |
| lodash.merge | 支持深度合并，体积较大 |
| 手动实现 | 灵活但维护成本高 |

结语

Object.assign()作为JavaScript对象合并的基础工具，虽简单但功能强大。理解其工作原理和限制条件，能帮助我们在日常开发中做出更合理的选择。对于简单的属性合并，它是理想选择；对于复杂场景，可能需要考虑专业工具库。

"好的工具应该像延伸的手臂，而不是额外的负担。" —— 在对象合并这件事上，Object.assign()恰好做到了这一点。