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

站长资源 2024/11/26 佚名

33 1538 33

DDR爱好者之家 Design By 杰米

本文实例讲述了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,
}

如上述，确实很简单。可事实是，当配置不再是仅仅一层嵌套时，常用的合并如$.extend，for 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程序设计有所帮助。

JavaScript,JSON合并,递归深度合并

DDR爱好者之家 Design By 杰米

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

DDR爱好者之家 Design By 杰米

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

暂无评论...

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

详解Ubuntu安装angular-cli遇到的坑

Bootstrap-table使用footerFormatter做统计列功能

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

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

更新日志

友情链接