数据请求回来后，对象push到数组时深拷贝和浅拷贝问题_同一个接口参数值不同请求四次返回的数据按顺序push到一个数组里面-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_45260597/article/details/130385656

文章讲述了在处理数据请求时遇到的问题，当后端返回的数据类型从对象变为字符串时，由于直接使用对象导致数据覆盖。作者解释了浅拷贝和深拷贝的概念，并提供了解决方案——使用深拷贝（通过JSON.parse(JSON.stringify())）来确保每个数组元素是独立的对象副本，避免数据相互影响。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近遇到一个需求处理，就是把数据请求回来的数据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)))