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 相关文章推荐
关于使用 jBox 对话框的提交不能弹出问题解决方法
Nov 07 Javascript
jquery比较简洁的软键盘特效实现方法
Mar 19 Javascript
jquery实现的回旋滚动效果完整实例【附demo源码下载】
Sep 20 Javascript
JS前端笔试题分析
Dec 19 Javascript
详解webpack 入门总结和实践(按需异步加载,css单独打包,生成多个入口文件)
Jun 20 Javascript
Vue 多层组件嵌套二种实现方式(测试实例)
Sep 08 Javascript
js判断节假日实例代码
Dec 27 Javascript
vue打包的时候自动将px转成rem的操作方法
Jun 20 Javascript
vue-image-crop基于Vue的移动端图片裁剪组件示例
Aug 28 Javascript
Openlayers实现点闪烁扩散效果
Sep 24 Javascript
jquery插件实现代码雨特效
Apr 24 jQuery
vscode中使用npm安装babel的方法
Aug 02 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中使用redis
2013/11/04 PHP
php新浪微博登录接口用法实例
2014/12/23 PHP
全新Mac配置PHP开发环境教程
2016/02/03 PHP
jquery 1.3.2 IE8中的一点点的小问题解决方法
2009/07/10 Javascript
使用jQuery同时控制四张图片的伸缩实现代码
2013/04/19 Javascript
JQuery筛选器全系列介绍
2013/08/27 Javascript
在每个匹配元素的外部插入新元素的方法
2013/12/20 Javascript
JS动态修改iframe内嵌网页地址的方法
2015/04/01 Javascript
不依赖Flash和任何JS库实现文本复制与剪切附源码下载
2015/10/09 Javascript
jQuery实现图片预加载效果
2015/11/27 Javascript
浅析Nodejs npm常用命令
2016/06/14 NodeJs
JS实现Ajax的方法分析
2016/12/20 Javascript
bootstrapValidator 重新启用提交按钮的方法
2017/02/20 Javascript
深入理解Vue.js源码之事件机制
2017/09/27 Javascript
jQuery简单实现向列表动态添加新元素的方法示例
2017/12/25 jQuery
MockJs结合json-server模拟后台数据
2020/08/26 Javascript
微信小程序云函数添加数据到数据库的方法
2020/03/04 Javascript
在Vue 中实现循环渲染多个相同echarts图表
2020/07/20 Javascript
vue中使用vue-pdf的方法详解
2020/09/05 Javascript
Node使用koa2实现一个简单JWT鉴权的方法
2021/01/26 Javascript
Python中输出ASCII大文字、艺术字、字符字小技巧
2015/04/28 Python
Python中的pass语句使用方法讲解
2015/05/14 Python
Python实现程序的单一实例用法分析
2015/06/03 Python
python读取视频流提取视频帧的两种方法
2020/10/22 Python
Python实现去除图片中指定颜色的像素功能示例
2019/04/13 Python
Python爬取豆瓣视频信息代码实例
2019/11/16 Python
如何理解Python中包的引入
2020/05/29 Python
建议书标准格式
2014/03/12 职场文书
公司管理建议书范文
2014/03/12 职场文书
幼儿园招生广告
2014/03/19 职场文书
外语专业毕业生自荐信
2014/04/14 职场文书
纠纷协议书
2014/04/16 职场文书
借款协议书范本
2014/04/22 职场文书
社区精神文明建设汇报材料
2014/08/17 职场文书
大学生党性分析材料
2014/12/19 职场文书
办公室禁烟通知
2015/04/23 职场文书