本文分析JSON合并场景，对比jQuery的浅合并与深度合并机制。重点介绍如何在JavaScript中通过递归算法实现深度合并，解决属性冲突时的覆盖逻辑，并提供完整的测试代码示例，帮助开发者理解并应用对象合并技术。
场景
在处理数据时，经常遇到需要将两个JSON对象合并的情况。
jQuery提供的“extend()”方法支持两种合并模式：浅合并与深度合并。浅合并仅处理JSON的第一层属性，而深度合并则递归处理所有嵌套层级。具体用法如下：
1. 浅合并：target被object1等对象合并，仅影响第一层属性。
$.extend( target [, object1 ] [, objectN ] )深度合并：target被object1等对象合并，包含第一层、第二层、第三层等所有嵌套层级。
若要执行深度合并，[deep]参数需设为true。由于后传入的对象会覆盖前面的属性，若希望保留后传入对象的值，需调整参数顺序为object1 = $.extend(true, target, object1)，但此时target对象本身已被修改。
$.extend( [deep ], target, object1 [, objectN ] )这是jQuery内置的功能，下面介绍如何在纯JavaScript中实现类似功能。
代码
1. 深度合并（递归实现）
/**
* 遇到相同元素级属性，以（minor）为准 // 不返还新Object，而是main改变
* mirror
* main
*/
function mergeJSON(minor, main) {
for(var key in minor) {
if(main[key] === undefined) { // 不冲突的，直接赋值
main[key] = minor[key];
continue;
}
// 冲突了，如果是Object，看看有么有不冲突的属性
// 不是Object 则以（minor）为准为主，
//console.log(key)
if(isJSON(minor[key])||isArray(minor[key])) { // arguments.callee 递归调用，并且与函数名解耦
console.log("is json")
//arguments.callee(minor[key], main[key]);
mergeJSON(minor[key], main[key]);
}else{
main[key] = minor[key];
}
}
}
//判断是否是json
function isJSON(target) {
return typeof target == "object" && target.constructor == Object;
}
//判断是否是array
function isArray(o) {
return Object.prototype.toString.call(o) == '[object Array]';
}测试
var a = {
ccc: {
d: 111,
b: 222,
a: 222,
ee: [{
a: 1
}, {
b: 2
}]
}
};
var b = {
ccc: {
fff: 666,
ee: [{
c: 3
}]
}
};
mergeJSON(b, a);
console.log(a);
console.log(b);到此这篇关于Javascript实用方法之json合并的文章就介绍到这了,更多相关js json合并内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！