为何修改赋值后的数组会导致原数组一同改变？

这不是bug，是JavaScript/TypeScript中引用类型的固有行为，核心原因如下：

代码复现 #

function get() {
    return [0,0];
}

let arr:number[] = get();     // arr=[0,0]
let arr2:number[] = arr;      // arr2=[0,0]
arr2[1] = arr2[1] + 1;        // 预期arr不变，arr2变为[0,1]

console.log(arr);             // 实际输出[0,1]

原理说明 #

• 数组属于引用类型，这类数据在内存中会先创建一个实际的对象（比如这里的[0,0]数组），变量arr存储的并不是数组元素本身，而是指向这个对象的内存地址。
• 当执行let arr2 = arr时，只是把arr存储的内存地址复制给了arr2，相当于两个变量指向了同一个数组对象。
• 所以你通过arr2[1] = ...修改的是这个共享的数组对象，用arr访问时自然会看到修改后的结果。

解决方法 #

如果想让arr和arr2指向独立的数组，需要创建原数组的副本，常用方式有：

• 扩展运算符：let arr2 = [...arr];
• Array.from方法：let arr2 = Array.from(arr);
• slice方法：let arr2 = arr.slice();

这样修改arr2的元素就不会影响原数组arr了。

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