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

 更新时间:2018年09月07日 16:48:29   作者:黄努努  
这篇文章主要介绍了JavaScript实现JSON合并操作,结合实例形式分析了javascript基于递归深度实现json合并操作相关实现技巧与注意事项,需要的朋友可以参考下

本文实例讲述了JavaScript实现JSON合并操作。分享给大家供大家参考,具体如下:

为什么我会想到写这几行代码

在实际工作中,我们会使用许多或自主开发或第三方的工具,有些工具的配置文件相当细节,使用频率低倒也罢了,使用频率高的话必然造成很多代码冗余。所以我都会对这些工具做二次封装,把不经常改动的配置给予默认值。如果需要改动,传入新的配置覆盖原来的配置即可。

起初我以为这是一项很简单的需求

var json1 = {  // 固定的配置
 a: 1,
 b: 2,
 c: 3,
}
var json2 = {  // 作为参数传入的配置
 a: 11,
 d: 14,
}
json3 = {  // 合并后的结果
 a: 11,
 b: 2,
 c: 3,
 d: 14,
}

如上述,确实很简单。可事实是,当配置不再是仅仅一层嵌套时,常用的合并如$.extendfor in 赋值就不再能再解决问题了

var json1 = {
 a: 1,
 b: {
  b1: 'hello',
  b2: 'world',
 },
}
var json2 = {
 b: { b2: 'china' },
 c: 3,
}
json3 = {  // 合并后的结果
 a: 1,
 b: { b2: 'chila' },
 c: 3,
}

可以看出,我们的本意是希望json2里的b.b2: 'china'取代json1里的b.b2: 'world', 可是实际上,常规的结果只会把整个object/json取代,而不会去遍历其中的属性,在本例中导致了b.b1的丢失。

于是就有了如下几行代码:

// 遇到相同元素级属性,以后者(main)为准
// 不返还新Object,而是main改变
function mergeJSON (minor, main) {
 for (var key in minor) {
  if (main[key] === undefined) { // 不冲突的,直接赋值
   main[key] = minor[key];
   continue;
  }
  // 冲突了,如果是Object,看看有么有不冲突的属性
  // 不是Object 则以main为主,忽略即可。故不需要else
  if (isJSON(minor[key])) {
   // arguments.callee 递归调用,并且与函数名解耦
   arguments.callee(minor[key], main[key]);
  }
 }
}
// 附上工具
function isJSON(target) {
 return typeof target == "object" && target.constructor == Object;
}

虽然只有十几行的代码,但还是挺实用。粗略的挖掘了一下搜索引擎,好像并没有更合适解决问题的代码。简单的递归思想和argument.callee琢磨一下也是有些味道的

PS:这里再为大家推荐几款相关的json在线工具供大家参考:

在线JSON代码检验、检验、美化、格式化工具:
http://tools.jb51.net/code/json

JSON在线格式化工具:
http://tools.jb51.net/code/jsonformat

在线XML/JSON互相转换工具:
http://tools.jb51.net/code/xmljson

json代码在线格式化/美化/压缩/编辑/转换工具:
http://tools.jb51.net/code/jsoncodeformat

在线json压缩/转义工具:
http://tools.jb51.net/code/json_yasuo_trans

更多关于JavaScript相关内容可查看本站专题:《JavaScript中json操作技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结

希望本文所述对大家JavaScript程序设计有所帮助。

相关文章

  • 使用typescript类型实现ThreeSum

    使用typescript类型实现ThreeSum

    这篇文章主要介绍了使用typescript类型实现ThreeSum,文章围绕主题展开详细的内容介绍,具有一定的参考价值,需要的小伙伴可以一下,希望对你学习又是帮助
    2022-08-08
  • js从数组中删除指定值(不是指定位置)的元素实现代码

    js从数组中删除指定值(不是指定位置)的元素实现代码

    下面小编就为大家带来一篇js从数组中删除指定值(不是指定位置)的元素实现代码。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-09-09
  • JavaScript 获得选中文本内容的方法

    JavaScript 获得选中文本内容的方法

    今天希望实现一个,直接在网页上选中文本,点击收藏夹的链接(javascript)即可弹出新窗口(类似“百度搜藏”和“QQ书签”),新窗口中的文本框即显示了选中的文本。
    2009-02-02
  • 文字不间断滚动(上下左右)实例代码

    文字不间断滚动(上下左右)实例代码

    文字不间断滚动(上下左右)实例代码,需要的朋友可以参考一下
    2013-04-04
  • 用JS实现轮播图效果(二)

    用JS实现轮播图效果(二)

    这篇文章主要介绍了用JS实现轮播图效果(二)的相关资料,需要的朋友可以参考下
    2016-06-06
  • 微信小程序学习之数据处理详解

    微信小程序学习之数据处理详解

    这篇文章主要给大家介绍了关于微信小程序中数据处理的相关资料,文中介绍的非常详细,对大家具有一定的参考学习价值,需要的朋友可以参考借鉴,下面来一起看看吧。
    2017-07-07
  • JavaScript中常见加密解密方法总结

    JavaScript中常见加密解密方法总结

    这篇文章主要为大家详细介绍了JavaScript中常见加密解密方法的实现,文中的示例代码讲解详细,具有一定的学习价值,感兴趣的小伙伴可以了解一下
    2023-03-03
  • 前端中的JS使用调试技巧

    前端中的JS使用调试技巧

    掌握各种js调试技巧,在前端开发中降低开发成本,起到事半功倍的效果。譬如,快速定位问题、降低故障概率、帮助分析逻辑错误等等。这篇文章主要介绍了前端中的JS使用调试技巧,需要的朋友可以参考下
    2022-12-12
  • bootstrap网页框架的使用方法

    bootstrap网页框架的使用方法

    这篇文章主要为大家详细介绍了bootstrap网页框架的使用方法,感兴趣的小伙伴们可以参考一下
    2016-05-05
  • setTimeout自动触发一个js的方法

    setTimeout自动触发一个js的方法

    本文为大家介绍下使用setTimeout自动触发一个js,具体实现如下,喜欢的朋友可以学习下
    2014-01-01

最新评论