JavaScript实现JSON合并操作示例【递归深度合并】
本文实例讲述了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程序设计有所帮助。
相关文章
这篇文章主要介绍了php基于redis处理session的方法的相关资料,需要的朋友可以参考下2016-03-03
JavaScript中使用stopPropagation函数停止事件传播例子
这篇文章主要介绍了JavaScript中使用stopPropagation函数停止事件传播例子,即阻止事件冒泡的一个方法,需要的朋友可以参考下2014-08-08
这篇文章主要为大家详细介绍了JS返回顶部实例代码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-10-10
利用JavaScript在网页实现八数码启发式A*算法动画效果
这篇文章主要介绍了利用JavaScript在网页实现八数码启发式A*算法动画效果,需要的朋友可以参考下2017-04-04
这篇文章主要介绍了微信小程序如何实现五星评价功能,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-10-10
本文详细介绍了DOM的概念和常用操作，文档对象模型 (DOM) 是 HTML 和 XML 文档的编程接口。它提供了对文档的结构化的表述，并定义了一种方式可以使从程序中对该结构进行访问，从而改变文档的结构，样式和内容，感兴趣的朋友可以参考阅读本文2023-04-04
在本篇内容里小编给大家整理的是关于js逆向解密之网络爬虫的相关知识点内容，需要的朋友们参考下。2019-05-05
这篇文章主要介绍了JS 连接MQTT的使用方法,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-01-01
这篇文章主要介绍了自定义函数实现IE7与IE8不兼容js中trim函数的方法,涉及trim函数的重写与正则匹配的技巧,需要的朋友可以参考下2015-02-02
这篇文章主要为大家详细介绍了js实现京东快递单号查询，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
最新评论