如何在Angular中实现数组元素的自定义指定顺序排序？

核心实现逻辑为预先定义目标顺序的权重映射表，再向Array.sort()传入自定义比较函数匹配优先级即可，原生JS/TS逻辑在Angular场景下可直接使用，同时支持封装为管道方便模板调用。

通用工具函数实现 #

/**
 * 自定义顺序排序工具方法
 * @param targetArr 待排序的数组
 * @param orderRef 你期望的排序顺序参照数组
 * @returns 排序后的新数组
 */
function customSort<T extends string | number>(targetArr: T[], orderRef: T[]): T[] {
  // 生成优先级映射表，O(1)复杂度查询元素优先级
  const priorityMap = new Map(orderRef.map((item, index) => [item, index]));
  // 不在参照顺序内的元素默认排到最后，需要排最前面可修改为-1
  const DEFAULT_PRIORITY = orderRef.length;
  // 用扩展运算符复制数组避免sort原地排序修改原数组，不需要保留原数组可直接调用targetArr.sort
  return [...targetArr].sort((a, b) => {
    const priorityA = priorityMap.get(a) ?? DEFAULT_PRIORITY;
    const priorityB = priorityMap.get(b) ?? DEFAULT_PRIORITY;
    return priorityA - priorityB;
  })
}

业务场景调用示例 #

示例1：names数组排序 #

const names = ["Eve","Jhon","Maria","Jadon"];
// 传入你期望的排序顺序作为参照
const nameOrder = ["Maria", "Eve", "Jadon", "Jhon"];
const sortedNames = customSort(names, nameOrder);
// 输出结果：["Maria", "Eve", "Jadon", "Jhon"]

示例2：表格表头排序 #

const items = ["id","name","email","fullname","tel"];
const itemOrder = ["name","id","email","tel","fullname"];
const sortedItems = customSort(items, itemOrder);
// 输出结果：["name","id","email","tel","fullname"]

Angular场景优化：封装为复用管道 #

如果需要在模板中频繁使用该排序逻辑，可封装为Angular纯管道，避免组件中重复编写逻辑：

// custom-sort.pipe.ts
import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'customSort',
  standalone: true // Angular 14+ 支持 standalone 特性，低版本可去掉后在对应模块声明
})
export class CustomSortPipe implements PipeTransform {
  transform<T extends string | number>(value: T[], orderRef: T[]): T[] {
    if (!Array.isArray(value) || !Array.isArray(orderRef)) return value;
    const priorityMap = new Map(orderRef.map((item, index) => [item, index]));
    const DEFAULT_PRIORITY = orderRef.length;
    return [...value].sort((a, b) => {
      const priorityA = priorityMap.get(a) ?? DEFAULT_PRIORITY;
      const priorityB = priorityMap.get(b) ?? DEFAULT_PRIORITY;
      return priorityA - priorityB;
    })
  }
}

模板中直接调用管道即可：

<!-- 示例：遍历渲染排序后的表头 -->
<th *ngFor="let col of items | customSort: itemOrder">{{ col }}</th>

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