JavaScript数组两次排序异常：初始日期排序正常，切换创建时间排序出问题

嘿，我之前也踩过类似的排序切换坑，咱们一步步来揪出问题所在！

先确认基础：事件触发是否正常 #

首先得搞清楚，切换单选按钮的时候，对应的排序函数真的被调用了吗？

• 检查单选按钮的事件绑定：建议用change事件而不是click（因为用户可能用键盘切换单选按钮，click不会触发）。比如原生JS的写法：

// 给所有排序单选按钮绑定change事件
document.querySelectorAll('input[name="sort"]').forEach(radio => {
  radio.addEventListener('change', (e) => {
    console.log('切换排序类型：', e.target.value); // 先打个日志确认事件触发了
    if (e.target.value === 'datesToPlay') {
      sortByDatesToPlay();
    } else {
      sortByCreatedAt();
    }
  });
});

如果控制台没输出日志，那就是事件绑定的问题，比如单选按钮的name属性不统一，或者绑定代码执行时DOM还没加载（可以把代码放在DOMContentLoaded事件里）。

检查createdAt排序函数的逻辑 #

如果事件确实触发了，那大概率是排序函数本身的问题：

1. 日期格式的坑 #

如果createdAt是字符串格式（比如ISO字符串"2024-05-20T12:00:00Z"或者本地格式"05/20/2024"），直接比较字符串可能会出错！
正确的做法是转成Date对象再比较：

// 示例：按创建日期降序（最新的在前）
function sortByCreatedAt(items) {
  // 一定要复制原数组再排序，避免修改原始数据
  return [...items].sort((a, b) => {
    const dateA = new Date(a.createdAt);
    const dateB = new Date(b.createdAt);
    // 降序：dateB - dateA；升序就反过来
    return dateB - dateA;
  });
}

如果createdAt是时间戳（数字），那直接比较数字就行，不用转Date。

2. 排序顺序搞反了？ #

是不是你期望的是“最新创建的在前”，但写的是升序？可以先手动打印排序后的数组，看看顺序是不是符合预期。

确认数组更新是否触发了页面渲染 #

如果排序后的数组是对的，但页面没变化，那就是渲染的问题：

• 原生JS场景：排序后要重新渲染列表DOM，比如先清空容器，再循环添加排序后的每一项，而不是只修改数组但不更新DOM。
• 框架场景（React/Vue等）：要确保排序后更新了状态/响应式数据。比如React里必须用setState更新数组，而不是直接修改原数组（因为React不会检测数组的原地修改）：

const [items, setItems] = useState(originalItems);

const handleSort = (sortType) => {
  let sortedItems;
  if (sortType === 'datesToPlay') {
    sortedItems = [...originalItems].sort(datesToPlayComparator);
  } else {
    sortedItems = [...originalItems].sort(createdAtComparator);
  }
  setItems(sortedItems); // 必须更新状态触发重渲染
};

最后一个容易忽略的点：始终基于原始数组排序 #

别在已经排序过的数组上再次排序！比如初始排序用了datesToPlay，切换到createdAt时，如果是对已经排序过的数组再排序，结果可能会混乱。
正确的做法是保存一份原始的未排序数组，每次切换排序都从原始数组出发：

// 保存API获取的原始数组，不要修改它
const originalItems = await fetchItems();

// 初始排序
let currentItems = [...originalItems].sort(datesToPlayComparator);

// 切换排序时，始终基于原始数组
function switchSort(sortType) {
  if (sortType === 'datesToPlay') {
    currentItems = [...originalItems].sort(datesToPlayComparator);
  } else {
    currentItems = [...originalItems].sort(createdAtComparator);
  }
  renderItems(currentItems); // 重新渲染
}

按照这个步骤排查，应该能找到问题所在啦！

内容的提问来源于stack exchange，提问作者Darío Villalta