JavaScript中合并两个JSON对象的实用方法
在JavaScript开发中,经常需要将两个或多个JSON对象合并成一个对象,无论是处理API响应、配置对象还是数据聚合,合并JSON对象都是一项常见任务,本文将介绍几种在JavaScript中合并两个JSON对象的方法,从基础到高级,帮助你选择最适合的场景解决方案。
使用Object.assign()
Object.assign()是ES6引入的一个静态方法,用于将所有可枚举的自身属性从一个或多个源对象复制到目标对象,这是合并JSON对象最直接的方法之一。
const json1 = { a: 1, b: 2 };
const json2 = { b: 3, c: 4 };
const merged = Object.assign({}, json1, json2);
console.log(merged); // 输出: { a: 1, b: 3, c: 4 }
注意事项:
- 如果两个对象有相同的属性名,后面的对象会覆盖前面的值
- 第一个参数是目标对象,通常传入一个空对象{}以避免修改原始对象
- 浅拷贝:对于嵌套对象,只复制引用而非实际值
使用展开运算符(...)
ES6的展开运算符提供了一种更简洁的语法来合并对象:
const json1 = { a: 1, b: 2 };
const json2 = { b: 3, c: 4 };
const merged = { ...json1, ...json2 };
console.log(merged); // 输出: { a: 1, b: 3, c: 4 }
优点:
- 语法简洁直观
- 同样遵循后出现的对象属性覆盖前面的原则
- 同样是浅拷贝
使用Lodash的merge()方法
对于需要深度合并(合并嵌套对象)的场景,Lodash库的merge()方法非常实用:
const _ = require('lodash');
const json1 = { a: 1, b: { x: 10, y: 20 } };
const json2 = { b: { y: 30, z: 40 }, c: 3 };
const merged = _.merge({}, json1, json2);
console.log(merged);
// 输出: { a: 1, b: { x: 10, y: 30, z: 40 }, c: 3 }
特点:
- 深度合并,递归合并嵌套对象
- 遇到相同属性时,会将值合并而不是简单覆盖
- 需要引入Lodash库
手动合并函数
如果你不想依赖外部库,也可以编写一个自定义的合并函数:
function deepMerge(target, source) {
const output = Object.assign({}, target);
if (isObject(target) && isObject(source)) {
Object.keys(source).forEach(key => {
if (isObject(source[key])) {
if (!(key in target))
Object.assign(output, { [key]: source[key] });
else
output[key] = deepMerge(target[key], source[key]);
} else {
Object.assign(output, { [key]: source[key] });
}
});
}
return output;
}
function isObject(item) {
return item && typeof item === 'object' && !Array.isArray(item);
}
const json1 = { a: 1, b: { x: 10, y: 20 } };
const json2 = { b: { y: 30, z: 40 }, c: 3 };
const merged = deepMerge(json1, json2);
console.log(merged);
// 输出: { a: 1, b: { x: 10, y: 30, z: 40 }, c: 3 }
使用JSON.parse和JSON.stringify(不推荐)
虽然这种方法可以合并对象,但效率低下且不推荐使用:
const json1 = { a: 1, b: 2 };
const json2 = { b: 3, c: 4 };
const merged = JSON.parse(JSON.stringify({ ...json1, ...json2 }));
console.log(merged); // 输出: { a: 1, b: 3, c: 4 }
缺点:
- 性能差,涉及序列化和反序列化
- 会丢失函数、undefined等非JSON安全值
- 代码冗余
选择合适的方法
| 方法 | 浅拷贝/深拷贝 | 代码简洁性 | 适用场景 |
|---|---|---|---|
| Object.assign() | 浅拷贝 | 中等 | 简单对象合并 |
| 展开运算符 | 浅拷贝 | 高 | 简单对象合并 |
| Lodash merge() | 深拷贝 | 中等 | 复杂嵌套对象合并 |
| 自定义函数 | 可定制 | 低 | 需要特殊合并逻辑 |
| JSON方法 | 浅拷贝 | 低 | 不推荐 |
最佳实践建议
- 对于简单对象的合并,优先使用展开运算符,代码最简洁
- 对于需要深度合并的场景,使用Lodash的merge()方法
- 避免直接修改原始对象,总是创建新对象
- 注意合并时的属性覆盖规则,确保符合业务逻辑
通过这些方法,你可以根据不同的场景灵活选择最适合的JSON对象合并策略,提高代码的可读性和可维护性。



还没有评论,来说两句吧...