原生JavaScript實(shí)現(xiàn)JSON合并(遞歸深度合并)

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

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

起初我以為這是一項很簡單的需求

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琢磨一下也是有些味道的

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末估灿,一起剝皮案震驚了整個濱河市拴孤,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌甲捏,老刑警劉巖演熟,帶你破解...
    沈念sama閱讀 219,188評論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異司顿,居然都是意外死亡芒粹,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,464評論 3 395
  • 文/潘曉璐 我一進(jìn)店門大溜,熙熙樓的掌柜王于貴愁眉苦臉地迎上來化漆,“玉大人,你說我怎么就攤上這事钦奋∽疲” “怎么了?”我有些...
    開封第一講書人閱讀 165,562評論 0 356
  • 文/不壞的土叔 我叫張陵付材,是天一觀的道長朦拖。 經(jīng)常有香客問我,道長厌衔,這世上最難降的妖魔是什么璧帝? 我笑而不...
    開封第一講書人閱讀 58,893評論 1 295
  • 正文 為了忘掉前任,我火速辦了婚禮富寿,結(jié)果婚禮上睬隶,老公的妹妹穿的比我還像新娘锣夹。我一直安慰自己,他們只是感情好苏潜,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,917評論 6 392
  • 文/花漫 我一把揭開白布银萍。 她就那樣靜靜地躺著,像睡著了一般恤左。 火紅的嫁衣襯著肌膚如雪贴唇。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,708評論 1 305
  • 那天赃梧,我揣著相機(jī)與錄音滤蝠,去河邊找鬼。 笑死授嘀,一個胖子當(dāng)著我的面吹牛物咳,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播蹄皱,決...
    沈念sama閱讀 40,430評論 3 420
  • 文/蒼蘭香墨 我猛地睜開眼览闰,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了巷折?” 一聲冷哼從身側(cè)響起压鉴,我...
    開封第一講書人閱讀 39,342評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎锻拘,沒想到半個月后油吭,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,801評論 1 317
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡署拟,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,976評論 3 337
  • 正文 我和宋清朗相戀三年婉宰,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片推穷。...
    茶點(diǎn)故事閱讀 40,115評論 1 351
  • 序言:一個原本活蹦亂跳的男人離奇死亡心包,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出馒铃,到底是詐尸還是另有隱情蟹腾,我是刑警寧澤,帶...
    沈念sama閱讀 35,804評論 5 346
  • 正文 年R本政府宣布区宇,位于F島的核電站娃殖,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏萧锉。R本人自食惡果不足惜珊随,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,458評論 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望柿隙。 院中可真熱鬧叶洞,春花似錦、人聲如沸禀崖。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,008評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽波附。三九已至艺晴,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間掸屡,已是汗流浹背封寞。 一陣腳步聲響...
    開封第一講書人閱讀 33,135評論 1 272
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留仅财,地道東北人狈究。 一個月前我還...
    沈念sama閱讀 48,365評論 3 373
  • 正文 我出身青樓,卻偏偏與公主長得像盏求,于是被迫代替她去往敵國和親抖锥。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,055評論 2 355

推薦閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 172,178評論 25 707
  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具(例如配置管理碎罚,服務(wù)發(fā)現(xiàn)磅废,斷路器,智...
    卡卡羅2017閱讀 134,664評論 18 139
  • 既不守諾,何必許諾憔购? 總有一些時候宫峦,會喜歡一個人安安靜靜的,戴上耳機(jī)倦始,放著熟悉的音樂斗遏,翻開一本能夠吸引自己的書,愜...
    星小影閱讀 1,154評論 0 2
  • 當(dāng)當(dāng)當(dāng)~ 本著發(fā)現(xiàn)新事物的樂趣鞋邑,俺利用閑暇零碎時間嘗試做了下面這個微店~ 稍等~稍等~ 我...
    果寶辛麗閱讀 393評論 0 0
  • 《抒》 一宅藏志居南山诵次; 終生抒臆遠(yuǎn)塵囂。
    自命飛皇Yoes閱讀 355評論 0 1