对于浅拷贝和深拷贝的理解

1. 深拷贝

深拷贝指的是拷贝对象的具体内容,内存地址是自主分配的,拷贝结束之后两者虽然存储的值一样,但是内存地址不一样,两个对象页互不影响。浅拷贝是会在栈中开辟内存空间存储值。

浅拷贝的方法:
(1)ES6的展开运算符
   const arr = [1,2,3,4]
   const obj = {name:"张三",age:12}
   const newArr = [...arr]
   const newObj = {...obj}
   console.log(newArr) // [1, 2, 3, 4]
   console.log(newObj) // {name: '张三', age: 12}
(2)Object.assign(目标对象,拷贝源)
    /*
        Object.assign(target,sources)
        第一个参数:目标对象 ( 拷贝到的对象 )
        第二个参数:拷贝源 ( 要被拷贝的原对象 )
    */
     const obj = { name: '张三', age: 10 }
     const arr = [1, 2, 3]
     const newObj = Object.assign({}, obj)
     const newArr = Object.assign([], arr)
     console.log(newObj) // {name: '张三', age: 10}
     console.log(newArr) // [1, 2, 3]
(3)使用浅拷贝来拷贝对象里面还有对象的数据时产生的影响
    /*
           如果对象里面有引用数据类型( 就是对象里面包含了对象 ),使用浅拷贝,
           那么修改了拷贝出来的对象,会导致原对象也被修改了
    */
    const obj = {
        name: '张三',
        age: 10,
        info: {
          address: '湖北',
          postcode: '430000',
        },
     }
     const newObj = { ...obj }
     // 如果修改了对象里面的引用数据类型的数据,会导致原对象也被修改
     newObj.info.postcode = '410000'
     console.log(newObj.info) // {address: '湖北', postcode: '410000'
     console.log(obj.info)   // {address: '湖北', postcode: '410000'}

2. 浅拷贝

浅拷贝是指对内存地址的复制,让目标对象和源对象指向同一片内存空间。深拷贝是在堆内存中开辟一个新的区域存放新对象,且修改新对象不会影响原对象。

深拷贝的方法
(1)利用序列化与反序列化实现 JSON.parse(JSON.stringify(sources))
      /*
           如果对象里面有引用数据类型( 就是对象里面包含了对象 ),使用深拷贝,
           那么修改了拷贝出来的对象,不会导致原对象也被修改了
      */
      const obj = {
        name: '张三',
        age: 10,
        info: {
          address: '湖北',
          postcode: '430000',
        },
      }

      const newObj = JSON.parse(JSON.stringify(obj))
      newObj.info.postcode = '410000'
      console.log(newObj.info) // {address: '湖北', postcode: '410000'}
      console.log(obj.info) // {address: '湖北', postcode: '430000'}
(2)使用递归拷贝
      // object:要被拷贝的对象  hash默认创建一个空map
      function deepCopy(object, hash = new Map()) => {
      // 判断是否是引用数据类型,如果不是直接返回
        if (typeof object != 'object') return object
        // 判断 hash里面是否有这个key,如果有也返回
        if (hash.get(object)) {
          return object
        }
        // 能执行到这里的只有数组和对象
        // object.constructor指向构造函数本身,通过构造函数创建对象或者数组
        let container = new object.constructor()
        // 向map中存这个key,以后循环的时候如果这个key存在,那么就不在继续循环
        hash.set(object, container)
        for (let key in object) {
         // 如果 object是对象那么,这里的key表示对象的键
         // 如果是object是数组,那么key表示数组元素的下标
         // 然后这边递归调用,直到object里面没有引用数据类型,那么递归结束
          container[key] = deepCopy(object[key], hash)
        }
        // 最后返回 这个对象或者数组
        return container
      }
      
       const obj = {
        name: '张三',
        info: {
          age: 10,
        },
      }
      const newObj = deepCopy(obj)
      newObj.info.age = 20
      console.log(newObj.info) // {address: '湖北', postcode: '410000'}
      console.log(obj.info)   // {address: '湖北', postcode: '410000'}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值