js 深拷贝

时间 2020-02-13

原文原文链接

ES6 可否使用Object.assign实现深浅拷贝？

答案：当对象中只有一级属性，没有二级属性的时候，此方法为深拷贝，可是对象中有对象的时候，此方法，在二级属性之后就是浅拷贝。数组

看例子：
1 普通变量数据结构

let obj={name:"zhangsan",colors:["red", "green", "blue"]};  
let obj2=Object.assign({},obj);  
obj2.name='wang';  
console.log(obj2);//name wang colors:["red", "green", "blue"]  
console.log(obj);//name zhangsan colors:["red", "green", "blue"]

结论：普通变量拷贝能够使用Object.assigncode

2 引用变量对象

let obj={name:"zhangsan",colors:["red", "green", "blue"]};  
let obj2=Object.assign({},obj);  
obj2.colors[0]='orange';  
console.log(obj2);//name zhangsan colors:["orange", "green", "blue"]  
console.log(obj);//name zhangsan colors:["orange", "green", "blue"]

结论：Object.assign对于含有引用类型值的对象没法深拷贝。递归

3 数组get

3.1 普通数组string

let colors = ['red','green','blue'];  
let colors2 = Object.assign([],colors);  
colors2[0] = "orange";  
console.log(colors2);//['orange','green','blue']  
console.log(colors);//['red','green','blue']

结论：普通数组拷贝能够使用Object.assignio

3.2 含有引用类型的值的数组console

let colors=['red','green','blue',['football','basketball','volleyball']];  
let colors2=Object.assign([],colors);  
colors2[3][0]="ping-pang";  
console.log(colors2);//['red','green','blue',['ping-pang','basketball','volleyball']]  
console.log(colors);//['red','green','blue',['ping-pang','basketball','volleyball']]

结论：和上面同样，若是一维数组里面有引用类型的值，则没法深拷贝。function

如何实现深拷贝？

1 数据结构中不包含引用类型

使用Object.assign(),{...obj}等效

2 数据结构中包含引用类型，符合JSON规则（不包含functon）

直接使用：JSON.parse(JSON.stringify({xxx:'xxx}))，简单粗暴~~~~ .

3 数据结构中既有引用类型，又有function

1 经过jQuery的extend方法实现深拷贝，可是估计较少人使用jQuery了
2 lodash.cloneDeep()实现深拷贝

let obj1 = {
    a: 1,
    b: { f: { g: 1 } },
    c: [1, 2, 3]
};
let obj2 = _.cloneDeep(obj1);

3 使用递归的方式实现深拷贝

function _deepClone(source) {
  let target;
  if (typeof source === 'object') {
    target = Array.isArray(source) ? [] : {}
    for (let key in source) {
      if (source.hasOwnProperty(key)) {
        if (typeof source[key] !== 'object') {
          target[key] = source[key]
        } else {
          target[key] = _deepClone(source[key])
        }
      }
    }
  } else {
    target = source
  }
  return target
}