JavaScript深拷贝和浅拷贝

  • 什么是深拷贝和浅拷贝?

    ​ JavaScript中变量大体上可分为基本类型(string、Boolean、undefined、number、null)和引用类型(Array、Object、function)两类。

    ​ 在写代码的时候我们可能需要在保留原数据的基础上得到经过某些处理或修改之后的值,通常我们的做法是拷贝一个新的数据,经过处理后,得到一个处理后的值且不影响原数据。但是如果被拷贝的数据是引用类型,可能会出现改变拷贝数据后,原数据也会被改变的情况,原因为使用的拷贝方法为浅拷贝,只是拷贝了指向真正存储引用类型数据的地址,修改拷贝数据的时候,实际修改的还是原数据,所以如果想要不影响原数据的效果应该使用深拷贝。

  • 深拷贝和浅拷贝的区别?

    ​ 深拷贝和浅拷贝的最大的区别就是,深拷贝除了拷贝指向存储引用类型数据的地址之外,还会申请一个新的内存地址,将对应数据存入这个新的内存地址,并修改指向引用类型数据的地址为新的内存地址。

    ​ 当我们需要使用某个对象的值,在修改时不想修改原对象;es6数组新增的map、filter等方法;暂存从服务器请求到的数据,页面设计到保存和取消请求到的数据等使用的都是深拷贝。

  • 深拷贝实现方式

    • 递归

      function deepClone(obj){
          let newobj = null;
          //typeof判断是不是应用类型,入参是否为null
          if(typeof(obj) == 'Object' && obj !== null){
              //instanceof判断是否为数组,正确初始化初始值
              newobj = obj instanceof Array ? [] : {};
              for(let i in obj){
                  //递归调用
                  newobj[i] = deepClone(obj[i]);
              }
          }else{
              newobj = obj;
          }
          return newobj;
      }
      
    • JSON对象

      function deepClone(obj){
          if(obj == null){
              return null;
          }
          let temp = JSON.stringfy(obj);
          let cloneobj = JSON.parse(temp);
          return cloneobj;
      }
      

      缺点:无法实现对象中方法的深拷贝

    • extend

      function deepClone(obj){
          if(obj == null){
              return null;
          }
          if(obj instanceof Array){
              return $.extend(true,[],obj);
          }else{
              return $.extend(true,{},obj);
          }
      }
      

      tips:当extend第一个参数为false时,则为浅拷贝

    • assign

      function deepClone(obj){
          if(obj == null){
              return null;
          }
          return Object.assign(obj);
      }
      

      缺点:该方法仅拷贝一级属性,如存在二级属性,该方法则无法正确实现深拷贝

    • lodash

      lodash.cloneDeep();
      
  • 浅拷贝实现方式

    • 直接赋值

    • 遍历拷贝

      function shallowCopy(obj){
          if(obj == null){
              return null;
          }
          let cloneobj = obj instanceof Array ? [] : {};
          for(let i in obj){
              if(obj.hasOwnProperty(i) || obj[i]){
                  cloneobj[i] = obj[i]
              }
          } 
          return cloneobj;
      }
      
    • extend

      function shallowCopy(obj){
          if(obj == null){
              return null;
          }
          if(obj instanceof Array){
              return $.extend(false,[],obj);
          }else{
              return $.extend(false,{},obj);
          }
      }
      
    • assign

      使用方法同上面深拷贝中用法,如果对象包含二级属性即为浅拷贝方法

  • 4
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值