如何在React+TypeScript中按类型优先级及值降序排序对象数组

这个需求本质是多优先级排序：第一优先级按type分组顺序排列，第二优先级同组内按value值降序排列。Array.sort的比较函数天然支持多维度判断，不需要拆分数组再合并，直接在比较函数里按优先级逐层判断即可。

核心实现逻辑 #

• 先定义type的排序权重：数值越小的type，排列位置越靠前。对应需求，给Lesson设权重0，Exam设权重1，就能保证所有Lesson条目排在Exam前面
• 比较函数执行顺序：先比较两个条目的type权重，权重不同直接按权重排序；权重相同说明是同组条目，再沿用原来的value降序逻辑比较大小

适配React + TypeScript的完整代码 #

// 定义数据类型，满足TS类型检查要求
type ScheduleEntry = {
  type: 'Lesson' | 'Exam'
  value: number
}

const rawData: ScheduleEntry[] = [
  { "type": "Exam", "value": 27 },
  { "type": "Lesson", "value": 17 },
  { "type": "Lesson", "value": 4 },
  { "type": "Exam", "value": 67 }
]

// 维护type的排序优先级，后续新增类型直接在这里加权重即可
const typeSortWeight: Record<ScheduleEntry['type'], number> = {
  Lesson: 0,
  Exam: 1
}

// 执行排序：先拷贝原数组避免直接修改引用（React状态更新必须遵守不可变规则）
const sortedResult = [...rawData].sort((a, b) => {
  // 第一优先级：按type权重排序
  const weightDiff = typeSortWeight[a.type] - typeSortWeight[b.type]
  if (weightDiff !== 0) {
    return weightDiff
  }
  // 第二优先级：同type条目按value降序排列
  return b.value - a.value
})

注意事项 #

• Array.sort()是会直接修改原数组的方法，在React场景下不要直接对state数组调用sort，一定要先做浅拷贝（比如用[...arr]）再执行排序，避免触发不可变数据更新的问题
• 把type优先级抽成独立的映射对象，比在比较函数里写硬编码的if-else判断可维护性更高，后续要调整顺序、新增类型只需要修改映射表即可，不需要动排序核心逻辑

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