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

  function deepClone(obj) {
    let _obj = JSON.stringify(obj),
      objClone = JSON.parse(_obj);
    return objClone
  }

  let obj1 = {
    name: '李明',
    arrayList: [1, 2, [3, 4], 5],
    child: {
      name: '张三',
      years: 4
    }
  };
  let obj2 = deepClone(obj1);

  obj1.child.name = '小王';
  obj1.arrayList[2][0] = 10;

  console.log(obj1, obj2);

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

 function deepClone(obj) {
    let objClone = Array.isArray(obj) ? [] : {};
    if (obj && typeof obj === 'object') {
      for (key in obj) {
        if (obj.hasOwnProperty(key)) {
          if (obj[key] && typeof obj[key] === 'object') {
            objClone[key] = deepClone(obj[key]);
          } else {
            objClone[key] = obj[key];
          }
        }
      }
    }
    return objClone;
  }

  let obj1 = {
    name: '李明',
    arrayList: [1, 2, [3, 4], 5],
    child: {
      name: '张三',
      years: 4
    }
  };
  let obj2 = deepClone(obj1);

  obj1.child.name = '小王';
  obj1.arrayList[2][0] = 10;

  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