vue 一个对象给另一个对象赋值后，修改任意一个，两个都会变

原创已于 2024-10-14 12:03:06 修改 · 584 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #vue.js

于 2024-10-14 10:37:30 首次发布

问题描述：vue 一个对象（data）给另一个对象（dataNew）赋值（直接赋值或者解构赋值）后，修改任意一个，两个都会变

原因分析：原因：对象赋值之后只是将地址指向同一块内存空间，dataNew=data，dataNew和data指向同一块内存地址，修改dataNew后，data所指向的地址的值也会发生改变

解决方法：let dataNew: SampleItemResultUpload[] = JSON.parse(JSON.stringify(data));

import type { SampleItemResultUpload } from "@/interface";
export const uploadSampleItemResultService = (data: SampleItemResultUpload[]) => {
  // 一个对象（data）给另一个对象（dataNew）赋值（直接赋值 或者 解构赋值）后，修改任意一个，两个都会变
  // 原因：对象赋值之后 只是将地址指向同一块内存空间，dataNew=data，dataNew和data指向同一块内存地址，
  // 修改dataNew后，data所指向的地址的值也会发生改变
  // 解决方法：let dataNew: SampleItemResultUpload[] = JSON.parse(JSON.stringify(data));
  // 这样 dataNew 和 data 各自指向不同的内存地址，各自修改，互不影响
  // let dataNew = data;
  // let dataNew = [...data];
  let dataNew: SampleItemResultUpload[] = JSON.parse(JSON.stringify(data));
  // 删除多余的属性
  dataNew.forEach((item) => {
    delete item.id;
    delete item.uploadMark;
    delete item.uploadTime;
  });

  let uploadObj = {
    auth: "com",
    req: dataNew
  };
  return request.post("/sampleItemResult/upload", uploadObj, {
    params: {
      len: dataNew.length
    }
  });
};