Angular：TypeScript实现数组对象中嵌套details按priorityInDisplay排序

首先为你的数据结构定义TypeScript接口，确保类型安全：

interface Detail {
  designation: string;
  priorityInDisplay: string;
}

interface GroupItem {
  Groupe: number;
  GroupePrestation: string;
  total: number;
  details: Detail;
}

基础排序实现 #

以下是针对数组中对象，按照嵌套的details.priorityInDisplay属性进行升序/降序排序的方法：

升序排序

const sortByPriorityAsc = (items: GroupItem[]): GroupItem[] => {
  // 复制原数组避免修改源数据
  return [...items].sort((a, b) => {
    // 使用localeCompare进行字符串自然排序
    return a.details.priorityInDisplay.localeCompare(b.details.priorityInDisplay);
  });
};

降序排序

const sortByPriorityDesc = (items: GroupItem[]): GroupItem[] => {
  return [...items].sort((a, b) => {
    return b.details.priorityInDisplay.localeCompare(a.details.priorityInDisplay);
  });
};

边界情况处理 #

如果存在部分对象缺少details或priorityInDisplay属性的情况，可以添加兜底逻辑，确保排序不会报错：

// 兼容可能缺失属性的安全排序函数
const sortByPrioritySafe = (
  items: (GroupItem & { details?: Partial<Detail> })[]
): typeof items => {
  return [...items].sort((a, b) => {
    // 兜底值设为"Z"，确保缺失属性的项排在最后
    const priorityA = a.details?.priorityInDisplay ?? "Z";
    const priorityB = b.details?.priorityInDisplay ?? "Z";
    return priorityA.localeCompare(priorityB);
  });
};

示例用法 #

const sampleData: GroupItem[] = [
  { Groupe: 1, GroupePrestation: "xxx", total: 200, details: { designation: "XXX", priorityInDisplay: "C" } },
  { Groupe: 2, GroupePrestation: "yyy", total: 150, details: { designation: "YYY", priorityInDisplay: "A" } },
  { Groupe: 3, GroupePrestation: "zzz", total: 300, details: { designation: "ZZZ", priorityInDisplay: "B" } },
];

// 升序排序结果：A → B → C
const sortedAscData = sortByPriorityAsc(sampleData);
// 降序排序结果：C → B → A
const sortedDescData = sortByPriorityDesc(sampleData);

说明：localeCompare方法会遵循当前语言环境的字符串排序规则，适合处理字母类优先级的排序需求；使用扩展运算符[...items]复制原数组，保证排序操作不会修改原始数据。

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