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


Posted in Javascript onSeptember 07, 2018

本文实例讲述了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琢磨一下也是有些味道的

Javascript 相关文章推荐
一些易混淆且不常用的属性,希望有用
Jan 29 Javascript
js中的eventType事件及其浏览器支持性介绍
Nov 29 Javascript
详解JavaScript编程中正则表达式的使用
Oct 25 Javascript
ES6中非常实用的新特性介绍
Mar 10 Javascript
js实现String.Fomat的实例代码
Sep 02 Javascript
JS框架之vue.js(深入三:组件1)
Sep 29 Javascript
JS实现闭包中的沙箱模式示例
Sep 07 Javascript
AngularJS中controller控制器继承的使用方法
Nov 03 Javascript
JS+canvas画一个圆锥实例代码
Dec 13 Javascript
Vue.js更改调试地址端口号的实例
Sep 19 Javascript
vue基础之data存储数据及v-for循环用法示例
Mar 08 Javascript
JavaScript中var的重要性实例分析
Jul 09 Javascript
Bootstrap-table使用footerFormatter做统计列功能
Sep 07 #Javascript
jQuery实现为动态添加的元素绑定事件实例分析
Sep 07 #jQuery
Bootstrap-table自定义可编辑每页显示记录数
Sep 07 #Javascript
vue.js 双层嵌套for遍历的方法详解, 类似php foreach()
Sep 07 #Javascript
jQuery插件实现的日历功能示例【附源码下载】
Sep 07 #jQuery
vue利用v-for嵌套输出多层对象,分别输出到个表的方法
Sep 07 #Javascript
Vue中使用sass实现换肤功能
Sep 07 #Javascript
You might like
关于PHP实现异步操作的研究
2013/02/03 PHP
php查询mysql大量数据造成内存不足的解决方法
2015/03/04 PHP
php+mysql+jquery实现简易的检索自动补全提示功能
2017/04/15 PHP
jQuery 使用手册(三)
2009/09/23 Javascript
jquery中对表单的基本操作代码
2010/07/29 Javascript
JavaScript 打地鼠游戏代码说明
2010/10/12 Javascript
Notify - 基于jquery的消息通知插件
2011/10/18 Javascript
js截取中英文字符串、标点符号无乱码示例解读
2014/04/17 Javascript
使用JS+plupload直接批量上传图片到又拍云
2014/12/01 Javascript
在JavaScript中操作时间之getYear()方法的使用教程
2015/06/11 Javascript
谈谈因Vue.js引发关于getter和setter的思考
2016/12/02 Javascript
jQuery zTree树插件简单使用教程
2017/01/10 Javascript
js实现微博发布小功能
2017/01/12 Javascript
深入理解vue.js中$watch的oldvalue与newValue
2017/08/07 Javascript
vue中使用cropperjs的方法
2018/03/01 Javascript
TensorFlow.js 微信小程序插件开始支持模型缓存的方法
2020/02/21 Javascript
VUE使用 wx-open-launch-app 组件开发微信打开APP功能
2020/08/11 Javascript
vue自定义树状结构图的实现方法
2020/10/18 Javascript
python实现倒计时的示例
2014/02/14 Python
python私有属性和方法实例分析
2015/01/15 Python
Python的Django框架中自定义模版标签的示例
2015/07/20 Python
python如何在终端里面显示一张图片
2016/08/17 Python
Python实现比较扑克牌大小程序代码示例
2017/12/06 Python
手把手教你python实现SVM算法
2017/12/27 Python
Python搭建HTTP服务过程图解
2019/12/14 Python
澳大利亚正品化妆品之家:Cosmetic Capital
2017/07/03 全球购物
.NET程序员的数据库面试题
2012/10/10 面试题
大四学生毕业自荐信
2013/11/07 职场文书
大四学年自我鉴定
2013/11/13 职场文书
美德少年事迹材料
2014/01/23 职场文书
2014年基层党组织公开承诺书
2014/03/29 职场文书
五四演讲稿范文
2014/09/03 职场文书
房屋转让协议书
2014/10/18 职场文书
2015年清明节扫墓演讲稿
2015/03/18 职场文书
行政助理岗位职责范本
2015/04/11 职场文书
汉语拼音教学反思
2016/02/22 职场文书