React中如何按指定自定义顺序对对象的键值条目进行排序

核心思路 #

提前定义固定顺序的键列表，通过每个键在列表中的索引值作为排序权重，即可实现自定义顺序排序，无需依赖默认的字母序或值排序。

基础实现示例（对应你的测试用例） #

const object = {
  "undefined": 10,
  "women": 3,
  "men": 6
}
// 定义固定排序顺序，下标越小排序优先级越高
const sortOrder = ['men', 'women', 'undefined']
const entries = Object.entries(object).sort((a, b) => {
  // 取两个条目的键，返回对应索引的差值作为排序判断依据
  return sortOrder.indexOf(a[0]) - sortOrder.indexOf(b[0])
})
const sortedObject = Object.fromEntries(entries)
console.log(sortedObject)
// 输出结果符合预期：{ men: 6, women: 3, undefined: 10 }

业务代码修改（statsParser.js） #

把原来按值降序的sort逻辑替换为自定义键排序即可，修改后代码如下：

import { t } from "i18n";

export default (genders) => {
  if (!genders) return;
  // 定义固定的键排序顺序
  const sortOrder = ['men', 'women', 'undefined']
  const entries = Object.entries(genders).sort((a, b) => {
    return sortOrder.indexOf(a[0]) - sortOrder.indexOf(b[0])
  });

  const translatedEntries = entries.map((entry) => [
    t(`content.stats.genders.${entry[0].toLowerCase()}`),
    entry[1],
  ]);

  const translatedGenders = Object.fromEntries(translatedEntries);

  return translatedGenders;
};

拓展说明 #

如果后续可能出现不在sortOrder列表里的其他键，可以在排序逻辑里加兜底规则，比如把未知键统一排在最后：

.sort((a, b) => {
  const aIndex = sortOrder.indexOf(a[0])
  const bIndex = sortOrder.indexOf(b[0])
  // 不在列表里的键索引为-1，兜底设为列表最大长度，统一排在末尾
  return (aIndex === -1 ? sortOrder.length : aIndex) - (bIndex === -1 ? sortOrder.length : bIndex)
})

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