数据请求回来后,对象push到数组时深拷贝和浅拷贝问题

最近遇到一个需求处理,就是把数据请求回来的数据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)))
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
赋值是指将一个变量的值赋给另一个变量,二者指向同一个内存地址。示例代码如下: ``` let a = [1, 2, 3]; let b = a; console.log(a); // [1, 2, 3] console.log(b); // [1, 2, 3] b.push(4); console.log(a); // [1, 2, 3, 4] console.log(b); // [1, 2, 3, 4] ``` 上述代码中,由于b直接指向了a的内存地址,所以对b进行修改也会影响到a。这就是赋值的情况。 浅拷贝是指创建一个新的对象数组,但只复制了对象数组的引用,而不是复制其中的内容。示例代码如下: ``` let obj = {name: 'Alice', age: 20}; let copy = Object.assign({}, obj); console.log(obj); // {name: 'Alice', age: 20} console.log(copy); // {name: 'Alice', age: 20} copy.age = 25; console.log(obj); // {name: 'Alice', age: 20} console.log(copy); // {name: 'Alice', age: 25} ``` 在上述代码中,通过`Object.assign`方法将obj的属性复制到新对象copy中,但是只是复制了引用,并没有复制其中的属性值。因此,对copy进行修改不会影响到原来的obj对象深拷贝是指创建一个新的对象数组,并且递归地复制了对象数组的所有内容,包括嵌套的对象数组。示例代码如下: ``` let arr = [1, 2, [3, 4]]; let deepCopy = JSON.parse(JSON.stringify(arr)); console.log(arr); // [1, 2, [3, 4]] console.log(deepCopy); // [1, 2, [3, 4]] deepCopy[2][0] = 5; console.log(arr); // [1, 2, [3, 4]] console.log(deepCopy); // [1, 2, [5, 4]] ``` 在上述代码中,通过`JSON.stringify`和`JSON.parse`方法实现了深拷贝。新的deepCopy数组完全独立于原来的arr数组,因此对deepCopy进行修改不会影响到原来的arr数组。 总结起来,赋值只是简单地将变量的值赋给另一个变量,二者指向同一个内存地址;浅拷贝只复制了对象数组的引用,对新对象的修改会影响到原始对象深拷贝递归地复制了对象数组的所有内容,新对象与原始对象完全独立。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值