今天遇到一个问题,我更新了数组里面的数据,但是页面并没有检测到数组里面数据的改变,而导致这个原因是,就是浅拷贝和深拷贝的问题。
当我们针对数组对象嵌套比较深时,采用浅拷贝的方式就会出现上述情况。一般也是针对数据结构毕竟深时,采用深拷贝
深拷贝和浅拷贝最根本的区别在于是否真正获取一个对象的复制实体,而不是引用。
如何判断浅拷贝和深拷贝在于:
假设B复制了A,修改A的时候,看B是否发生变化:
如果B跟着也变了,说明是浅拷贝,我们只是使用的他的引用而不是一个全新的数据,因为用的同一个数据!(他们在内存中实际上是同一个地址)
如果B没有改变,说明是深拷贝,因为B是一个全新的数据有,在内存中自己的地址!
具体深拷贝三种方式可以参考一下其他博主的写法,我这里分享一个我自己的写法
下面举个针对多层嵌套数组对象的栗子
const arr = [
[{a:'1'},{b:'2'},{c:'3'}],
[{a:'1'},{b:'2'},{c:'3'}],
[{a:'1'},{b:'2'},{c:'3'}]
]
arr.map(data =>{
data.map(content => {
content.a = '33'
})
}) //浅拷贝的方式对arr里面的数据赋值
const res = arr.map(data =>{
return data.map(content => {
return {a:'2222',...content}
})
}) //深拷贝的方式对arr里面的数据赋值
arr = res;