如何使用localeCompare按指定优先级对数组进行自定义排序

实现思路 #

你之前使用localeCompare是按字符串的Unicode编码顺序排序，end首字母e在字母序里比live的l、schedule的s都靠前，所以排序结果和业务要求不符。
你需要先给每个liveStatus定义优先级权重，排序时按权重值从小到大排列即可匹配业务顺序。另外注意Array.sort()是原地排序方法，直接操作状态数组会修改原state引发副作用，排序前请先拷贝原数组。

具体实现代码 #

// 定义状态优先级：值越小排名越靠前
const statusPriority = {
  live: 1,
  schedule: 2,
  end: 3
}

const displayBulletins = [...bulletins] // 展开运算符拷贝原数组，避免修改原state
    .sort((a,b) => {
        // 按优先级权重差值排序
        return statusPriority[a.liveStatus] - statusPriority[b.liveStatus]
        // 如果同状态需要按id排序，可补充兜底逻辑：
        // const diff = statusPriority[a.liveStatus] - statusPriority[b.liveStatus]
        // return diff !== 0 ? diff : a.id - b.id
    })
    .map((bulletin) => {
        return (
            <Fragment key={bulletin.id}>
                <BulletinList
                    bulletin={bulletin}
                />
            </Fragment>
        );
    })

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