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 相关文章推荐
window.location.hash 使用说明
Nov 08 Javascript
JS网页播放声音实现代码兼容各种浏览器
Sep 22 Javascript
jQuery之字体大小的设置方法
Feb 27 Javascript
JavaScript中this的9种应用场景及三种复合应用场景
Sep 12 Javascript
JavaScript+html5 canvas绘制渐变区域完整实例
Jan 26 Javascript
使用javascript插入样式
Mar 14 Javascript
javascript常用的设计模式
Feb 09 Javascript
React Native悬浮按钮组件的示例代码
Apr 05 Javascript
浅谈Vue的响应式原理
May 30 Javascript
浅谈vue-props的default写不写有什么区别
Aug 09 Javascript
JavaScript位置参数实现原理及过程解析
Sep 14 Javascript
JavaScript中跨域问题的深入理解
Mar 04 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函数学习之PHP函数点评
2012/07/05 PHP
深入理解PHP内核(二)之SAPI探究
2015/11/10 PHP
使用正则去除php代码中的注释方法
2016/11/03 PHP
PHP实现Redis单据锁以及防止并发重复写入
2018/04/10 PHP
PHP使用gearman进行异步的邮件或短信发送操作详解
2020/02/27 PHP
js 判断checkbox是否选中的实现代码
2010/11/23 Javascript
jQuery 过滤方法filter()选择具有特殊属性的元素
2014/06/15 Javascript
JS实现当前页居中分页效果的方法
2015/06/18 Javascript
sencha ext js 6 快速入门(必看)
2016/06/01 Javascript
JS点击某个图标或按钮弹出文件选择框的实现代码
2016/09/27 Javascript
Javascript 实现微信分享(QQ、朋友圈、分享给朋友)
2016/10/21 Javascript
原生Javascript插件开发实践
2017/01/18 Javascript
解决Nodejs全局安装模块后找不到命令的问题
2018/05/15 NodeJs
详解Vue组件插槽的使用以及调用组件内的方法
2018/11/13 Javascript
浅谈Vue.js之初始化el以及数据的绑定说明
2019/11/14 Javascript
JavaScript进阶(一)变量声明提升实例分析
2020/05/09 Javascript
详解React 条件渲染
2020/07/08 Javascript
Element-ui 自带的两种远程搜索(模糊查询)用法讲解
2021/01/29 Javascript
[01:21:07]EG vs Liquid 2018国际邀请赛淘汰赛BO3 第一场 8.25
2018/08/29 DOTA
[01:26]神话结束了,却也刚刚开始——DOTA2新英雄玛尔斯驾临战场
2019/03/10 DOTA
[01:04:09]DOTA2-DPC中国联赛 正赛 iG vs VG BO3 第二场 2月2日
2021/03/11 DOTA
python实现无证书加密解密实例
2014/10/27 Python
CSS3实现圆角、阴影、透明效果并兼容各大浏览器
2014/08/08 HTML / CSS
Html5+JS实现手机摇一摇功能
2015/04/24 HTML / CSS
Redbubble法国:由独立艺术家设计的独特产品
2019/01/08 全球购物
商场总经理岗位职责
2014/02/03 职场文书
岗位标兵事迹材料
2014/05/17 职场文书
八一建军节营销活动方案
2014/08/31 职场文书
大学团日活动新闻稿
2014/09/10 职场文书
党委书记群众路线对照检查材料思想汇报
2014/10/04 职场文书
公司股东出资证明书
2014/11/01 职场文书
预防艾滋病宣传活动总结
2015/05/09 职场文书
红色电影观后感
2015/06/18 职场文书
2015年物业公司保洁工作总结
2015/10/22 职场文书
Python实现单例模式的5种方法
2021/06/15 Python
mysql 直接拷贝data 目录下文件还原数据的实现
2021/07/25 MySQL