如何将两个json对象合并

如何将两个 JSON 对象合并：从基础到高级的全面指南

在 JavaScript 开发中，处理 JSON（JavaScript Object Notation）数据是非常常见的任务，而将两个或多个 JSON 对象合并成一个新的对象，也是一项频繁操作，无论是配置文件的合并、默认选项与用户选项的整合，还是 API 响应数据的聚合，对象合并技巧都至关重要，本文将详细介绍如何在 JavaScript 中合并两个 JSON 对象，从基础方法到高级技巧,并提供最佳实践建议。

理解 JSON 对象合并

我们需要明确“合并”的含义，合并两个 JSON 对象通常指的是将它们的属性组合到一个新的对象中，当两个对象具有相同的属性键时，就需要决定如何处理这些冲突的值：是覆盖、保留,还是进行其他操作。

基础合并方法

使用 `Object.assign()` 方法

Object.assign() 是 JavaScript 中用于合并对象的常用方法，它将一个或多个源对象的 own（自有）可枚举属性复制到目标对象,并返回目标对象。

语法： Object.assign(target, ...sources)

示例：

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

说明：

第一个参数是一个空对象，作为目标对象，这样做可以避免修改 obj1 或 obj2 本身。
obj1 和 obj2 中有相同的属性键（如 b），则后面的对象（obj2）的属性值会覆盖前面的（obj1 的 b: 2 被 obj2 的 b: 3 覆盖）。
Object.assign() 进行的是浅拷贝，如果对象的属性值是另一个对象,那么合并后它们仍然引用同一个对象。

使用展开语法（Spread Syntax）

ES6 引入的展开语法（）提供了一种更简洁、更直观的方式来合并对象。

语法： const mergedObj = { ...obj1, ...obj2 };

示例：

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

说明：

展开语法将源对象的可枚举 own 属性复制到新对象中。
同样，当属性键冲突时，后面的对象（obj2）的属性值会覆盖前面的。
与 Object.assign() 类似,展开语法也进行浅拷贝。

处理嵌套对象和深度合并

上述两种方法都是浅合并，即只合并对象的第一层属性，如果对象内部嵌套了其他对象，而这些嵌套对象也需要合并，那么就需要进行深度合并（Deep Merge）。

手动实现深度合并

对于简单的深度合并,可以编写一个递归函数：

function deepMerge(target, source) {
  const output = Object.assign({}, target);
  for (const key in source) {
    if (source.hasOwnProperty(key)) {
      if (
        source[key] instanceof Object &&
        target[key] instanceof Object &&
        !Array.isArray(source[key]) &&
        !Array.isArray(target[key])
      ) {
        output[key] = deepMerge(target[key], source[key]);
      } else {
        output[key] = source[key];
      }
    }
  }
  return output;
}
const obj1 = { a: 1, b: { c: 2, d: 3 } };
const obj2 = { b: { d: 4, e: 5 }, f: 6 };
const mergedDeepObj = deepMerge(obj1, obj2);
console.log(mergedDeepObj);
// 输出: { a: 1, b: { c: 2, d: 4, e: 5 }, f: 6 }

说明：

该函数会检查源对象的属性值是否为对象，并且目标对象对应属性也是对象，如果是,则递归合并。
非对象属性或数组属性会直接覆盖。
注意：这种方法不处理数组合并，数组的处理通常需要特殊逻辑（如连接、覆盖或按需合并）。

使用 Lodash 的 `_.merge()` 方法

Lodash 是一个流行的 JavaScript 实用工具库，它提供了强大的 _.merge() 方法用于深度合并对象。

安装 Lodash： npm install lodash 或 yarn add lodash

示例：

const _ = require('lodash');
const obj1 = { a: 1, b: { c: 2, d: 3 } };
const obj2 = { b: { d: 4, e: 5 }, f: 6 };
const mergedDeepObj = _.merge({}, obj1, obj2);
console.log(mergedDeepObj);
// 输出: { a: 1, b: { c: 2, d: 4, e: 5 }, f: 6 }

说明：

_.merge() 会递归合并对象和数组（默认情况下，数组会被覆盖，而非连接，Lodash 有其他方法处理数组合并）。
第一个参数同样是一个空对象，作为目标对象,以避免修改原始对象。

合并时的注意事项

属性冲突解决策略：明确合并时对同名属性的处理方式是覆盖、保留还是其他（如累加）。Object.assign() 和展开语法默认是后覆盖前。
原型链属性：Object.assign() 和展开语法都只合并对象自身的可枚举属性,不会合并原型链上的属性。
Symbol 类型属性：Object.assign() 和展开语法都能正确处理 Symbol 类型的属性键。
数组处理：默认情况下，数组被视为普通对象，其元素会被视为属性值进行覆盖，如果需要特殊的数组合并逻辑（如连接数组）,需要额外处理。
不可变数据：在函数式编程或需要保持数据不可变的场景中，确保合并操作返回的是新对象,而不是修改了原对象。

性能考虑

对于简单的浅合并，Object.assign() 和展开语法的性能差异通常不大，展开语法在可读性上更优，对于深度合并，递归实现的性能取决于对象的嵌套深度和复杂度，而 Lodash 的 _.merge() 经过高度优化,通常在复杂场景下表现更好。

合并两个 JSON 对象是 JavaScript 开发中的基础技能：

浅合并：使用 Object.assign() 或 ES6 展开语法 { ...obj1, ...obj2 },适用于对象不包含嵌套对象或嵌套对象不需要合并的场景。
深度合并：对于需要合并嵌套对象的场景，可以手动编写递归函数，或使用成熟库如 Lodash 的 _.merge() 方法。

在实际开发中，根据具体需求选择合适的合并方法，并注意处理属性冲突、嵌套对象、数组等特殊情况，才能确保数据合并的正确性和高效性，希望本文能帮助你更好地理解和应用 JSON 对象合并的技巧。

正文

如何将两个json对象合并