修改数组内的值后，其他所有引用的地方都发生了改变

原创已于 2024-01-04 18:18:56 修改 · 849 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#其他 #javascript #前端

于 2022-02-09 10:10:45 首次发布

本文探讨了JavaScript中对象赋值导致的引用问题，当多个变量指向同一内存地址时，修改其中一个会影响其他变量。解决方案包括使用解构赋值或JSON序列化来创建新对象，避免直接修改原始数据。这两种方法确保了对params的修改不会影响data。

1、问题代码

	  const data = {
        page: 1
      }
      let params=data
      params.page = 2
      console.log('params.page=' + params.page)
      console.log('data.page=' + data.page)

这是一种比较常见的问题代码，需要注意的是，在这时，params并未开辟新的内存，params与data引用的是同一个内存地址，所以当你进行修改时，所有引用这个内存地址的值都会发生变化，看一下打印结果
打印结果1
我并未修改data中page的值，但由于这两个对象引用的是同一个内存地址，所以都发生了变化

2、解决问题

既然知道问题所在（两个对象引用的同一个内存地址），那么解决起来也就简单了，我们只需要开辟一个新的内存后，再将需要用的值存进去就可以解决这个问题，方案如下：

1. 方案一

	  const data = {
        page: 1
      }
      let params = {
        ...data
      }
      params.page = 2
      console.log('params.page=' + params.page)
      console.log('data.page=' + data.page)

2. 方案二

	  const data = {
        page: 1
      }
      let params = JSON.parse(JSON.stringify(data))
      params.page = 2
      console.log('params.page=' + params.page)
      console.log('data.page=' + data.page)