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 相关文章推荐
Javascript 学习笔记 错误处理
Jul 30 Javascript
jQuery timers计时器简单应用说明
Oct 28 Javascript
JSON.stringify 语法实例讲解
Mar 14 Javascript
js简易namespace管理器 实例代码
Jun 21 Javascript
javascript放大镜效果的简单实现
Dec 09 Javascript
js判断undefined类型示例代码
Feb 10 Javascript
基于JavaScript代码实现兼容各浏览器的设为首页和加入收藏
Jan 07 Javascript
vue实现app页面切换动画效果实例
May 23 Javascript
Vue 实现拖动滑块验证功能(只有css+js没有后台验证步骤)
Aug 24 Javascript
在小程序Canvas中使用measureText的方法示例
Oct 19 Javascript
Layer组件多个iframe弹出层打开与关闭及参数传递的方法
Sep 25 Javascript
文章或博客自动生成章节目录索引(支持三级)的实现代码
May 10 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&mysql(三)
2006/10/09 PHP
解析crontab php自动运行的方法
2013/06/24 PHP
php 判断服务器操作系统的类型
2014/02/17 PHP
Laravel获取所有的数据库表及结构的方法
2019/10/10 PHP
javascript while语句和do while语句的区别分析
2007/12/08 Javascript
写给想学习Javascript的朋友一点学习经验小结
2010/11/23 Javascript
关于JavaScript中原型继承中的一点思考
2012/07/25 Javascript
js和html5实现手机端刮刮卡抽奖效果完美兼容android/IOS
2013/11/18 Javascript
使用js判断TextBox控件值改变然后出发事件
2014/03/07 Javascript
JavaScript闭包实例讲解
2014/04/22 Javascript
jQuery Easyui快速入门教程
2016/08/21 Javascript
详解Bootstrap的iCheck插件checkbox和radio
2016/08/24 Javascript
AngularJS 单元测试(一)详解
2016/09/21 Javascript
Bootstrap基本插件学习笔记之模态对话框(16)
2016/12/08 Javascript
利用JavaScript实现拖拽改变元素大小
2016/12/14 Javascript
javascript事件捕获机制【深入分析IE和DOM中的事件模型】
2016/12/15 Javascript
微信小程序引入模块中wxml、wxss、js的方法示例
2019/08/09 Javascript
KnockoutJS数组比较算法实例详解
2019/11/25 Javascript
基于canvas实现手写签名(vue)
2020/05/21 Javascript
React实现轮播效果
2020/08/25 Javascript
python3中的md5加密实例
2018/05/29 Python
在python中利用GDAL对tif文件进行读写的方法
2018/11/29 Python
Python3 安装PyQt5及exe打包图文教程
2019/01/08 Python
python的mysql数据库建立表与插入数据操作示例
2019/09/30 Python
python读取word 中指定位置的表格及表格数据
2019/10/23 Python
Python实现隐马尔可夫模型的前向后向算法的示例代码
2019/12/31 Python
CSS3线性渐变简单实现以及该属性在浏览器中的不同
2012/12/12 HTML / CSS
Html5 Canvas动画基础碰撞检测的实现
2018/12/06 HTML / CSS
国际贸易毕业生自荐书
2014/06/22 职场文书
小学关爱留守儿童活动方案
2014/08/25 职场文书
高中生第一学年自我鉴定
2014/09/12 职场文书
消防验收申请报告
2015/05/15 职场文书
送给小学生的暑假礼物!小学生必背99首古诗
2019/07/02 职场文书
Python机器学习算法之决策树算法的实现与优缺点
2021/05/13 Python
pandas中关于apply+lambda的应用
2022/02/28 Python
Mysql使用全文索引(FullText index)的实例代码
2022/04/03 MySQL