【微信小程序开发笔记】--偶遇js深拷贝与浅拷贝问题

时间:2021-08-19 19:52:44

微信小程序开发笔记(一)–偶遇深拷贝与浅拷贝问题

  • js文件
/** * 选择数据--checkbox复选框监听事件value值 | 需要上传的数据 | 不需要上传的数据 */
  checkboxChange: function (e) {

    //不需要上传的数据
    var noNeedToUpLoad = new Array()
    //需要上传的数据
    var needToUpLoad = new Array()
    //删除后需要上传的数据
    var fUpLoad = new Array()
    //选择的企业数据
    var checkedRegNo = e.detail.value;
    //
    var allDataleng = this.data.moreLocal.length;
    //取出需要上传的数据
    for (var i = 0; i < allDataleng; i++) {
      var tmpobj = this.data.moreLocal[i];
      var regNo = tmpobj.REGISTERNO;
      var isck = 1;
      for (var j = 0; j < checkedRegNo.length; j++) {
        if (regNo == checkedRegNo[j]) {
          isck = 2;
          break;
        }
      }
      if (isck == 1) {
        noNeedToUpLoad.push(tmpobj);
      } else {
        needToUpLoad.push(tmpobj);
      }
    }

    //最简单的深拷贝实例,将数组对象转为字符串之后就与源对象无关联,再将字符串转为数组对象 | //深拷贝√ | 浅拷贝
    fUpLoad = JSON.parse(JSON.stringify(needToUpLoad))
    //大方删除不需要的数据
    for (var l = 0; l < fUpLoad.length; l++) {
      delete fUpLoad[l].EQUIPADDRESS;
      delete fUpLoad[l].EQUIPMENTTYPE;
      delete fUpLoad[l].INCHECKDATE;
      delete fUpLoad[l].OUTCHECKDATE;
      delete fUpLoad[l].USENO;
      delete fUpLoad[l].registerNo;
      delete fUpLoad[l].unitName;
    }

    this.setData({
      upLoadData: fUpLoad,
      noUpLoadData: noNeedToUpLoad,
    })

    console.log('不不不不需要上传的数据noNeedToUpLoad==============:'),
      console.log(noNeedToUpLoad);
    console.log('需要上传的数据needToUpLoad==============:'),
      console.log(needToUpLoad);

    console.log('最终需要上传的数据fUpLoad==============:'),
      console.log(fUpLoad);
  },

代码场景:
1. 这段代码中,this.data.moreLocaldata({})中定义为数组,存放目标对象
2. 需要通过checkboxChange方法将checkbox-groupvalue值选择出来
3. 当value值与目标对象moreLocal[i].REGISTERNO相等即为要上传的数据needToUpLoad,否则不上传needToUpLoad
4. 然后将需要上传的数据删减某些元素后再进行上传fUpLoad

貌似思路很清晰,流程很顺畅,但是当在使用的时候,才发现,倘若使用fUpLoad = needToUpLoad 直接将需要上传的赋值出来,在对fUpLoad中的元素执行删减delete这一操作的同时,会发现原来的needToUpLoad也会跟着变化,因为这就涉及到JavaScript语言中的深拷贝浅拷贝的问题。

那什么是深拷贝浅拷贝呢?

简单理解来说,深拷贝和浅拷贝针对于ObjectArray的复杂对象来说的:
浅拷贝只是对对象的地址的复制,并没有开辟新的栈内存,也就是fUpLoadneedToUpLoad都指向同一个栈地址,对其中一个进行删减时,另外一个的值也会同样发生变化,这肯定不是想要看到的结果;
深拷贝则是拷贝了对象后存放到新的栈中保存,两者指向不同的栈,改变其中一个值并不会影响到另一个的值。

大致了解了是什么就找找方法进行深拷贝吧,但是最后发现jsslice函数和concat方法都达不到该效果,needToUpLoad是一个数组,数组元素又是一个对象,即使遍历needToUpLoad后一个个拷贝出来,也不能够达到深拷贝的目的

最简单的一个深拷贝方法:一个简单但是很有效的方法,就是代码中的fUpLoad = JSON.parse(JSON.stringify(needToUpLoad)),将数组对象转为字符串之后就与源数组无关联,再将字符串转为数组对象,即可达到深拷贝的目的

那在对fUpLoad进行删减元素时就不会影响到原来的数组了


代码片段直接使用了项目中的一段,没有写一下示例代码,谨以此当做记录一下笔记吧

参考:javascript中的深拷贝和浅拷贝?