Javascript实用方法之json合并的场景分析

 更新时间:2022年09月06日 14:20:34   作者:奇想派  
这篇文章主要介绍了Javascript实用方法之json合并,jQuery 的“extend()”方法有两个原型:合并的方法,分别是浅合并和深度合并,本文通过代码给大家介绍的非常详细,需要的朋友可以参考下

场景

2个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合并内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 总结JavaScript的正则与其他语言的不同之处

    总结JavaScript的正则与其他语言的不同之处

    我接触过不少语言,我很看重一门语言的正则表达式是否强大,还有正则与语法的结合是否紧密.在这一点上,JavaScript做的还不错,至少有正则字面量.当然,最强大的还是Perl.但最近发现JavaScript中的正则有几个不同于其他语言的地方,下面一起来看下。
    2016-08-08
  • 浅谈bootstrap源码分析之tab(选项卡)

    浅谈bootstrap源码分析之tab(选项卡)

    下面小编就为大家带来一篇浅谈bootstrap源码分析之tab(选项卡)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-06-06
  • d3.js实现简单的网络拓扑图实例代码

    d3.js实现简单的网络拓扑图实例代码

    最近一直在学习d3.js,大家都知道d3.js是一个非常不错的数据可视化库,我们可以用它来做一些比较酷的东西,比如可以来显示一些简单的网络拓扑图,这篇文中就通过实例代码给大家介绍了如何利用d3.js实现简单的网络拓扑图,有需要的朋友们可以参考借鉴,下面来一起看看吧。
    2016-11-11
  • 微信小程序之滑动页面隐藏和显示组件功能的实现代码

    微信小程序之滑动页面隐藏和显示组件功能的实现代码

    这篇文章主要介绍了微信小程序之滑动页面隐藏和显示组件功能,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-06-06
  • 微信小程序点击图片实现长按预览、保存、识别带参数二维码、转发等功能

    微信小程序点击图片实现长按预览、保存、识别带参数二维码、转发等功能

    这篇文章主要介绍了微信小程序点击图片实现长按预览、保存、识别带参数二维码、转发等功能,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-07-07
  • 在小程序开发中使用npm的方法

    在小程序开发中使用npm的方法

    微信小程序在 2.2.1 版本后增加了对 npm 包加载的支持,使得小程序支持使用 npm 安装第三方包。这篇文章主要介绍了在小程序开发中使用npm的方法,感兴趣的小伙伴们可以参考一下
    2018-10-10
  • 记录几个javascript有关的小细节

    记录几个javascript有关的小细节

    记录几个javascript有关的小细节...
    2007-04-04
  • 详解CocosCreator项目结构机制

    详解CocosCreator项目结构机制

    这篇文章主要介绍了详解CocosCreator项目结构机制,只有了解这些机制后,才能更好的进行项目开发,避免潜在错误,并且快速的除错
    2021-04-04
  • 浅谈JS 数字和字符串之间相互转化的纠纷

    浅谈JS 数字和字符串之间相互转化的纠纷

    下面小编就为大家带来一篇浅谈JS 数字和字符串之间相互转化的纠纷。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-10-10
  • 基于微信小程序实现透明背景人像分割功能

    基于微信小程序实现透明背景人像分割功能

    这篇文章主要介绍了基于小程序实现透明背景人像分割,此文主要实现识别人体的轮廓范围,与背景进行分离并保存效果图,适用于拍照背景替换及透明背景的人像图(png格式)转换,需要的朋友可以参考下
    2022-10-10

最新评论