js深浅拷贝

什么是浅拷贝？

浅拷贝只拷贝js的基本数据类型（String、Number、Boolean、Null、Undefined、Symbol、Bigint），也就是说它只拷贝栈里面的数据，通俗来解释就是是只拷贝对象的最外一层。

列举两种简单的浅拷贝方式：

1.使用es6 Object.assign()方法实现浅拷贝

 const obj = {
        name: '詹主文',
        age: 30,
        hobby: ['上五楼', '唱', '跳', '哈啤酒', '摆烂'],
        occupation: '前端讲师',
        data: {
          uname: '五楼金牌讲师',
        },
      }
      const o = {}
      //注意  使用Object.assign方法时新对象在前，要拷贝的对象在后，位置不能颠倒。
      Object.assign(o, obj)

2.使用es6展开运算符

     const obj = {
        name: '詹主文',
        age: 30,
        hobby: ['上五楼', '唱', '跳', '哈啤酒', '摆烂'],
        occupation: '前端讲师',
        data: {
          uname: '五楼金牌讲师',
        },
      }
      
      //... 完活
      const o = {
          ...obj
      }

什么是深拷贝？

深拷贝就是无限层级拷贝对象，拷贝的新对象与旧对象互不影响。

手写一个简单的深拷贝（原理：理解面试需要）

//定义对象
      const obj = {
        name: '詹主文',
        age: 30,
        hobby: ['上五楼', '唱', '跳', '哈啤酒', '摆烂'],
        occupation: '前端讲师',
        data: {
          uname: '五楼金牌讲师',
        },
      }
      //定义空对象 用来存放拷贝的值
      const o = {}
      //创建递归函数
      function DeepCopyObj(newObj, oldObj) {
        //遍历旧对象
        for (let k in oldObj) {
          //单纯遍历旧对象只能拷贝对象中的简单数据类型
          //所以我们应该在这里在调一次函数让函数递归
          //注意：在递归的时候一定要先判断数组 在判断对象
          // 因为在使用 instanceof 判断的时候 数组也可以是对象 先判断数组避免一些不必要的bug
          //console.log([] instanceof Array)  true
          //console.log([] instanceof Object)  true
          if (oldObj[k] instanceof Array) {
            //判断如果是数组首先要把对象清空否则将无法拷贝 对象同理
            newObj[k] = []
            DeepCopyObj(newObj[k], oldObj[k])
          } else if (oldObj[k] instanceof Object) {
            newObj[k] = {}
            DeepCopyObj(newObj[k], oldObj[k])
          } else {
            newObj[k] = oldObj[k]
          }
        }
        //返回拷贝的新对象
        return newObj
      }

      // 调用函数
      DeepCopyObj(o, obj)
      o.name = 'zzw'
      o.data.uname = '打辅助的'
      o.hobby[0] = '上五楼是认真的'
      console.log(obj)
      console.log(o)

第三方库lodash（掌握）

const obj = {
      uname: 'zzw',
      age: 18,
      hobby: ['乒乓球', '足球'],
      family: {
        baby: '小zzw'
      }
    }
    const o = _.cloneDeep(obj)
    console.log(o)
    o.family.baby = '老zzw'
    console.log(obj)

使用JSON.parse(JSON.stringify())强转

 const obj = {
      uname: 'zzw',
      age: 18,
      hobby: ['乒乓球', '足球'],
      family: {
        baby: 'zzw'
      }
    }
    const o = JSON.parse(JSON.stringify(obj))
    o.hobby[0]='跳'
    o.family.baby='老zzw'
    console.log(o)
    console.log(obj)

jquery深拷贝 $.extend()方法

   const obj = {
        name: '詹主文',
        age: 30,
        hobby: ['上五楼', '唱', '跳', '哈啤酒', '摆烂'],
        occupation: '前端讲师',
        data: {
          uname: '五楼金牌讲师',
        },
      }
      const o = {}
      //$.extend第一个参数为true表示拷贝为深拷贝，第二个参数为要拷贝的新对象，第三个参数为将要被拷贝的对象
      $.extend(true, o, obj)

      o.name = 'zzw'
      o.hobby[0] = 'rep'
      console.log(obj)
      console.log(o)