欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

关于对象深层级的拷贝

程序员文章站 2022-05-20 19:45:39
...

今天合并个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)

关于对象深层级的拷贝

相关标签: 前端 es6/es7