JavaScript对象数组按字符串值排序异常问题及解决方法

原因 #

你的代码出现问题的核心原因是 JavaScript的Array.sort()是原地排序方法：它会直接修改调用它的原数组，而不是返回一个全新的数组。

当你先执行降序排序时，原数组（你示例代码里存在变量名笔误：定义的数组是myArray，但排序时用的是people，实际应该是同一个数组的引用）已经被直接修改为降序状态。此时再执行升序排序，你是在已经被降序修改过的数组上操作，而非原始数组。如果你的测试流程是连续运行这两段代码，就会出现逻辑错误，导致你误以为升序排序无效。

解决方案 #

要解决这个问题，你需要每次排序时基于原数组的副本操作，避免修改原始数组，确保每次排序都从原始数据出发。

正确代码示例 #

首先定义原始数组：

const myArray = [
    { name: "Name 1", age: 25 },
    { name: "Name 2", age: 13 },
    { name: "Name 3", age: 54 },
    { name: "Name 4", age: 56 },
    { name: "Name 5", age: 9 },
];

降序排序（基于副本）

const compareByNameDescending = (a, b) => b.name.localeCompare(a.name);
// 使用扩展运算符创建数组副本，再执行排序
const sortedArrayByNameDescending = [...myArray].sort(compareByNameDescending);
console.log(sortedArrayByNameDescending); // 输出正确的降序结果

升序排序（基于副本）

const compareByNameAscending = (a, b) => a.name.localeCompare(b.name);
// 同样基于原数组的副本排序
const sortedArrayByNameAscending = [...myArray].sort(compareByNameAscending);
console.log(sortedArrayByNameAscending); // 输出正确的升序结果

你也可以用Array.slice()方法创建副本，效果相同：

const sortedArrayByNameAscending = myArray.slice().sort(compareByNameAscending);

如果你需要在同一个环境中先后测试升序和降序，只要每次都基于原数组的副本操作，就能得到正确的结果，不会互相干扰。

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