Angular项目中TypeScript对象数组自定义排序及.sort()用法详解

嗨，作为编程新手，咱先把.sort()的底层逻辑掰明白，再一步步实现你要的排序需求，保证看完就能上手！

先搞懂数组.sort()的核心逻辑 #

数组的.sort()方法是用来给数组元素排序的，但它有几个关键细节要注意：

• 原地排序：它会直接修改原数组！如果不想破坏原数组的顺序，记得先复制一份（比如用[...原数组]或者.slice()）
• 依赖比较函数：你得给它传一个「比较函数」，这个函数的返回值直接决定两个元素的先后顺序：
  • 返回负数：第一个元素排在第二个前面
  • 返回正数：第二个元素排在第一个前面
  • 返回0：两个元素位置不变

针对你的需求写自定义比较逻辑 #

你的需求是：先排所有fast car（同类别按id升序），再排slow car（同类别也按id升序）。那我们的比较函数要分两步判断：

第一步：给类别设置优先级权重 #

把fast car的权重设为0，slow car设为1——权重越小，排序越靠前。这样比较两个元素的类别时，直接用权重差值就能决定顺序。

第二步：同类别下按id升序排列 #

如果两个元素的类别相同，就比较它们的id：用a.id - b.id，因为如果a的id更小，返回负数，a就排在前面，正好是升序。

完整代码实现 #

方式一：单独定义比较函数（更清晰，适合新手） #

// 先定义类型（TypeScript规范，避免类型报错）
interface Car {
  id: number;
  category: string;
}

// 你的原始数组
let cars: Car[] = [ 
  { "id": 3, "category": "fast car" }, 
  { "id": 0, "category": "fast car" }, 
  { "id": 1, "category": "slow car" }, 
  { "id": 2, "category": "fast car" } 
];

// 自定义比较函数
function compareCars(a: Car, b: Car) {
  // 给不同类别分配权重
  const categoryWeight = {
    "fast car": 0,
    "slow car": 1
  };
  const weightA = categoryWeight[a.category];
  const weightB = categoryWeight[b.category];

  // 第一步：先比类别权重
  if (weightA !== weightB) {
    return weightA - weightB; // 0-1=-1，所以fast car排在slow car前面
  }

  // 第二步：类别相同，比id升序
  return a.id - b.id;
}

// 复制原数组再排序，避免修改原数组
const sortedCars = [...cars].sort(compareCars);

console.log(sortedCars);
// 输出结果完全符合你的预期：
// [
//   { "id": 0, "category": "fast car" },
//   { "id": 2, "category": "fast car" },
//   { "id": 3, "category": "fast car" },
//   { "id": 1, "category": "slow car" }
// ]

方式二：箭头函数简写（更简洁） #

如果觉得单独写函数麻烦，也可以用箭头函数直接嵌入到.sort()里：

const sortedCars = [...cars].sort((a: Car, b: Car) => {
  const categoryWeight = { "fast car": 0, "slow car": 1 };
  const weightDiff = categoryWeight[a.category] - categoryWeight[b.category];
  // 权重不同就返回差值，相同就比id
  return weightDiff !== 0 ? weightDiff : a.id - b.id;
});

新手必看的注意点 #

1. 为什么要复制数组？
   因为.sort()是「原地排序」，会直接修改原数组。如果之后还需要用到原始顺序的cars数组，一定要先复制（[...cars]是ES6的扩展语法，简单好用）。
2. TypeScript的类型定义
   给数组元素定义Car接口，能让TypeScript帮你检查类型错误，避免写错属性名（比如把category写成cate），代码也更易读。
3. 扩展新类别怎么办？
   以后如果加新的汽车类别，比如sports car，只要在categoryWeight里加一行"sports car": 0.5，它就会排在fast car和slow car之间，非常灵活。

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