最近遇到一个需求处理,就是把数据请求回来的数据push到一个数组中,然后需要区分不同的数据保存在不同的数组里
开始数据请求回来的是一个对象,我直接push就可以了,看部分代码:
demo(req).then((res) => {
console.log('res', res);
if (res.data.code == 1) {
console.log('res', res.data);
//res.data是一个对象,push到初始化的数组中
this.Data.push(res.data)
然后判断分别保存
if (this.type == 1) {
Data1.push(res.data)
}
if (this.type == 2) {
Data2.push(res.data)
}
这样直接使用Data1,Data2是没有问题的
然后后面因为其他需求,后端返回的数据不是一个对象了,只是一个字符串,但是我数据渲染需要数组对象,所以初始化了一个对象
chat: {
msg: "",
type: '',
code: 1,
},
然后把数据请求回来的字符串赋值到对象中,再像上面一样分别保存
demo(req).then((res) => {
console.log('res', res);
if (res.data.code == 1) {
console.log('res', res.data)
//res.data是一个字符串,push到初始化的数组中
this.chat.msg = res.data
this.Data.push(this.chat)
出现问题了!!!,type=2的数据,会把type=1的数据覆盖掉,他们变成都一样的了,找了好久才发现是因为这样子涉及到了拷贝
深拷贝和浅拷贝
浅拷贝是指将原始对象中的值复制到新对象中,如果原始对象中的值是一个引用类型(如列表、字典或对象),则浅拷贝仅复制该引用,而不复制引用指向的数据。这意味着新对象和原始对象会共享同一个引用,如果在新对象上进行修改操作,原始对象也会受到影响
深拷贝是指将原始对象及其子对象中的所有值都复制到新对象中,而且新对象与原始对象没有任何关联。这样做可以避免共享引用引起的问。
因为我直接把初始化的对象直接push到数组中,只是push了地址,所以才会出现第二个数据的改变,影响到了第一个数据
解决:
demo(req).then((res) => {
console.log('res', res);
if (res.data.code == 1) {
console.log('res', res.data)
//res.data是一个字符串,push到初始化的数组中
this.chat.msg = res.data
//深拷贝再push
this.Data.push(JSON.parse(JSON.stringify(this.chat)))