js深浅拷贝

Posted 2020-12-16 returnvalue

写在前面：关于深浅拷贝，首先要理解一点，深浅拷贝都是针对引用数据类型而言的（Array、Object）。

浅拷贝

浅拷贝的意思是只复制对象的引用地址，并未复制真正的值。

  //声明一个对象，一个数组
  let obj = {a:"aa",b:"bb"}
  let array = [1,2]
  //分别定义一个新对象、新数组，将上面定义的对象和数组拷贝给新定义的对象和数组
  let cloneObj = obj;
  let cloneArray = array;

  //给拷贝后的对象增加一个属性c，给拷贝后的数组增加一个元素3
  cloneObj.c = "cc";
  cloneArray.push(3)

  console.log(obj)  //{a:"aa",b:"bb",c:"cc"}
  console.log(cloneObj) //{a:"aa",b:"bb",c:"cc"}
  console.log(array)  //[1,2,3]
  console.log(cloneArray) //[1,2,3]

从上面的代码可以看得出来，修改拷贝后的对象或者数组，会同时改变原数组和原对象的值。

深拷贝

深拷贝就是对目标的完全拷贝，不像浅拷贝那样只是复制了一层引用，连堆中的地址也是重新拷贝一份，不管修改谁，对另外一个也不会造成影响。

目前用的比较多的方法有两个

1.JSON.parse(JSON.stringify(obj));

 

  //声明一个对象，一个数组
  let obj = {a:"aa",b:"bb"}
  let array = [1,2]
  //分别定义一个新对象、新数组，将上面定义的对象和数组拷贝给新定义的对象和数组
  let cloneObj = JSON.parse(JSON.stringify(obj)) ;
  let cloneArray = JSON.parse(JSON.stringify(array));

  //给拷贝后的对象增加一个属性c，给拷贝后的数组增加一个元素3
  cloneObj.c = "cc";
  cloneArray.push(3)

  console.log(obj)  //{a:"aa",b:"bb"}
  console.log(cloneObj) //{a:"aa",b:"bb",c:"cc"}
  console.log(array)  //[1,2]
  console.log(cloneArray) //[1,2,3]

2.loadash的cloneDeep方法。loadash是一个工具库,感兴趣的同学可以去看一下loadash的Api，这里就不做赘述了。