快捷導(dǎo)航

JavaScript實(shí)現(xiàn)JSON合并操作示例【遞歸深度合并】

更新時間：2018年09月07日 16:48:29 作者：黃努努

這篇文章主要介紹了JavaScript實(shí)現(xiàn)JSON合并操作,結(jié)合實(shí)例形式分析了javascript基于遞歸深度實(shí)現(xiàn)json合并操作相關(guān)實(shí)現(xiàn)技巧與注意事項(xiàng),需要的朋友可以參考下

本文實(shí)例講述了JavaScript實(shí)現(xiàn)JSON合并操作。分享給大家供大家參考，具體如下：

為什么我會想到寫這幾行代碼

在實(shí)際工作中，我們會使用許多或自主開發(fā)或第三方的工具，有些工具的配置文件相當(dāng)細(xì)節(jié)，使用頻率低倒也罷了，使用頻率高的話必然造成很多代碼冗余。所以我都會對這些工具做二次封裝，把不經(jīng)常改動的配置給予默認(rèn)值。如果需要改動，傳入新的配置覆蓋原來的配置即可。

起初我以為這是一項(xiàng)很簡單的需求

var json1 = {  // 固定的配置
 a: 1,
 b: 2,
 c: 3,
}
var json2 = {  // 作為參數(shù)傳入的配置
 a: 11,
 d: 14,
}
json3 = {  // 合并后的結(jié)果
 a: 11,
 b: 2,
 c: 3,
 d: 14,
}

如上述，確實(shí)很簡單?？墒聦?shí)是，當(dāng)配置不再是僅僅一層嵌套時，常用的合并如$.extend，for in 賦值就不再能再解決問題了

var json1 = {
 a: 1，
 b: {
  b1: 'hello',
  b2: 'world',
 },
}
var json2 = {
 b: { b2: 'china' },
 c: 3,
}
json3 = {  // 合并后的結(jié)果
 a: 1,
 b: { b2: 'chila' },
 c: 3,
}

可以看出，我們的本意是希望json2里的b.b2: 'china'取代json1里的b.b2: 'world', 可是實(shí)際上，常規(guī)的結(jié)果只會把整個object/json取代，而不會去遍歷其中的屬性，在本例中導(dǎo)致了b.b1的丟失。

于是就有了如下幾行代碼：

// 遇到相同元素級屬性，以后者（main）為準(zhǔn)
// 不返還新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 遞歸調(diào)用，并且與函數(shù)名解耦
   arguments.callee(minor[key], main[key]);
  }
 }
}
// 附上工具
function isJSON(target) {
 return typeof target == "object" && target.constructor == Object;
}

雖然只有十幾行的代碼，但還是挺實(shí)用。粗略的挖掘了一下搜索引擎，好像并沒有更合適解決問題的代碼。簡單的遞歸思想和argument.callee琢磨一下也是有些味道的

PS：這里再為大家推薦幾款相關(guān)的json在線工具供大家參考：

在線JSON代碼檢驗(yàn)、檢驗(yàn)、美化、格式化工具：
http://tools.jb51.net/code/json

JSON在線格式化工具：
http://tools.jb51.net/code/jsonformat

在線XML/JSON互相轉(zhuǎn)換工具：
http://tools.jb51.net/code/xmljson

json代碼在線格式化/美化/壓縮/編輯/轉(zhuǎn)換工具：
http://tools.jb51.net/code/jsoncodeformat

在線json壓縮/轉(zhuǎn)義工具：
http://tools.jb51.net/code/json_yasuo_trans

希望本文所述對大家JavaScript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: