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

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

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.moreLocal

在

data({})

中定义为数组，存放目标对象

2. 需要通过

checkboxChange

方法将

checkbox-group

的

value

值选择出来

3. 当

value

值与目标对象

moreLocal[i].REGISTERNO

相等即为要上传的数据

needToUpLoad

，否则不上传

needToUpLoad

。

4. 然后将需要上传的数据删减某些元素后再进行上传

fUpLoad

貌似思路很清晰，流程很顺畅，但是当在使用的时候，才发现，倘若使用

fUpLoad = needToUpLoad

直接将需要上传的赋值出来，在对

fUpLoad

中的元素执行删减

delete

这一操作的同时，会发现原来的

needToUpLoad

也会跟着变化，因为这就涉及到

JavaScript

语言中的深拷贝和浅拷贝的问题。

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

简单理解来说，深拷贝和浅拷贝针对于

Object

和

Array

的复杂对象来说的：

浅拷贝只是对对象的地址的复制，并没有开辟新的栈内存，也就是

fUpLoad

、

needToUpLoad

都指向同一个栈地址，对其中一个进行删减时，另外一个的值也会同样发生变化，这肯定不是想要看到的结果；

深拷贝则是拷贝了对象后存放到新的栈中保存，两者指向不同的栈，改变其中一个值并不会影响到另一个的值。

大致了解了是什么就找找方法进行深拷贝吧，但是最后发现

js

的

slice

函数和

concat

方法都达不到该效果，

needToUpLoad

是一个数组，数组元素又是一个对象，即使遍历

needToUpLoad

后一个个拷贝出来，也不能够达到深拷贝的目的

最简单的一个深拷贝方法：一个简单但是很有效的方法，就是代码中的

fUpLoad = JSON.parse(JSON.stringify(needToUpLoad))

，将数组对象转为字符串之后就与源数组无关联，再将字符串转为数组对象，即可达到深拷贝的目的

那在对

fUpLoad

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

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

参考：javascript中的深拷贝和浅拷贝？