js对象的深拷贝和浅拷贝

什么是深拷贝，什么是浅拷贝，什么是赋值？

浅拷贝：只拷贝对象里面的数据，不拷贝对象里面的子对象。

深拷贝：会克隆出一个新数组，数据相同，但是引用地址不同（就是拷贝对象里的数据，而且拷贝对象里的子对象）

赋值：获得该对象的引用地址

浅拷贝：

1.concat和slice：实现对原数组的拷贝，不会改变原来的数组，返回一个修改后的新数组。

concat：

简单对象：

const originArray=[1,2,3,4,5];
const cloneArray=originArray.concat();
console.log(originArray===cloneArray);//false
cloneArray.push(6);//[1,2,3,4,5,6]
console.log(originArray);//[1,2,3,4,5]

多层对象：

const originArray=[1,[1,2,3],{a:1}];
const cloneArray=originArray.concat();
console.log(originArray===cloneArray);//false
cloneArray[1].push(4);
cloneArray[2].a=2;
console.log(originArray);//[1,[1,2,3,4],{a:2}]

修改数组 [1,2,3] 或对象 {a:1} 时，发现 originArray 也发生了变化，concat只是对数组的第一层进行深拷贝。

slice：

slice也是只对数组第一次进行浅拷贝

const arr = [1,2,3,4,5,6,7];
const arr1 = arr.slice(2,5);
console.log(arr1);//[3,4,5]

2.Object.assign()

Object.assign(target,...sources)方法是用来将源对象（source）的所有可枚举属性，复制到目标对象（target）。至少需要两个对象作为参数，第一个参数是目标对象，后面的参数是源对象。只要有一个参数不是对象，就会被抛出TypeError错。

let s ={name: {asd: '123'}}
let d = Object.assign({}, s)
d.name.asd = '123456789'
console.log(d, s);//{name:{asd: "123456789"}},{name:{asd: "123456789"}}

let o ={name: {asd: '123'}};
let p = Object.assign({}, o);
p.name = '123456789';
console.log(p, o);//{name: "123456789"},{name: {asd: "123"}}

Object.assign()用途：

合并对象：

let target = {a:1, b:2};
let source1 = {b:2, c:2};
let source2 = {c:3};
Object.assign(target, source1, source2)//{a:1,b:2,c:3}

复制对象：详见上边。

3.ES6中的拓展运算符（...）也是首层浅拷贝

const originArray=[1,2,3,4,5,[6,7,8]];
const originObj={a:1,b:{bb:1}};
const cloneArray=[...originArray];
cloneArray[0]=0;
cloneArray[5].push(9);
console.log(originArray);//[1,2,3,4,5,[6,7,8,9]]

const cloneObj={...originObj};
cloneObj.a=2;
cloneObj.b.bb=2;
console.log(originObj);//{a:1,b:{bb:2}}

深拷贝：完全拷贝一个新对象，修改时原对象不会受到任何影响。

①JSON.parse(JSON.stringify(obj))：性能最快，但是当值是函数，undefined或symbol时无法拷贝，例如下：

JSON.stringify是将一个javascript值转成字符串；

JSON.parse是将JSON字符串转成一个javascript值或对象。

const originObj = {
  name: 'axuebin',
  sayHello: function() {
    console.log('hello');
  }
}
console.log(originObj); // {name: "axuebin", sayHello: ƒ}
const cloneObj = JSON.parse(JSON.stringify(originObj));
console.log(cloneObj); // {name: "axuebin"}

发现在 cloneObj 中，有属性丢失了,undefined、function、

symbol 会在转换过程中被忽略。(如果对象中含有一个函数时（很常见），就不能用这个方法进行深拷贝)

②递归：进行逐一赋值（对每一层的数据都实现一次创建对象->对象赋值 的操作）

//深拷贝方法
function deepClone (source) {
  const targetObj = source.constructor === Array ? [] : {};//判断复制的目标是数组还是对象
  for (let keys in source) {//遍历目标
    if (source.hasOwnProperty(keys)) {
      if (source[keys] && typeof source[keys] === 'object') {
        //如果值是对象，就递归，有二级对象
        targetObj[keys] = source[keys].constructor === Array ? [] : {};
        targetObj[keys] = deepClone(source[keys]);
      } else { //如果不是，就直接赋值，只有一级对象
        targetObj[keys] = source[keys]
      }
    }
  }
  return targetObj;
}
//测试上边函数
const originObj = {a:'a',b:'b',c:[1,2,3],d:{dd:'dd'}};
const cloneObj = deepClone(originObj);
console.log(cloneObj === originObj); // false
 
cloneObj.a = 'aa';
cloneObj.c = [1,1,1];
cloneObj.d.dd = 'doubled';
 
console.log(cloneObj); // {a:'aa',b:'b',c:[1,1,1],d:{dd:'doubled'}};
console.log(originObj); // {a:'a',b:'b',c:[1,2,3],d:{dd:'dd'}};
//试一下带有函数：
const originObj = {
  name:'axuebin',
  sayHello:function(){
    console.log('Hello World');
  }
}
console.log(originObj); // {name: "axuebin", sayHello: ƒ}
const cloneObj = deepClone(originObj);
console.log(cloneObj); // {name: "axuebin", sayHello: ƒ}

总结：

赋值运算符=实现的是浅拷贝，只拷贝对象的引用值；

javascript中数组和对象自带的拷贝方法都是“首层浅拷贝”；

JSON.stringify实现的是深拷贝，但是对目标对象要求非undefined,function;

若想真正意义上的深拷贝，请递归。