js——浅拷贝和深拷贝

一、浅拷贝

浅拷贝：拷贝的是地址

常见方法：

1.拷贝对象:0bject.assgin()/展开运算符 {...obj}拷贝对象

2.拷贝数组:Array.prototype.concat()或者[...arr]

  <script>
    const obj = {
      uname: 'yan',
      age: 22,
      family: {
        sister: 'yu'
      }
    }
    // 浅拷贝  如果是简单数据类型拷贝值，引用数据类型拷贝的是地址(简单理解:如果是单层对象，没问题，如果有多层就有问题)
    // 
    // ...obj 
    // const o = { ...obj }
    // console.log(o);
    // o.age = 20
    // console.log(o);
    // console.log(obj);

    // Object.assign
    const o1 = {}
    Object.assign(o1, obj)
    o1.age = 18
    o1.family.sister = 'xin'
    console.log(o1);
    console.log(obj);
  </script>

总结：

1.直接赋值和浅拷贝有什么区别?

直接赋值的方法，只要是对象，都会相互影响，因为是直接拷贝对象栈里面的地址

浅拷贝如果是一层对象，不相互影响，如果出现多层对象拷贝还会相互影响

2.浅拷贝怎么理解?

拷贝对象之后，里面的属性值是简单数据类型直接拷贝值

如果属性值是引用数据类型则拷贝的是地址

二、深拷贝

深拷贝：拷贝的是对象，不是地址

常见方法：

1.通过递归实现深拷贝

2.lodash/cloneDeep

3.通过JSON.stringify()实现

下面介绍一下几种方法：

（1）利用递归

函数递归:
如果一个函数在内部可以调用其本身，那么这个函数就是递归函数

· 简单理解:函数内部自己调用自己,这个函数就是递归函数
· 递归函数的作用和循环效果类似
· 由于递归很容易发生“栈溢出”错误(stackoverflow)，所以必须要加退出条件 

<script>
    const obj = {
      uname: 'yan',
      age: 22,
      hobby: ['唱歌', '跳舞'],
      family: {
        sister: 'yu'
      }
    }
    const o = {}
    // 深拷贝需要用到函数递归，新对象修改不会影响旧对象
    function deepCopy(newObj, oldObj) {
      for (let k in oldObj) {
        // 处理数组问题：利用递归函数取出数组再次遍历  注意:一定先写数组，再写对象
        if (oldObj[k] instanceof Array) {
          newObj[k] = []
          // newObj[k] 接受空数组[]
          // oldObj[k] ['唱歌', '跳舞']
          deepCopy(newObj[k], oldObj[k])
          // 处理对象问题
        } else if (oldObj[k] instanceof Object) {
          newObj[k] = {}
          deepCopy(newObj[k], oldObj[k])
        } else {
          // k 属性名   oldObj[k]属性值
          // newObj[k] === o.uname
          newObj[k] = oldObj[k]
        }

      }
    }
    deepCopy(o, obj)  //函数调用  俩参数 o新对象  obj旧对象
    o.hobby[0] = '编程'
    o.family.sister = 'xin'
    console.log(o);
    console.log(obj);
  </script>

（2）利用lodash：引入js库 lodash

<script src="./lodash.min.js"></script>
  <script>
    const obj = {
      uname: 'yan',
      age: 22,
      hobby: ['唱歌', '跳舞'],
      family: {
        sister: 'yu'
      }
    }
    const o = _.cloneDeep(obj)
    console.log(o);
  </script>

（3）利用JSON

<script>
    const obj = {
      uname: 'yan',
      age: 22,
      hobby: ['唱歌', '跳舞'],
      family: {
        sister: 'yu'
      }
    }
    // 把对象转换为JSON字符串
    const o = JSON.parse(JSON.stringify(obj))
    o.family.sister = 'xin'
    console.log(o);
    console.log(obj);
  </script>

总结：

实现深拷贝三种方式?

自己利用递归函数书写深拷贝

利用js库 lodash里面的_.cloneDeep()

利用JSON字符串转换