js操作数组 更改其中一个数组值 另一个数组也会改变

问题背景：

在vue项目中，在data中定义了两个数组对象，一个用于展示，一个用于修改操作。当修改其中一个数组的值时发现另一个也会跟着改变。代码如下：

var regNeg = /^[0-9]{1,7}$/
var param = []
for (let i = 0; i < this.data.length; i++) {
  if (regNeg.test(this.data[i].sort)) {
     // 如果两个值不相等，说明已经修改过
     if (this.data[i].sort !== this.images[i].sort) {
        param.push(this.data[i])
     }
  } else {
     this.$message.error('请输入数字!')
  }
}

原因：

由于数组是引用变量，进行引用赋值，其实还是原来的数组，也就是说，两个数组对象，其实一直引用的是同一个内存地址中的数组 , 所以修改其中一个引用数组，其他引用也会随之改变。

解决：

this.newList = JSON.parse(JSON.stringify(response.data))
this.data = response.data

总结：

原理就是先把数组转换成字符串，再转换成对象，这样会分配一块新的内存空间，创建一个新的对象。这样两个引用指向的就是不同的对象了。