JavaScript Sort函数排序结果不一致问题咨询

问题描述 #

我有一个客户列表，在表格中展示后支持点击表头排序：

• 首次点击客户名称表头：列表按客户名称A-Z排序
• 再次点击：列表按客户名称Z-A排序
• 第三次点击：期望回到首次A-Z排序的状态，但实际排序后的顺序与首次不一致，虽然都是A-Z，但相同客户名称的元素顺序发生了变化。

当前使用的排序代码：

if (this.orderByColSide)
   authList.sort((a, b) => a.customerCode.toLowerCase() > b.customerCode.toLowerCase() ? 1 : -1);
else
   authList.sort((a, b) => a.customerCode.toLowerCase() > b.customerCode.toLowerCase() ? -1 : 1);            

问题根源 #

1. 直接修改原数组导致顺序污染：每次排序都是在当前已排序的数组上进行操作，而非基于原始未排序数组。第三次点击时，是在Z-A排序后的数组基础上重新做A-Z排序，这会导致相同customerCode的元素顺序和首次从原始数组排序的结果不同。
2. 排序函数的不稳定性：即便ES2019后JavaScript的Array.sort()实现了稳定排序，但你的排序函数仅比较customerCode，当两个元素的customerCode完全相同时，它们的相对顺序依赖于当前数组的状态，而非原始顺序，最终导致多次排序后相同分组的元素顺序混乱。

解决方案 #

核心思路 #

• 保存原始数组的副本，每次排序都基于原始数组重新计算，避免在已排序数组上反复修改。
• 为排序函数增加稳定排序的依据：当customerCode相同时，使用元素的唯一标识（如id）来固定相对顺序，保证每次升序/降序的结果可预测。

代码实现 #

1. 初始化时保存原始数组：

// 初始化阶段保存原始数组的拷贝（若元素为复杂对象，需使用深拷贝）
this.originalAuthList = [...authList];
// 用于页面展示的数组，初始为原始数组
this.displayedAuthList = [...this.originalAuthList];
// 标记当前排序状态：'asc'（升序）、'desc'（降序）、'original'（原始）
this.sortState = 'original';

2. 表头点击的排序处理函数：

handleCustomerSort() {
  switch (this.sortState) {
    case 'original':
    case 'desc':
      // 切换为升序，基于原始数组排序
      this.displayedAuthList = [...this.originalAuthList].sort((a, b) => {
        const codeA = a.customerCode.toLowerCase();
        const codeB = b.customerCode.toLowerCase();
        // 优先比较客户名称
        if (codeA < codeB) return -1;
        if (codeA > codeB) return 1;
        // 名称相同时，用唯一id保证顺序稳定
        return a.id - b.id;
      });
      this.sortState = 'asc';
      break;
    case 'asc':
      // 切换为降序，基于原始数组排序
      this.displayedAuthList = [...this.originalAuthList].sort((a, b) => {
        const codeA = a.customerCode.toLowerCase();
        const codeB = b.customerCode.toLowerCase();
        // 优先比较客户名称
        if (codeA > codeB) return -1;
        if (codeA < codeB) return 1;
        // 名称相同时，按id降序，保证和升序的顺序对应反转
        return b.id - a.id;
      });
      this.sortState = 'desc';
      break;
  }
}

说明 #

• 每次排序都从原始数组复制一份进行操作，避免修改原始数据，保证每次排序的基准一致。
• 增加id作为次级排序条件，确保相同customerCode的元素在每次排序时的相对顺序固定，解决了排序不稳定导致的顺序混乱问题。

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