React中修改新JSON时旧JSON同步更新？原因解析

为什么修改新对象会影响旧对象？ #

这是JavaScript引用类型的特性导致的：

• 数组和对象属于引用类型，赋值时不会复制整个数据，而是把内存地址传给新变量。你写的let ifruleObject = oldJSON.rules[0].rules;就是把旧数组的内存地址给了ifruleObject，两者指向同一块内存。
• 循环里你直接修改ifruleObject[i]的内容，本质上就是在修改oldJSON里的原数组元素，所以打印旧对象时会看到同步变化。

怎么解决？ #

核心是切断引用，创建原数组的独立拷贝：

1. 浅拷贝（适用于数组元素是字符串、数字等基本类型） #

用扩展运算符快速生成新数组：

// 替换原赋值语句，生成独立数组
let ifruleObject = [...oldJSON.rules[0].rules];

2. 深拷贝（适用于数组里嵌套了对象/数组的情况） #

用JSON序列化和反序列化实现深拷贝：

let ifruleObject = JSON.parse(JSON.stringify(oldJSON.rules[0].rules));

这样修改ifruleObject的内容就不会影响oldJSON了。

内容的提问来源于stack exchange，提问作者Kay