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

场景

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

赞 (0)

相关推荐

  • JS实现合并json对象的方法

    JS实现合并json对象的方法

    本文实例讲述了JS实现合并json对象的方法.分享给大家供大家参考,具体如下: 一.问题: 求json对象合并的方法 var a ={"a":"1","b":"2"} var b ={"c":"3","d":"4","e":"5"} 想得到结果: var c ={"a":"1&q

  • js实现json数组分组合并操作示例

    js实现json数组分组合并操作示例

    本文实例讲述了js实现json数组分组合并操作.分享给大家供大家参考,具体如下: <script> var arr = [ {"id":"1001","name":"值1","value":"111"}, {"id":"1001","name":"值1","value":&qu

  • js操作两个json数组合并、去重，以及删除某一项元素

    两个json数组合并去重,以及删除某一项元素 let ha = [ {id:'H',name:'3'}, {id:'A',name:'6'}, {id:'B',name:'14'}, {id:'C',name:'60'} ]; let hb= [ {id:'H',name:'2'}, {id:'A',name:'6'}, {id:'B',name:'16'}, {id:'N',name:'2'}, {id:'C',name:'19'} ]; // 合并两个json数组,并去重; ha= Obje

  • JavaScript简单实现合并两个Json对象的方法示例

    JavaScript简单实现合并两个Json对象的方法示例

    本文实例讲述了JavaScript简单实现合并两个Json对象的方法.分享给大家供大家参考,具体如下: $.mergeJsonObject = function(jsonbject1, jsonbject2) { var resultJsonObject = {}; for (var attr in jsonbject1) { resultJsonObject[attr] = jsonbject1[attr]; } for (var attr in jsonbject2) { resultJso

  • JavaScript实现JSON合并操作示例【递归深度合并】

    本文实例讲述了JavaScript实现JSON合并操作.分享给大家供大家参考,具体如下: 为什么我会想到写这几行代码 在实际工作中,我们会使用许多或自主开发或第三方的工具,有些工具的配置文件相当细节,使用频率低倒也罢了,使用频率高的话必然造成很多代码冗余.所以我都会对这些工具做二次封装,把不经常改动的配置给予默认值.如果需要改动,传入新的配置覆盖原来的配置即可. 起初我以为这是一项很简单的需求 var json1 = { // 固定的配置 a: 1, b: 2, c: 3, } var json

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

    场景 2个json合并, jQuery 的“extend()”方法有两个原型:合并的方法,分别是浅合并和深度合并,其实浅合并只是json的第一层被合并,而深度合并是全部层数都被合并,分别如下写法: 1.浅合并,target被object1...合并,只有一层 $.extend( target [, object1 ] [, objectN ] ) 深度合并,target被object1...合并,包含一层二层三层... 要深度合并, [deep]需要为true, 后面覆盖前面,所以如要要保留后面

  • Javascript 对象（object）合并操作实例分析

    本文实例讲述了Javascript 对象(object)合并操作.分享给大家供大家参考,具体如下: 对象的合并 需求:设有对象 o1 ,o2,需要得到对象 o3 var o1 = { a:'a' }, o2 = { b:'b' }; // 则 var o3 = { a:'a', b:'b' } 方法1:使用JQuery的extend方法 **方法定义**:jQuery.extend([deep], target, object1, [objectN]) > 用一个或多个其他对象来扩展一个对象,返

  • 分享Javascript实用方法二

    JavaScript一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型.它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标准通用标记语言下的一个应用)网页上使用,用来给HTML网页增加动态功能. 承接上一篇, Object keys object的keys方法能够获取一个给定对象的所有键(key/属性名)并以数组的形式返回.这个方法可以用于键的筛选.匹配等. var basket = { strawberry: 12,

  • javascript实用方法总结

    引言: 本章没有深奥的讲解js一些底层原理,比如this指针.作用域.原型啦,涉及的都是一些有利于平时开发时简化代码,提高执行效率,或者说可以当做一种经验方法来使用,篇幅都不长,小步快跑的让你阅读完整篇文章,体验编程的快乐.  获取两个区间之内随机数 复制代码 代码如下: function getRandomNum(Min, Max){ // 获取两个区间之内随机数     // @逆火狂飙  提出有可能第一个参数大于第二个参数,所以增加一下判断更可靠     if (Min > Max)   

  • Vue集成three.js并加载glb、gltf、FBX、json模型的场景分析

    Vue集成three.js并加载glb、gltf、FBX、json模型的场景分析

    目录 先上几个网址 安装 组件中引入 基本使用 补充 最近刚开始做的一个项目,后面有个模块要通过three.js实现3D的场景,因为之前也没接触过3D这块,就提前学了一下,做个记录. 先上几个网址 ThreeJS官方:http://www.thingjs.com/guide/city2/ ThreeJS文档:https://threejs.org/docs/index.html#manual/en/introduction/Creating-a-scene 免费模型网:http://glbxz.

  • JavaScript转换与解析JSON方法实例详解

    本文实例讲述了JavaScript转换与解析JSON方法.分享给大家供大家参考,具体如下: json格式数据如下: var json = { 'jquery': [{ "id": "1", "type": "ASP.NET", "title": "JSON全解析"}] } alert(json.jquery[0].id); alert(json.jquery[0].type); aler

  • JavaScript解析及序列化JSON的方法实例分析

    JavaScript解析及序列化JSON的方法实例分析

    本文实例讲述了JavaScript解析及序列化JSON的方法.分享给大家供大家参考,具体如下: JSON 之所以这么流行,是因为 JSON 数据结构可以被解析为 JavaScript 对象.JSON 之前的 XML 数据结构要被解析,需要先解析成 DOM 文档,然后再从中提取出数据.相比之下,JSON 数据结构方便多咯O(∩_∩)O~ 所以 JSON 就成为 web 开发中,用于数据交换的事实标准. 1 JSON 对象 早期的 JSON 解析器是使用 JavaScript 的 eval() 函数

  • 详解JavaScript中的数组合并方法和对象合并方法

    1 数组合并 1.1 concat 方法 var a=[1,2,3],b=[4,5,6]; var c=a.concat(b); console.log(c);// 1,2,3,4,5,6 console.log(a);// 1,2,3 不改变本身 1.2 循环遍历 var arr1=['a','b']; var arr2=['c','d','e']; for(var i=0;i<arr2.length;i++){ arr1.push(arr2[i]) } console.log(arr1);/

  • Javascript数组方法reduce的妙用之处分享

    前言 Javascript数组方法中,相比map.filter.forEach等常用的迭代方法,reduce常常被我们所忽略,今天一起来探究一下reduce在我们实战开发当中,能有哪些妙用之处,下面从reduce语法开始介绍. 语法 array.reduce(function(accumulator, arrayElement, currentIndex, arr), initialValue) 若传入初始值,accumulator首次迭代就是初始值,否则就是数组的第一个元素:后续迭代中将是上一

随机推荐