vue使用push添加多条相同数据,改变其中一条数据导致其他的数
2023-02-17 本文已影响0人
扶得一人醉如苏沐晨
在写vue后台项目时,使用push向数组中添加多条相同的数据,修改其中一条数据,其他的数据随之改变。
出现这个问题的原因是,push的并不是一个值,而是一个地址,数组都指向同一个地址,就好比data.itemList[0]和 data.itemList[1]都是指向item的。每一次push就等于改变了数组的地址,所以会导致每个元素都变成了最后push的内容 。
当使用push添加多条数据时,多条数据指向的是同一个内存地址,修改其中一条数据相当于修改了所指内存的值,所以每条数据都改变了。
let obj = {
category:item.category,
materialSn:item.materialSn,
remark:item.remark
}
for(let i=0;i<count;i++){
this.form.itemList.push(obj); //原代码
}
当修改其中一条数据时,其他数据随之改变;
解决:每次将要push的数据都存在另外单独开辟的空间中。这样就不会导致,整个数组都是指向一个内存地址。
方法一:每次push之前开辟一个新的内存地址
for(let i=0;i<count;i++){
//开辟一个新的内存地址
let obj = {
category:item.category,
materialSn:item.materialSn,
remark:item.remark
}
this.form.itemList.push(obj); //原代码
}
方法二:每次push之前对对象进行深拷贝
let obj = {
category:item.category,
materialSn:item.materialSn,
remark:item.remark
}
for(let i=0;i<count;i++){
this.form.itemList.push(deepClone(obj)); //原代码
}
最后附上deepClone方法的代码
/**
* 对象深拷贝
*/
export const deepClone = (data) => {
// 封装的判断数据类型的方法
var type = getObjType(data);
var obj;
if (type === "array") {
obj = [];
} else if (type === "object") {
obj = {};
} else {
// 不再具有下一层次
return data;
}
if (type === "array") {
for (var i = 0, len = data.length; i < len; i++) {
obj.push(deepClone(data[i]));
}
} else if (type === "object") {
for (var key in data) {
obj[key] = deepClone(data[key]);
}
}
return obj;
};