关于JS深拷贝和浅拷贝

Posted 伏沙金

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了关于JS深拷贝和浅拷贝相关的知识,希望对你有一定的参考价值。

最近在前端开发中遇到一些问题,就是数组中的某个对象或某个对象的值改变之后,在不刷新页面的时候需要重新渲染值时,页面显示的还是原来的数据。比如:

data{

A:[{id:1,num:1},{id:2,num:2},{id:3,num:3}]

}

function changeA(){

  let B = this.data.B;

  B.forEach(item=>{ 

    item.num = 4

   });

  this.setData({

    A:B

  });

console(this.data.A);

}

 

这时候打印出来时已经改变的值。A:[{id:1,num:4},{id:2,num:4},{id:3,num:4}]。但是页面显示的还是原来的值。这时候就要使用深拷贝了。

浅拷贝和深拷贝都只针对于引用数据类型,浅拷贝只复制指向某个对象的指针,而不复制对象本身,新旧对象还是共享同一块内存;但深拷贝会另外创造一个一模一样的对象,新对象跟原对象不共享内存,修改新对象不会改到原对象;
区别:浅拷贝只复制对象的第一层属性、深拷贝可以对对象的属性进行递归复制;
 

最后一句引用大神关于JS深拷贝和浅拷贝区别,有兴趣的可以去看下: https://www.jianshu.com/p/cf1e9d7e94fb

以上是关于关于JS深拷贝和浅拷贝的主要内容,如果未能解决你的问题,请参考以下文章

关于JS深拷贝和浅拷贝

关于深拷贝和浅拷贝

关于深拷贝和浅拷贝的理解

如何实现数组深拷贝和浅拷贝?

IOS 深拷贝和浅拷贝

深拷贝和浅拷贝怎样理解(通俗具体点儿)