JavaScript 对象合并方法详解及最佳实践（2026年最新版）
在 JavaScript 中，对象合并（Object Merge）是常见操作，用于将多个对象的属性组合成一个新对象。这在处理配置、状态管理、API 数据整合等场景中非常实用。ES6+ 引入了更简洁的方法，但需注意浅合并 vs 深合并的区别。下面从方法详解、代码示例、最佳实践三个维度系统拆解。
一、常见对象合并方法详解
JavaScript 提供了内置方法和第三方库支持。以下是2026年主流方法对比表（基于浅/深合并、性能、兼容性等维度）：
| 方法名称 | 描述 | 合并类型 | 优点 | 缺点 | 适用场景 | 引入方式（ES6+） |
|---|---|---|---|---|---|---|
| Object.assign() | 将一个或多个源对象的可枚举属性复制到目标对象，返回目标对象。 | 浅合并 | 内置、无需库；支持多个源对象；简单高效。 | 修改目标对象（需用空对象避免）；不处理嵌套对象（覆盖整个子对象）。 | 简单配置合并、默认值填充。 | 原生 |
| Spread Operator (…) | 使用扩展运算符在对象字面量中展开源对象属性，创建新对象。 | 浅合并 | 语法简洁、现代；不修改原对象；易读。 | 与 assign 类似，不处理嵌套；浏览器兼容需 Babel。 | React/Vue 组件 props 合并、快速克隆。 | 原生（ES6） |
| Lodash _.merge() | 递归合并源对象到目标对象，支持深层嵌套。 | 深合并 | 处理嵌套对象（如数组/子对象）；自定义合并逻辑。 | 需要引入库（增加包体积）；性能稍低。 | 复杂数据结构，如 API 响应或配置深层合并。 | npm install lodash |
| 自定义递归函数 | 手动实现递归遍历属性，合并对象。 | 深合并 | 高度自定义（如忽略某些键、处理特殊类型）；无外部依赖。 | 代码复杂，易出错；性能依赖实现。 | 轻量项目、不想引入库的场景。 | 原生 |
关键概念解释：
- 浅合并：只合并第一层属性，嵌套对象会被整体覆盖（e.g., obj2 的子对象替换 obj1 的）。
- 深合并：递归合并嵌套层级，确保子对象属性也被合并。
- 覆盖规则：后传入的对象属性会覆盖前面的（右优先）。
二、代码示例（从简单到复杂）
假设有两个对象：
const obj1 = { a: 1, b: { x: 10 }, c: [1, 2] };
const obj2 = { a: 2, b: { y: 20 }, c: [3] };- Object.assign() 示例（浅合并）
const merged = Object.assign({}, obj1, obj2); // 用空对象作为目标，避免修改原对象
console.log(merged); // { a: 2, b: { y: 20 }, c: [3] } // 注意 b 和 c 被整体覆盖- 结果：浅合并，嵌套属性丢失。
- Spread Operator 示例（浅合并）
const merged = { ...obj1, ...obj2 };
console.log(merged); // { a: 2, b: { y: 20 }, c: [3] } // 同上，浅合并- 结果：简洁，但同样浅合并。
- Lodash _.merge() 示例（深合并）
import { merge } from 'lodash'; // 或全导入 import _ from 'lodash';
const merged = merge({}, obj1, obj2);
console.log(merged); // { a: 2, b: { x: 10, y: 20 }, c: [1, 2, 3] } // 嵌套合并，数组追加- 结果：深合并，保留了 b 的 x 和 c 的原有元素。
- 自定义深合并函数示例（递归实现）
function deepMerge(target, source) {
if (typeof target !== 'object' || typeof source !== 'object') return source;
for (const key in source) {
if (source.hasOwnProperty(key)) {
if (typeof source[key] === 'object' && source[key] !== null) {
target[key] = deepMerge(target[key] || (Array.isArray(source[key]) ? [] : {}), source[key]);
} else {
target[key] = source[key];
}
}
}
return target;
}
const merged = deepMerge({}, obj1, obj2);
console.log(merged); // { a: 2, b: { x: 10, y: 20 }, c: [3] } // 注意：数组被覆盖，可自定义追加逻辑- 扩展提示：如果想数组追加，可在函数中检查 Array.isArray 并用 concat。
三、最佳实践（2026年社区共识）
- 优先选择内置方法：对于浅合并，用 Spread Operator（更现代、易读）；Object.assign() 适合多对象或旧环境。
- 处理深合并：内置方法不支持深层，用 Lodash _.merge()（生产级推荐）；或自定义函数（轻量，但测试充分）。避免 JSON.parse/stringify（不支持函数/Date/RegExp 等）。
- 避免修改原对象：总是用空对象 {} 作为目标（e.g., Object.assign({}, …) 或 { …obj1, …obj2 }），保持不可变性（Immutable），尤其在 React 等框架中。
- 性能考虑：浅合并更快（O(n)），深合并递归可能慢（大对象慎用）。在高性能场景，先浅后手动深。
- 特殊类型处理：函数/原型链/Getter/Setter 不适合简单合并，用 Object.getOwnPropertyDescriptors() + Object.defineProperties()。
- 数组合并：对象属性是数组时，浅合并覆盖整个数组；深合并可自定义（如 concat 或 Set 去重）。
- 框架集成：在 React/Vue 中，常用 Spread 合并 props/state；在 Node.js 项目，Lodash 更常见。
- 测试与边缘case：处理 null/undefined、非对象输入；用 TypeScript 添加类型检查（e.g., Record）。
四、注意事项 & 常见坑
- 浏览器兼容：Spread 在 IE 不支持，用 Babel 转译。
- 属性覆盖：后对象优先，注意顺序。
- 不可枚举属性：Object.assign() 只复制可枚举 own 属性。
- Symbol键：ES6+ 支持，但旧方法忽略。
- 大型项目：优先 Lodash，避免自定义函数的维护成本。
掌握这些，你就能高效处理对象合并了！如果你有具体场景（如深合并数组），欢迎补充，我可以给出更针对性代码～
