关于深拷贝与浅拷贝的数据影响

深拷贝与浅拷贝

在项目开发过程中呢，再给一个表格加详情时，出现了一点小问题 问题是这样的 props: { detailModal: Object, curOfDetail: Object }, getDetail() { this.tableData = this.curOfDetail.refunds; for(let i = 0; i < this.tableData.length ; i++) { this.tableData[i].pay_way = this.tableData[i].pay_way == "wechat-native" ? "微信" : "现金" ; this.tableData[i].status = this.tableData[i].status == "refunding" ? "退款中" : "已完成"; } }

就是一个很简单的父子传值然后过滤部分值显示给表格，出现问题的地方也在于这里，首先发现是第一次打开是正常过滤的，然后关闭窗口重新打开之后过滤出错，检查得知当给this.tableData过滤时，this.curOfDetail.refunds的值也会改变，经同事提醒得知是深拷贝与浅拷贝的问题，当仅仅只是进行=赋值时，是属于浅拷贝。

在这里就不放错误样本了，当对对象或者数组进行拷贝赋值的时候，就会涉及的深拷贝和浅拷贝，这里就可能导致数据错误

对深拷贝与浅拷贝的区别举例解释为：

假设B复制了A，当修改A时，看B是否会发生变化，如果B也跟着变了，说明这是浅拷贝，拿人手短，如果B没变，那就是深拷贝，自食其力。

在这里主要参考资料是 面朝南的落地窗 大佬的博客

大佬的博客里主要提供了三种解决深拷贝的方法：

递归去复制所有层级属性。 function deepClone(obj){ let objClone = Array.isArray(obj)?[]:{}; if(obj && typeof obj==="object"){ for(key in obj){ if(obj.hasOwnProperty(key)){ //判断ojb子元素是否为对象，如果是，递归复制 if(obj[key]&&typeof obj[key] ==="object"){ objClone[key] = deepClone(obj[key]); }else{ //如果不是，简单复制 objClone[key] = obj[key]; } } } } return objClone; }

这里强调，深拷贝，是拷贝对象各个层级的属性。

除了递归，还可以借用JSON对象的parse和stringify function deepClone(obj){ let _obj = JSON.stringify(obj), objClone = JSON.parse(_obj); return objClone }

附带说明，JSON.stringify与JSON.parse除了实现深拷贝，还能结合localStorage实现对象数组存储。

除了上面两种方法之外，我们还可以借用JQ的extend方法 $.extend( [deep ], target, object1 [, objectN ] ) deep表示是否深拷贝，为true为深拷贝，为false，则为浅拷贝 target 为Object类型 目标对象，其他对象的成员属性将被附加到该对象上。 object1 objectN可选。 Object类型 第一个以及第N个被合并的对象。 let a=[0,1,[2,3],4], b=$.extend(true,[],a); a[0]=1; a[2][0]=1; console.log(a,b); a 输出 [1,1,[1,3],4] b 输出 [0,1,[2,3],4] 可以看到，效果与上面方法一样，只是需要依赖JQ库

感谢面朝南的落地窗大佬的博客知识

作者：面朝南的落地窗 链接：https://www.jianshu.com/p/55d3e1b3afab 来源：简书 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。