React深拷贝和浅拷贝,和数组深拷贝写法

今天遇到一个问题,我更新了数组里面的数据,但是页面并没有检测到数组里面数据的改变,而导致这个原因是,就是浅拷贝和深拷贝的问题。
当我们针对数组对象嵌套比较深时,采用浅拷贝的方式就会出现上述情况。一般也是针对数据结构毕竟深时,采用深拷贝

深拷贝和浅拷贝最根本的区别在于是否真正获取一个对象的复制实体,而不是引用。
如何判断浅拷贝和深拷贝在于:
假设B复制了A,修改A的时候,看B是否发生变化:
如果B跟着也变了,说明是浅拷贝,我们只是使用的他的引用而不是一个全新的数据,因为用的同一个数据!(他们在内存中实际上是同一个地址)
如果B没有改变,说明是深拷贝,因为B是一个全新的数据有,在内存中自己的地址!
具体深拷贝三种方式可以参考一下其他博主的写法,我这里分享一个我自己的写法
下面举个针对多层嵌套数组对象的栗子

           const arr = [
			 [{a:'1'},{b:'2'},{c:'3'}],
			 [{a:'1'},{b:'2'},{c:'3'}],
			 [{a:'1'},{b:'2'},{c:'3'}]
			]
			arr.map(data =>{
			 data.map(content => {
				content.a = '33'
			})
		    }) //浅拷贝的方式对arr里面的数据赋值
			const res = arr.map(data =>{
				return data.map(content => {
					return {a:'2222',...content}
				})
			 }) //深拷贝的方式对arr里面的数据赋值
			 arr = res;
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值