关于JS深拷贝和浅拷贝

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

data{

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

}

function changeA(){

　　let B = this.data.B;

　　B[1].num = 88

　　this.setData({

　　　　A:B

　　});

console(this.data.A);

}

 

这时候打印出来时已经改变的值。A：[{id:1,num:4},{id:2,num:4},{id:3,num:4}]。但是页面显示的还是原来的值。这就涉及到浅拷贝和深拷贝问题了。上面修改为：

function changeA(){

　　let B = [ ];

　　this.data.B.forEach(item=>{

　　　　let ObjectB = item

　　　　B.push(ObjectB)

　　})

　　B[1].num = 88

　　this.setData({

　　　　A:B

　　});

}

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

 

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