• 再议js的传递和深复制


    病理

           基本类型的传递就是按值传递,比如说

        var a = 1;   
        var b = a; 
        b = 3;
        console.log(a,b);//1,3

    很明显,a的值并未因为b的值改变而变化,这是因为a只是给了b一个副本。在这就不详细描述了。下面才是重点

        let obj = {x:1};  
        let o = obj;  
        o.x = 2;  
        console.log(obj.x);//2  已经被改动了

    对此我在前面的 js函数参数的传递 中有具体介绍,在这就不多说了。

    对症下药

    1. 毛主席说过,遇事莫要急,碰到问题就要解决问题(其实没说过)。知道了是什么原因就好办了,我们把对象直接克隆,也可以叫做深拷贝。

      const deepCopy = function(obj){
          var result = {};
          for(let k in obj){
              result[k] = typeof obj[k]===’object’? deepCoyp(obj[k]): obj[k];
          }
          return result;
      }

      定义一个方法,参数是一个对象obj,然后通过for...in循环获取属性值obj[k],然后将属性值赋值给result中的k属性。其实就是将对象转换为基本类型进行复制了。再试下上面的例子。

      let o = deepCopy(obj);  
      o.x = 2;  
      console.log(obj.x);// 1

      ok,我们完成复制了。

    2. 以上纯js的办法,当然jquery有一个方法extend(boolean,dest,src1,src2,src3...)可以用来实现对象深层拷贝。第一个参数为true时,表示进行深度拷贝,第二个参数及后面的参数表示将src1,src2,src3...合并到dest中,返回值为合并后的dest。但是这样会使dest的结构发生变化,如果不想修改dest的结构可以将其设为{}。

      let o = $.extend(true,null,obj);
      o.x = 2;
      console.log(obj.x); // 1
    3. 众望所归的es6中的Object.assign()也可以实现深层拷贝。但是es6深复制只有一层,也就是说像obj.a.b=1这种的Object.assign()是不能进行深复制的。下面我们来看代码吧。

      let obj = {
          a : 1,
          b : {
              c : 2
          }
      };
      let result = Object.assign({},obj);
      result.a = 4;
      result.b.c = 3;
      console.log(obj); // {a:1,b:{c:3}}

      这就是assign()方法,比jquery的extend()更容易理解,参数更简单。当然es7中的深层拷贝就更加方便了,这里我就提一下就好了。还是上面的例子吧,直接let obj1 = {...obj,a:4},有没有被惊倒!

      总结

             对于我的问题,选择了extend,因为简单嘛,而且不用转码和考虑兼容性。还有就是碰到问题一定要去debug,这样才能找出原因,然后想办法解决就好了。

  • 相关阅读:
    kafka.errors.UnsupportedCodecError: UnsupportedCodecError: Libraries for snappy compression codec not found 解决方案
    查看运行的容器完整命令
    python 生成requirements.txt文件
    解决matplotlib 中文乱码
    django 显示本地图片
    JniLibs和Jni的区别
    Error:No such property: GradleVersion for class: JetGradlePlugin
    Flutter 导包或者其他三方工程的时候出现Flutter 导包错误 Target of URI doesn't exist
    Flutter工程泡在真机上时,xocde提示 codesign 想要访问你的钥匙串中的秘钥
    Flutter 工程报错 Failed to create provisioning profile.
  • 原文地址:https://www.cnblogs.com/shileima/p/7525784.html
Copyright © 2020-2023  润新知