深浅拷贝详解以及代码实战

首先我们要了解深浅拷贝，那么我们必须先了解一下赋值的概念

那么什么叫赋值呢，他和深浅拷贝有什么区别

赋值：

//当我们吧一个对象赋值给一个新的变量的时候，赋予其实是该对象在栈中的地址，而不是堆中的数据，因此两个对象指向的是同一个存储空间，无论对象发生改变，都是改变的储存空间的内容，因此，两个对象是联动的。即他们两个其中一个发生变化，另外一个也会变化
  let person = {
    name: '候老师',
    hobby: ['学习', ['看电影', '打游戏']]
  }
  let person1 = person
  person1.name = '道长'
  person1.hobby[0] = '打游戏'
  console.log(person);//这里不管是person 还是person1 他们都变了
  console.log(person1);

浅拷贝：

//重新在堆中创建内存，拷贝前后对象的基本数据类型互不影响，但拷贝前后对象的引用类型因为共享一块内存，会相互影响。
  function copy(obj) {
    var target = {}
    for (const item in obj) {
      // hasOwnProperty判断他有这个属性的时候，对他进行一个赋值操作
      if (obj.hasOwnProperty(item)) {
        target[item] = obj[item]
        //obj的key值
        console.log(item);
        // obj的value值
        console.log(obj[item]);
      }
    }
    return target
  }

  let person1 = copy(person)
  person1.name = '道长' //person的name  
  person1.hobby[0] = '打游戏' // person的hobby内容变了
  console.log(person);
  console.log(person1);

深拷贝

//从堆内存中开辟一个新的区域存放新对象，对对象中的子对象进行递归拷贝，拷贝前后两个对象互不影响
  function deepClone(obj) {
    let targets = {}
    for(let i in obj){
      if(obj === null) return obj
      if(obj instanceof Date) return new Date(obj)
      if(obj instanceof RegExp) return new RegExp(obj)
      if(typeof obj !== 'object') return obj
      if(obj.hasOwnProperty(i)){
        targets[i] = deepClone(obj[i])
      }
    }
    return targets
  }
  let person1 = deepClone(person)
  person1.name = '道长'
  person1.hobby[0] = '打游戏'
  console.log(person);
  console.log(person1);