场景:
在vue中,我在data定义了变量,接收到了后台的数据,数组类型
我把它传递给了子组件,但是我并不想直接改变这个数据
于是我定义了一个空的数组,把当前数据赋值给了它。
但是,我们都知道,数组所指向的是内存地址,直接赋值会使它们指向同一地址。(深拷贝和浅拷贝)
那么问题就来了,当我改变其中一个数组的值,另一个数组也会随之发生变化。
其实解决办法最简单粗暴的办法就是循环数据数组,然后把每一项push到新数组,但是代码真的很不友好,写起来复杂。
解决办法:
我采用了es6的数组解构赋值,和扩展运算符结合的方式
const newArr = [ ...this.result ]
但是我发现并没有解决我的问题。
我排查原因,并尝试解决办法,发现简单的数组类型是可以成功的,但是如果数组中嵌套的对象,那么这样还是不能解决我的问题。
网上查阅资料,找到了解决办法。
const newArr = JSON.parse(JSON.stringify(this.result))
这里先把数组转为json字符串,我们都知道字符串是基本类型,所以不会存在引用类型那种赋值会互相影响的情况,再转为json对象进行赋值,这样可以代替深拷贝,以此成功解决问题。
如有问题,请指出,接收批评。