JS中的深拷贝和浅拷贝浅析

JS中可以分为两种：

1、基本数据类型：包含字符串、数字、布尔值、null（空对象）和undefined（未赋值的初始化值）。

1、引用数据类型：包含对象、数组和函数。

使用常规方式对这两种类型的数据进行拷贝时有以下区别。

    let a1 = "as";
    let a2 = 123;
    let a3 = false;
    let b1 = a1;
    let b2 = a2;
    let b3 = a3;
    console.log(b1, "b1");//as b1
    console.log(b2, "b2");//123 'b2'
    console.log(b3, "b3");//false 'b3'
    a1 = "asd";
    a2 = 234;
    a3 = true;
    console.log(b1, "b1-changed");//as b1-changed
    console.log(b2, "b2-changed");//123 'b2-changed'
    console.log(b3, "b3-changed");//false 'b3-changed'

基本数据类型在拷贝时正常拷贝。

但是在深拷贝时会发生异常。

    let a1 = {a:1,b:2,c:3};
    let a2 = [1,2,3];
    let b1 = a1;
    let b2 = a2;
    console.log(b1, "b1");
    console.log(b2, "b2");
    a1.a = "asd";
    a2[0] = 234;
    console.log(b1, "b1-changed");
    console.log(b2, "b2-changed");

可以看到在拷贝基本数据类型时，修改原数据不影响拷贝后的数据。但是在拷贝引用数据类型的时候修改原数据时，拷贝后数据的也一起被修改了。

这里我们来明确一下深拷贝和浅拷贝的定义：

浅拷贝：创建一个新对象，这个对象有着原始对象属性值的一份精确拷贝。如果属性是基本类型，拷贝的就是基本类型的值，如果属性是引用类型，拷贝的就是内存地址 ，所以如果其中一个对象改变了这个地址，就会影响到另一个对象。

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

 简而言之，浅拷贝只复制指向某个对象的指针，而不复制对象本身，新旧对象还是共享同一块内存。但深拷贝会另外创造一个一模一样的对象，新对象跟原对象不共享内存，修改新对象不会改到原对象。

赋值和深/浅拷贝的区别

这三者的区别如下，不过比较的前提都是针对引用类型：

• 当我们把一个对象赋值给一个新的变量时，赋的其实是该对象的在栈中的地址，而不是堆中的数据。也就是两个对象指向的是同一个存储空间，无论哪个对象发生改变，其实都是改变的存储空间的内容，因此，两个对象是联动的。
• 浅拷贝：重新在堆中创建内存，拷贝前后对象的基本数据类型互不影响，但拷贝前后对象的引用类型因共享同一块内存，会相互影响。
• 深拷贝：从堆内存中开辟一个新的区域存放新对象，对对象中的子对象进行递归拷贝,拷贝前后的两个对象互不影响。

简析了原理之后来实现深拷贝 

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

    let arr_old = [1, 3, {
        username: ' kobe'
    }];
    let arr_new = JSON.parse(JSON.stringify(arr));
    arr_old[2].username = 'duncan'; 
    console.log(arr_old, arr_new)

 

这也是利用JSON.stringify将对象转成JSON字符串，再用JSON.parse把字符串解析成对象，一去一来，新的对象产生了，而且对象会开辟新的栈，实现深拷贝。

这种方法虽然可以实现数组或对象深拷贝,但不能处理函数和正则，因为这两者基于JSON.stringify和JSON.parse处理后，得到的正则就不再是正则（变为空对象），得到的函数就不再是函数（变为null）了。

2、手写递归方法

递归方法实现深度克隆原理：遍历对象、数组直到里边都是基本数据类型，然后再去复制，就是深度拷贝。

function deepClone(obj, hash = new WeakMap()) {
  if (obj === null) return obj; // 如果是null或者undefined我就不进行拷贝操作
  if (obj instanceof Date) return new Date(obj);
  if (obj instanceof RegExp) return new RegExp(obj);
  // 可能是对象或者普通的值  如果是函数的话是不需要深拷贝
  if (typeof obj !== "object") return obj;
  // 是对象的话就要进行深拷贝
  if (hash.get(obj)) return hash.get(obj);
  let cloneObj = new obj.constructor();
  // 找到的是所属类原型上的constructor,而原型上的 constructor指向的是当前类本身
  hash.set(obj, cloneObj);
  for (let key in obj) {
    if (obj.hasOwnProperty(key)) {
      // 实现一个递归拷贝
      cloneObj[key] = deepClone(obj[key], hash);
    }
  }
  return cloneObj;
}
let obj = { name: 1, address: { x: 100 } };
obj.o = obj; // 对象存在循环引用的情况
let d = deepClone(obj);
obj.address.x = 200;
console.log(d);

参考：如何写出一个惊艳面试官的深拷贝?