为何JavaScript两次不同sort排序赋值后输出相同结果

核心原因 #

JavaScript的Array.prototype.sort()是原地排序方法，执行时会直接修改原数组，且返回值就是修改后的原数组本身，而非新生成的数组副本。你两次赋值拿到的都是同一个原数组的引用，自然最终都会显示最后一次修改后的结果。

代码执行流程拆解 #

• 第一步：声明数组let numbers = [1,3,2,5,4]，此时numbers指向内存中的一个数组对象
• 第二步：执行numbers.sort((a, b)=> b-a)：直接修改原数组为降序[5,4,3,2,1]，然后将原数组的引用赋值给sortedHighesttoLowest，此时numbers和sortedHighesttoLowest指向同一个数组
• 第三步：执行numbers.sort((a, b)=> a-b)：再次修改同一个原数组，将其调整为升序[1,2,3,4,5]，再将原数组的引用赋值给sortedLowesttoHighest，此时三个变量都指向同一个数组对象
• 最终打印两个变量时，读取的都是同一个数组最后修改后的结果，所以输出一致

正确实现方式 #

如果需要保留两个不同排序规则的结果，每次排序前都要先拷贝一份新的数组副本，再对副本执行排序操作，避免修改同一个原数组：

let numbers = [1,3,2,5,4];
// 用展开运算符拷贝原数组生成新数组，再排序
let sortedHighesttoLowest = [...numbers].sort((a, b)=> b-a);
let sortedLowesttoHighest = [...numbers].sort((a, b)=> a-b);

console.log(sortedHighesttoLowest); // 输出 [5, 4, 3, 2, 1]
console.log(sortedLowesttoHighest); // 输出 [1, 2, 3, 4, 5]

你也可以用numbers.slice()、Array.from(numbers)等方法实现数组浅拷贝，效果和展开运算符一致。

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