JS深拷贝与浅拷贝

一深拷贝与浅拷贝基本定义

浅拷贝(浅克隆)：直接将存储在栈中的值赋值给对应变量，如果是基本数据类型，则直接赋值对应的值，如果是引用类型，则赋值的是地址
深拷贝(深克隆)：就是把数据赋值给对应的变量，从而产生一个与源数据不相干的新数据(数据地址已变化)。深拷贝，是拷贝对象各个层级的属性

深拷贝与浅拷贝区别：引用类型保存的是内存地址，浅克隆操作的其实是共同的内存，所以深克隆主要就是判断对象属性的变量类型，然后进行层层复制基本数据类型。

一浅拷贝的方式：

方式1：数据直接赋值；

方式2：展开运算符（...）；

方式3：Object.assign()方法只能深拷贝对象第一层数据：

 let target = { a: 1, b: 2 };
  let source = { b: 4, c: 5, child: { name: 'liming' } };

  const returnedTarget = Object.assign(target, source);
  source.c = 6;
  source.child.name = 'zhangsan';
  console.log(returnedTarget, source);

二深拷贝的方式：

方法1：JSON.stringify 和 JSON.parse

 1   function deepClone(obj) {
 2     let _obj = JSON.stringify(obj),
 3       objClone = JSON.parse(_obj);
 4     return objClone
 5   }
 6 
 7   let obj1 = {
 8     name: '李明',
 9     arrayList: [1, 2, [3, 4], 5],
10     child: {
11       name: '张三',
12       years: 4
13     }
14   };
15   let obj2 = deepClone(obj1);
16 
17   obj1.child.name = '小王';
18   obj1.arrayList[2][0] = 10;
19 
20   console.log(obj1, obj2);

方法2：通过递归方式自定义：

 1  function deepClone(obj) {
 2     let objClone = Array.isArray(obj) ? [] : {};
 3     if (obj && typeof obj === 'object') {
 4       for (key in obj) {
 5         if (obj.hasOwnProperty(key)) {
 6           if (obj[key] && typeof obj[key] === 'object') {
 7             objClone[key] = deepClone(obj[key]);
 8           } else {
 9             objClone[key] = obj[key];
10           }
11         }
12       }
13     }
14     return objClone;
15   }
16 
17   let obj1 = {
18     name: '李明',
19     arrayList: [1, 2, [3, 4], 5],
20     child: {
21       name: '张三',
22       years: 4
23     }
24   };
25   let obj2 = deepClone(obj1);
26 
27   obj1.child.name = '小王';
28   obj1.arrayList[2][0] = 10;
29 
30   console.log(obj1, obj2);

总结：

JSON.parse(JSON.stringify(Obj))原理是通过将对象转化为字符串基本数据类型在进行赋值操作。该实现虽然简单但也有其弊端，具体可参考：https://blog.csdn.net/u013565133/article/details/102819929?utm_medium=distribute.pc_relevant.none-task-blog-title-1&spm=1001.2101.3001.4242