前端 JavaScript 编程中怎么合并两个 Json 对象

合并两个JSON对象是前端Javascript编程中的常见需求，可以通过多种方法实现，最直接的三种方法包括：使用Object.assign()函数、使用展开运算符（…）、使用自定义函数进行合并。Object.assign()函数 能够实现将源对象中的所有可枚举属性复制到目标对象中，这种方式简洁高效，适用于大多数简单需求的对象合并。

一、使用Object.assign()函数

Object.assign() 是一个非常实用的JavaScript内置方法，它可以用来复制一个或多个源对象中的所有可枚举的自有属性到目标对象。它会将源对象中的属性复制到目标对象，对于相同的属性名会进行覆盖，最后返回目标对象。

实现原理

Object.assign(target, …sources) 接受一个目标对象和一个或多个源对象作为参数。它会按顺序遍历每一个源对象，将他们的属性复制到目标对象中。如果有同名属性，后面的源对象的属性值会覆盖前面的。

示例代码

const object1 = { a: 1, b: 2 };

const object2 = { b: 3, c: 4 };
const mergedObject = Object.assign({}, object1, object2);
console.log(mergedObject); // { a: 1, b: 3, c: 4 }

注意：Object.assign() 不会进行深拷贝。也就是说，如果源对象的属性值是一个对象的引用，它只会复制该引用值。

二、使用展开运算符（…）

ES6 引入了展开运算符，这在合并对象时提供了另一种简便写法。展开运算符可以在创建新对象的同时，将一个或多个对象的可枚举属性展开到这个新对象里。

实现原理

利用展开运算符可以将对象中的所有可枚举属性，复制到新的对象字面量中。就像Object.assign()，它同样会覆盖同名属性，但是展开运算符更倾向于用于简单的、浅层的对象合并。

示例代码

const object1 = { a: 1, b: 2 };

const object2 = { b: 3, c: 4 };
const mergedObject = { ...object1, ...object2 };
console.log(mergedObject); // { a: 1, b: 3, c: 4 }

三、深度合并对象

在日常的开发中，可能遇到需要合并拥有嵌套对象的复杂JSON对象的场景，在这种情况下，前面提到的方法就无法满足需求了，因为它们都是浅层合并。此时，我们需要自定义一个深度合并函数。

实现原理

深度合并需要递归地遍历源对象的所有属性，判断属性值的类型，如果是对象，则再次进行合并，这样确保了对象内部的对象也能够被合并。

示例代码

function isObject(item) {

  return (item && typeof item === 'object' && !Array.isArray(item));
}
function deepMerge(target, ...sources) {
  if (!sources.length) return target;
  const source = sources.shift();
  if (isObject(target) && isObject(source)) {
    for (const key in source) {
      if (isObject(source[key])) {
        if (!target[key]) Object.assign(target, { [key]: {} });
        deepMerge(target[key], source[key]);
      } else {
        Object.assign(target, { [key]: source[key] });
      }
    }
  }
  return deepMerge(target, ...sources);
}
const object1 = { a: 1, b: { c: 2 } };
const object2 = { b: { d: 3 }, e: 4 };
const mergedObject = deepMerge({}, object1, object2);
console.log(mergedObject); // { a: 1, b: { c: 2, d: 3 }, e: 4 }

在复杂的应用场景下，深度合并函数能提供更加强大灵活的对象合并能力，但同时也更复杂且性能消耗较大，在使用时应根据实际需要做出决策。

相关问答FAQs：

1. 如何在前端 JavaScript 编程中将两个 Json 对象合并为一个对象？

在前端 JavaScript 编程中，可以通过以下步骤将两个 Json 对象合并为一个对象：

步骤一：使用 JSON.parse() 方法将两个 Json 对象解析为 JavaScript 对象。

步骤二：使用 Object.assign() 方法将两个 JavaScript 对象合并为一个对象。

步骤三：使用 JSON.stringify() 方法将合并后的 JavaScript 对象转换为 Json 对象。

示例代码如下所示：

let json1 = '{"name": "John", "age": 30}';
let json2 = '{"city": "New York", "country": "USA"}';

let obj1 = JSON.parse(json1);
let obj2 = JSON.parse(json2);

let mergedObject = Object.assign({}, obj1, obj2);

let mergedJson = JSON.stringify(mergedObject);

console.log(mergedJson);

执行结果将会是一个合并后的 Json 对象：

{"name":"John","age":30,"city":"New York","country":"USA"}

2. 前端 JavaScript 编程中如何合并两个 Json 对象的特定属性？

如果你只想合并两个 Json 对象的特定属性，可以按照以下步骤进行操作：

步骤一：使用 JSON.parse() 方法将两个 Json 对象解析为 JavaScript 对象。

步骤二：使用 Object.assign() 方法将两个 JavaScript 对象的特定属性合并为一个对象。

步骤三：使用 JSON.stringify() 方法将合并后的 JavaScript 对象转换为 Json 对象。

示例代码如下所示：

let json1 = '{"name": "John", "age": 30}';
let json2 = '{"city": "New York", "country": "USA"}';

let obj1 = JSON.parse(json1);
let obj2 = JSON.parse(json2);

let mergedObject = Object.assign({}, obj1, { city: obj2.city });

let mergedJson = JSON.stringify(mergedObject);

console.log(mergedJson);

执行结果将会是一个合并后的 Json 对象，其中只包含特定属性的值：

{"name":"John","age":30,"city":"New York"}

3. 在前端 JavaScript 编程中如何合并两个 Json 对象并排除相同属性的值？

如果你希望合并两个 Json 对象时排除相同属性的值，可以按照以下步骤进行操作：

步骤一：使用 JSON.parse() 方法将两个 Json 对象解析为 JavaScript 对象。

步骤二：遍历第一个 JavaScript 对象的属性，使用 hasOwnProperty() 方法检查是否存在相同属性。

步骤三：使用 Object.assign() 方法将第一个 JavaScript 对象的属性和值合并到第二个 JavaScript 对象，排除相同属性的值。

步骤四：使用 JSON.stringify() 方法将合并后的 JavaScript 对象转换为 Json 对象。

示例代码如下所示：

let json1 = '{"name": "John", "age": 30}';
let json2 = '{"age": 40, "city": "New York"}';

let obj1 = JSON.parse(json1);
let obj2 = JSON.parse(json2);

for (let prop in obj1) {
  if (obj1.hasOwnProperty(prop) && obj1[prop] !== obj2[prop]) {
    obj2[prop] = obj1[prop];
  }
}

let mergedJson = JSON.stringify(obj2);

console.log(mergedJson);

执行结果将会是一个合并后的 Json 对象，其中排除了相同属性的值：

{"age":30,"city":"New York","name":"John"}

最后建议，企业在引入信息化系统初期，切记要合理有效地运用好工具，这样一来不仅可以让公司业务高效地运行，还能最大程度保证团队目标的达成。同时还能大幅缩短系统开发和部署的时间成本。特别是有特定需求功能需要定制化的企业，可以采用我们公司自研的企业级低代码平台：织信Informat。 织信平台基于数据模型优先的设计理念，提供大量标准化的组件，内置AI助手、组件设计器、自动化（图形化编程）、脚本、工作流引擎（BPMN2.0）、自定义API、表单设计器、权限、仪表盘等功能，能帮助企业构建高度复杂核心的数字化系统。如ERP、MES、CRM、PLM、SCM、WMS、项目管理、流程管理等多个应用场景，全面助力企业落地国产化/信息化/数字化转型战略目标。 版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们微信：Informat_5 处理，核实后本网站将在24小时内删除。