前端踩坑记录:javaScript复制对象和数组,不能简单地使用赋值运算

问题

如图,编辑table中某行的信息,发现在编辑框中修改名称的时候,表格中的信息同步更新。。。

检查原因

编辑页面打开时,需要读取选中行的信息,并在页面中回显。代码中直接将当前行的数据对象赋值给编辑框中的表单对象了,这只是简单的让form指向了row的地址,并没有逐个的赋值其中的字段。

this.form = row;

 这样,当我在表单中更新某个字段的值的时候,我期望更新的是form中的数据,然而,因为form和row实际指向的是同一块数据空间,所以,row中的数据,也同步更新,就出现了我最开始的问题。

解决方案

那么,在获取选中行信息时,不能简单的进行赋值,而需要进行拷贝。可以使用Object.assign函数,将row中的数据拷贝到this.form中:

Object.assign(this.form,row)

数组

同理,数组存在同样的问题

 某select的Option需要在一个已有数组的基础上进行删减,但是原数组不能变。

最初使用的是newArr = arr的方式,在对newArr进行了一些列的操作后,发现arr的值成员也被修改了。

改为newArr = arr.slice() 正常。

另,如果想要实现两个数组的拼接,可用arr1 = arr1.concat(arr2)的方法

参考:JavaScript Array slice() 方法

  • 5
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值