JavaScript对同一数组两次调用sort赋值的变量结果异常是什么原因

JavaScript内置的Array.sort()是原地排序方法：它不会生成新的排序后数组，而是直接修改调用排序的原数组，同时返回值就是修改后的原数组的引用。

对应代码的执行逻辑：

• 第一次调用teamMembers.sort((a, b) => compareRanking(a,b,currentIndex))时，已经直接修改了原数组teamMembers的顺序，赋值给membersSortedByCurrentStageTotalPoints的是原数组的引用
• 第二次调用teamMembers.sort((a, b) => compare(a, b, "points"))时，再次修改了同一个原数组的顺序，因为两个变量存储的都是同一个原数组的引用，所以最终两个变量拿到的都是第二次排序后的结果。

每次排序前先对原数组做浅拷贝，基于拷贝后的独立数组执行排序：

// 方式1：扩展运算符拷贝数组
const membersSortedByCurrentStageTotalPoints = [...teamMembers].sort((a, b) => compareRanking(a,b,currentIndex));
      
// 方式2：slice方法拷贝数组
const membersSortedByRankingType = teamMembers.slice().sort((a, b) => compare(a, b, "points"))

如果数组存储的是引用类型元素，且后续需要修改排序后数组的元素属性不影响原数组，需要根据业务场景替换为深拷贝逻辑。

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