为何ascending变量随原数组排序改变？如何使其保持不变？

原因分析 #

JavaScript 里的数组属于引用类型，array1.sort() 是原地排序方法——它不会生成新数组，而是直接修改原数组本身。你把 array1.sort(...) 的结果赋值给 ascending，本质上只是让 ascending 指向了和 array1 同一个内存地址的数组对象。所以后续对 array1 做降序排序时，修改的是这个共享的数组对象，ascending 自然会跟着变化。

解决方法 #

要让 ascending 保持独立不变，核心是先创建原数组的副本，再对副本排序，避免和原数组共享引用。常用的副本创建方式有以下几种：

方法1：使用扩展运算符（...） #

const array1 = [1, 30, 4, 21, 100000, 99];
// 先复制原数组，再对副本排序
const ascending = [...array1].sort((a, b) => a - b); 
console.log(ascending); // [1, 4, 21, 30, 99, 100000]
array1.sort((a, b) => b - a);
console.log(array1); // [100000, 99, 30, 21, 4, 1]
console.log(ascending); // 依然是升序结果，不受影响

方法2：使用Array.slice()方法 #

const array1 = [1, 30, 4, 21, 100000, 99];
// slice()不传参数时会返回原数组的完整副本
const ascending = array1.slice().sort((a, b) => a - b); 
console.log(ascending);
array1.sort((a, b) => b - a);
console.log(array1);
console.log(ascending); // 保持升序状态

方法3：使用Array.from()方法 #

const array1 = [1, 30, 4, 21, 100000, 99];
// 基于原数组生成新数组
const ascending = Array.from(array1).sort((a, b) => a - b); 
console.log(ascending);
array1.sort((a, b) => b - a);
console.log(array1);
console.log(ascending); // 不受原数组修改影响

以上方法都会生成独立的新数组，和原数组指向不同的内存地址，后续修改原数组就不会干扰到 ascending 的值了。

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