vue

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;
};
上一篇下一篇

猜你喜欢

热点阅读