【微信小程序开发笔记】--偶遇js深拷贝与浅拷贝问题
来源:互联网 发布:视频格式转换器 mac 编辑:程序博客网 时间:2024/06/16 05:52
微信小程序开发笔记(一)–偶遇深拷贝与浅拷贝问题
- 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中的深拷贝和浅拷贝?
- 【微信小程序开发笔记】--偶遇js深拷贝与浅拷贝问题
- JS对象浅拷贝与深拷贝问题实践
- js 深拷贝与浅拷贝Demo
- js 浅拷贝与深拷贝
- JS深拷贝与浅拷贝
- js对象浅拷贝与深拷贝
- Js中的深拷贝与浅拷贝
- JS的深拷贝与浅拷贝
- js深拷贝与浅拷贝
- js深拷贝与浅拷贝
- iOS开发 深拷贝与浅拷贝
- 深拷贝与浅拷贝问题
- js 浅拷贝 深拷贝
- js浅拷贝、深拷贝
- js-浅拷贝,深拷贝
- js深拷贝浅拷贝
- 深拷贝与浅拷贝
- 深拷贝与浅拷贝
- TOKEN_PRIVILEGES 结构体
- 如何给你的json对象的某个方法,然后用这个对象的属性输出结果?
- SQL 各种JOIN
- LeetCode#215 Kth Largest Element in an Array
- pycharm 安装
- 【微信小程序开发笔记】--偶遇js深拷贝与浅拷贝问题
- is.finite/is.infinite/is.nan/NA
- BaseAdapter
- 注册校验+三级联动+上传头像
- mysql cpu100%优化
- 1070. 结绳(25)
- 谈技术资料的阅读方法
- 2017年开始
- 'new' : function does not take 3 parameters(转载)