JavaScript自定义排序实现status字段按指定顺序排列

你当前的排序是直接按字符串字典序对比，无法实现自定义的状态顺序，只需要提前定义状态的优先级权重，按权重排序即可，同时建议先浅拷贝数组再排序，避免sort()方法修改原始数据产生副作用。

具体修改步骤 #

1. 先定义你期望的状态优先级映射，数值越小排序越靠前：

// 顺序对应 active(第1位) -> waiting(第2位) -> updated(第3位)
const statusPriority = {
  active: 0,
  waiting: 1,
  updated: 2
}

2. 修改表格渲染的排序逻辑，替换原有的字符串对比逻辑，改为对比状态对应的权重值：

<tbody>
  {/* 用[...results]浅拷贝原数组，避免sort修改原始数据 */}
  {[...results].sort((a, b) => {
    return statusPriority[a.status] - statusPriority[b.status]
  }).map(el => {
    return (
      <tr key={el.id}>
        <td>{el.id}</td>
        <td>{el.amount}</td>
        <td>{el.time}</td>
        <td>{el.status}</td>
      </tr> 
    );
  })}
</tbody>

逻辑说明 #

• 自定义优先级映射可以灵活调整排序规则，后续如果要新增状态、调整顺序只需要修改statusPriority对象即可，不需要改动排序核心逻辑
• 比较函数返回两个权重的差值，符合Array.sort()的返回值规则：差值小于0时a排在b前面，差值大于0时b排在a前面，等于0时顺序不变
• 代码中给<tr>补充了key属性，符合React列表渲染的规范要求，避免控制台警告和渲染异常

如果后续有新增的status值，记得同步在statusPriority里补充对应的权重，避免出现undefined导致排序异常。

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