循环修改数组时两变量值同步变化？如何保留数组原有状态？

这个问题其实是JavaScript里引用类型和值类型的核心区别，很多刚接触JS的同学都会踩这个坑～我来给你拆解清楚：

为什么会出现这种关联？ #

JavaScript里的数据类型分两类：

• 值类型：比如数字、字符串、布尔值，赋值时会直接复制具体的值，两个变量完全独立。
• 引用类型：比如数组、对象、函数，赋值时复制的不是内容本身，而是它在内存中的引用地址。

看你第一个例子里的preArrr = arrr，这行代码并没有把arrr的数组内容复制给preArrr，而是让preArrr和arrr指向了内存中同一个数组。所以不管你通过哪个变量修改数组元素，本质都是在修改同一块内存里的东西，另一个变量自然会同步变化。

而当你直接给arrr重新赋值arrr = [0,1,2,3,4]时，相当于给arrr换了一个新的引用地址，指向了一块全新的内存空间，preArrr还保留着原来的引用，指向旧数组，所以两者就不再关联了。

怎么避免这种关联，保存原数组状态？ #

核心思路就是创建原数组的独立副本，而不是复制引用。根据数组的复杂程度，有几种常用方法：

1. 浅拷贝（适合一维数组，元素都是值类型） #

如果你的数组是简单的一维数组，元素都是数字、字符串这类值类型，用下面几种方法就能创建独立副本：

• 扩展运算符：最直观简洁的方式

  let preArrr = [...arrr];
  

• slice方法：不传参数时会返回整个数组的副本

  let preArrr = arrr.slice();
  

• Array.from：专门用于从可迭代对象创建新数组，也能用来拷贝

  let preArrr = Array.from(arrr);
  

• map方法：遍历每个元素返回原元素，间接生成副本

  let preArrr = arrr.map(item => item);
  

把你的第一个例子改成这样就没问题了：

let arrr = [1,1,1,1,1]; 
let preArrr = [...arrr]; // 创建独立副本
for (let i=0; i < arrr.length; i++) arrr[i] = i; 
console.log(arrr, preArrr) // arrr: [0,1,2,3,4], preArrr: [1,1,1,1,1]

2. 深拷贝（适合嵌套数组/元素是引用类型的情况） #

如果数组里嵌套了其他数组或者对象，上面的浅拷贝方法只会复制外层数组的引用，内层的引用类型还是会共享。这时候需要用深拷贝：

• JSON序列化/反序列化：简单易用，但有局限性（不能处理函数、Symbol、循环引用等）

  let preArrr = JSON.parse(JSON.stringify(arrr));
  

• 自定义递归深拷贝：如果需要处理复杂场景，可以自己写递归函数，遍历每个层级的元素并复制。

比如嵌套数组的例子：

let arrr = [1, [2, 3], 4];
let preArrr = JSON.parse(JSON.stringify(arrr));
arrr[1][0] = 99;
console.log(arrr, preArrr) // arrr: [1, [99, 3], 4], preArrr: [1, [2, 3], 4]

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