JS之深浅拷贝

概念

浅拷贝：是对原始对象属性值进行一份精确拷贝（简单来说就是只复制一层属性）。如果属性是基本类型，拷贝的就是基本类型的值，如果属性是引用类型，拷贝的就是内存地址 。所以浅拷贝只是复制指向对象的指针，而不是复制对象本身。新对象与原对象共享一个内存，如果其中一个对象改变了这个地址，就会影响到另一个对象。

深拷贝：将一个对象从内存中完整的拷贝一份出来，从堆内存中开辟一个新的区域存放新对象，新对象与原对象不共享内存，且修改新对象不会影响原对象。

以下的图能够清晰解释深拷贝和浅拷贝的区别：

总结：从图中可以看出，深浅拷贝在拷贝前后对基本数据类型不影响，浅拷贝在拷贝引用类型数据时，拷贝的不是值，而是内存地址。

赋值，深浅拷贝的区别（前提是针对引用类型）

赋值其实类似于浅拷贝。如果将一个对象赋值给一个新的变量时，赋的其实是该对象的在栈中的地址，而不是堆中的数据。如果改变了其中一个对象的内容，另一个也会变，他们改的是同一个存储空间的内容。

let obj1 = {
  basicType : 'one',
  referenceType : [1,[2,3],4],
};
let obj2 = obj1;
obj2.basicType = 'two';
obj2.referenceType[1] =[5,6,7] ;
console.log(obj1);  // { basicType : 'one', referenceType: [ 1, [ 5, 6, 7 ], 4 ] }
console.log(obj2);  // { basicType : 'two', referenceType: [ 1, [ 5, 6, 7 ], 4 ] }

JS中浅拷贝的一些方法

1. slice()方法：原本是用来截取数组的部分形成新数组。如果截取原数组的全部就是一次浅拷贝
2. concat()方法：原本用于连接两个数组。如果原数组连接自己就是一次浅拷贝。
3. es6的扩展运算符
4. Object.assign()

let arr1 = [1, 2, [3, 4]];
let arr2 = arr1.slice();
let arr3 = arr1.concat();

arr1[2][0] = 5;
arr2[1] = 6;
console.log(arr1); // [1, 2, [5, 4]];
console.log(arr2); // [1, 6, [5, 4]];
console.log(arr3); // [1, 2, [5, 4]];

JS中深拷贝的一些方法

1. JSON.parse(JSON.stringify())

let arr1 = [1, 3, {username: ' zhou'}];
let arr2 = JSON.parse(JSON.stringify(arr));
arr2[2].username = 'jennifer';
console.log(arr1); // [1, 3, {username: ' zhou'}]
console.log(arr2); // [1, 3, {username: ' jennifer'}]

注意：此方法不能处理函数或者正则，通过此方法处理后的函数和正则会变为null。

2. lodash中的cloneDeep()方法

手写一个深拷贝（待修改：weakMap()）

深拷贝主要通过递归实现，遇到typeof为对象的进行循环，直到最里面那层也是基本数据类型，开始复制。

let obj1 = {
  name : 'zhou',
  arr : [1, [2, 3], 4],
};

let obj2 = deepClone(obj1);
obj2.name = 'jenifer';
obj2.arr[1] = [5,6,7] ;

function deepClone(obj) {
  // 遇到null或者undefined直接返回，不拷贝
  if (obj === null) return obj;
  if (obj === undefined) return obj;
  // 处理时间对象
  if (obj instanceof Date) return new Date(obj);
  // 处理正则
  if (obj instanceof RegExp) return new RegExp(obj);
  // 如果不是对象，是基本类型，直接返回
  if (typeof obj !== "object") return obj;
  // 得到obj的对象类型
  let cloneObj = new obj.constructor();
  // Reflect.ownKeys可以获取Symbol类型的key
  for (let key in Reflect.ownKeys(obj)) {
    // 判读是否是非继承来的，属于自身特定的属性
    if (obj.hasOwnProperty(key)) {
       cloneObj[key] = deepClone(obj[key]);
    }
  }
  return cloneObj;
}

console.log(obj1); // { name: 'zhou', arr: [ 1, [ 2, 3 ], 4 ] }
console.log(obj2); // { name: 'jennifer', arr: [ 1, [ 5, 6, 7 ], 4 ] }