關於對象深層級的拷貝

今天合併個echarts屬性的代碼,優先使用頁面級的配置。這裏就涉及到了對象的合併,但是自定義配置不能層級關係肯定一致,有時僅需要配置某一個屬性即可。
最開始使用瞭解構賦值,後來發現結構賦值和Object.assign()均無法實現需求,多層級且結構不一的情況下,後面的對象會覆蓋前面的。如下例中的value2,均被覆蓋。
所以使用最下方自定義的方法,依次遍歷賦值最靠譜,可以直接誒複製代碼在控制檯操作查看結果。

es6 Object.assign()

Object.assign(
{},
{ a : { a2 : { value : 1, value2 :1 } }, b2 : '123' } ,
{ a : { a2 : { value : 2 } }, b2: '456' } 
)
// 結果
{
  "a": {
    "a2": {
      "value": 2
    }
  },
  "b2": "456"
}

在這裏插入圖片描述

es6 …解構賦值

{ 
...{ a : { a2 : { value : 1, value2 :1 } }, b2 : '123 '},
...{ a : { a2 : { value : 2 } }, b2: '456' } 
}
// 結果:
{
  "a": {
    "a2": {
      "value": 2
    }
  },
  "b2": "456"
}

在這裏插入圖片描述

深度合併結構

deepObjectMerge方法來自這裏

function deepObjectMerge(FirstOBJ, SecondOBJ) {
  for (var key in SecondOBJ) {
    FirstOBJ[key] = FirstOBJ[key] && FirstOBJ[key].toString() === '[object Object]'
      ? deepObjectMerge(FirstOBJ[key], SecondOBJ[key]) : FirstOBJ[key] = SecondOBJ[key]
  }
  return FirstOBJ
}
let m = { a : { a2 : { value : 1, value2 :1 } }, b2 : '123' }
let n = { a : { a2 : { value : 2 } }, b2: '456' } 
deepObjectMerge(m,n)
// 結果
{
  "a": {
    "a2": {
      "value": 2,
      "value2": 1
    }
  },
  "b2": "456"
}

在這裏插入圖片描述
在合併的兩個對象各有差異時,完美根據key值合併並返回了。

let m = { a : { a2 : { value : 1, value2 :1 } }, b2: '456' }
let n = { a : { a2 : { value : 2 }, a3:{value3: 1} }, b2: '4567' }
deepObjectMerge(m,n)

在這裏插入圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章