深浅拷贝的方法

1.浅拷贝：拷贝的是地址

<script>
    // 浅拷贝如果是一层对象，不相互影响。如果是多层对象拷贝还是会相互影响
    const obj = {
      uname: '张三',
      age: 20
    }
    //  方法一
    // const newObj = {...obj}
    // newObj.age = 40
    // console.log(obj) //{uname: '张三', age: 20}
    // console.log(newObj) //{uname: '张三', age: 40}
    //  方法二
    const newObj = {}
    Object.assign(newObj, obj)
    newObj.age = 40
    console.log(obj) //{uname: '张三', age: 20}
    console.log(newObj) //{uname: '张三', age: 40}
  </script>

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

常见方法：

①通过递归实现拷贝

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

<script>
    let num = 1
    // fn就是递归函数
    function fn() {
      console.log('你好');
      if (num >= 6) {
        return
      }
      num++
      fn() //函数内部自己调用自己
    }
    fn()
  </script>

通过递归实现深拷贝（看看就行.....面试的时候容易问道，后面有更简单的方法）

<script>
    const obj = {
      uname: 'pink',
      age: 18,
      hobby: ['乒乓球', '足球'],
      family: {
        baby: '小pink'
      }
    }
    const o = {}
    // 拷贝函数
    function deepCopy(newObj, oldObj) {
      debugger
      for (let k in oldObj) {
        // 处理数组的问题  一定先写数组 在写 对象 不能颠倒
        if (oldObj[k] instanceof Array) {
          newObj[k] = []
          //  newObj[k] 接收 []  hobby
          //  oldObj[k]   ['乒乓球', '足球']
          deepCopy(newObj[k], oldObj[k])
        } else if (oldObj[k] instanceof Object) {
          newObj[k] = {}
          deepCopy(newObj[k], oldObj[k])
        }
        else {
          //  k  属性名 uname age    oldObj[k]  属性值  18
          // newObj[k]  === o.uname  给新对象添加属性
          newObj[k] = oldObj[k]
        }
      }
    }
    deepCopy(o, obj) // 函数调用  两个参数 o 新对象  obj 旧对象
    console.log(o)
    o.age = 20
    o.hobby[0] = '篮球'
    o.family.baby = '老pink'
    console.log(obj)
    console.log([1, 23] instanceof Object)
    // 复习
    // const obj = {
    //   uname: 'pink',
    //   age: 18,
    //   hobby: ['乒乓球', '足球']
    // }
    // function deepCopy({ }, oldObj) {
    //   // k 属性名  oldObj[k] 属性值
    //   for (let k in oldObj) {
    //     // 处理数组的问题   k 变量
    //     newObj[k] = oldObj[k]
    //     // o.uname = 'pink'
    //     // newObj.k  = 'pink'
    //   }
    // }
  </script>

②通过js库lodash里面cloneDeep内部实现了深拷贝

 <!-- 先引用js文件 -->
  <script src="../lodash.min.js"></script>
  <script>
    const obj = {
      uname: '张三',
      age: 18,
      hobby: ['篮球','足球'],
      family: {
        baby: '小宝宝'
      }
    }
    // _.cloneDeep（要被克隆的对象）
    const o = _.cloneDeep(obj)
    o.family.baby = '老宝宝'
    console.log(o) //family: {baby: '老宝宝'}
    console.log(obj) //family: {baby: '小宝宝'}
  </script>

3、通过JSON。stringify()实现

 <script>
    const obj = {
      uname: '张三',
      age: 18,
      hobby: ['篮球','足球'],
      family: {
        baby: '小宝宝'
      }
    }
   const o = JSON.parse(JSON.stringify(obj))
   o.family.baby = '老宝宝'
   console.log(o)   //family: {baby: '老宝宝'}
   console.log(obj) //family: {baby: '小宝宝'}
  </script>