JavaScript中reverse()方法引发的数组引用问题求助

我在测试reverse()方法的工作机制时，遇到了无法理解的情况：

测试1：直接调用reverse() #

初始代码：

let muhArray = [1,2,3,4,5];

let reversedArray = muhArray.reverse();

console.log(`muhArray: ${muhArray}`);

console.log(`reversedArray: ${reversedArray}`);

输出：

muhArray: 5,4,3,2,1（原数组也被修改）
reversedArray: 5,4,3,2,1

这部分我理解reverse()是原地反转数组，赋值操作也会修改原数组muhArray。

测试2：先复制再反转（先打印副本） #

于是我创建了副本muhArrayCopy来保留原数组：

let muhArray = [1,2,3,4,5];

let muhArrayCopy = muhArray;

console.log(`muhArrayCopy: ${muhArrayCopy}`);

let reversedArray = muhArray.reverse();

console.log(`reversedArray: ${reversedArray}`);

输出：

muhArrayCopy: 1,2,3,4,5
reversedArray: 5,4,3,2,1

这时候一切看似正常，但调整代码顺序后出现了问题。

测试3：先复制、反转，再打印副本 #

let muhArray = [1,2,3,4,5];

let muhArrayCopy = muhArray;

let reversedArray = muhArray.reverse();

console.log(`muhArrayCopy: ${muhArrayCopy}`);

console.log(`reversedArray: ${reversedArray}`);

输出：

muhArrayCopy: 5,4,3,2,1
reversedArray: 5,4,3,2,1

这让我疑惑：muhArray.reverse()居然影响了已声明并初始化的muhArrayCopy？这是代码执行顺序的问题吗？我了解过变量提升，但没法解释这个情况。

这和变量提升无关，核心原因是JavaScript中数组属于引用类型，赋值操作复制的是内存引用，而非数组本身：

• 执行let muhArrayCopy = muhArray;时，并没有生成新的数组，只是让muhArrayCopy和muhArray指向内存里同一个数组对象。
• 测试2中，你在调用reverse()前就打印了muhArrayCopy，此时数组还没被反转，所以输出原内容；
• 测试3中，你先调用reverse()反转了内存中的那个唯一数组，再打印muhArrayCopy，它指向的已经是反转后的数组，所以输出反转结果。

正确复制数组的方法 #

如果要保留原数组，需要创建数组的独立副本，常用方法有：

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

用这些方法创建副本后，muhArray.reverse()只会修改原数组，不会影响副本，因为它们指向内存中不同的数组对象。

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