本文详细介绍了如何在 typescript 中对对象数组进行多属性级联排序。通过构建一个通用函数，我们首先展示了如何基于指定属性键序列进行默认比较排序，然后进一步扩展该功能，允许为特定属性提供自定义比较器，从而实现灵活且类型安全的复杂排序逻辑。
在前端或后端数据处理中，经常需要对包含多个属性的对象数组进行排序。当需要按照一个属性排序，如果该属性值相等，则继续按照第二个属性排序，依此类推，这就构成了多属性级联排序的需求。typescript 提供了强大的类型系统，使得我们能够构建既灵活又类型安全的通用排序函数。
理解级联排序原理
级联排序的核心思想是：遍历一个预定义的属性优先级列表。对于列表中的每个属性，比较两个待排序对象在该属性上的值。
- 如果当前属性的值不相等，则根据该属性的比较结果确定两个对象的相对顺序，并停止进一步比较。
- 如果当前属性的值相等，则继续检查列表中的下一个属性。
- 如果所有属性都比较完毕且值都相等，则认为两个对象相等，它们的相对顺序保持不变。
实现基本的多属性级联排序
首先，我们来构建一个基本的 sortByKeys 函数，它接受一个对象数组和一组用于排序的属性键。这个版本将使用 JavaScript 的默认比较操作符 (<, >) 来进行比较。
interface Item { a: string; b: number; c: Date; } /** * 根据指定的属性键序列对数组进行级联排序。 * @param items 待排序的对象数组。 * @param keys 优先级从高到低的属性键数组。 */ function sortByKeys<T>(items: T[], keys: (keyof T)[]): void { items.sort((item1, item2) => { for (const key of keys) { const v1 = item1[key]; const v2 = item2[key]; // 如果值不相等，则根据当前属性决定顺序 if (v1 < v2) return -1; if (v2 < v1) return 1; } // 所有属性都相等，保持原始顺序 return 0; }); } // 示例用法 const items: Item[] = [ { a: 'aa', b: 1, c: new Date('2023-01-03') }, { a: 'a', b: 2, c: new Date('2023-01-01') }, { a: 'a', b: 1, c: new Date('2023-01-02') }, { a: 'ab', b: 1, c: new Date('2023-01-04') }, ]; console.log('原始数组:', JSON.parse(json.stringify(items))); // 深拷贝，避免原始数组被修改影响后续示例 // 示例1: 优先按 'b' 排序，然后按 'a' 排序 sortByKeys(items, ['b', 'a']); console.log('按 b, a 排序:', items); /* 输出示例: [ { a: 'a', b: 1, c: Date }, { a: 'aa', b: 1, c: Date }, { a: 'ab', b: 1, c: Date }, { a: 'a', b: 2, c: Date } ] */ // 示例2: 优先按 'a' 排序，然后按 'b' 排序 const items2: Item[] = [ { a: 'aa', b: 1, c: new Date('2023-01-03') }, { a: 'a', b: 2, c: new Date('2023-01-01') }, { a: 'a', b: 1, c: new Date('2023-01-02') }, { a: 'ab', b: 1, c: new Date('2023-01-04') }, ]; sortByKeys(items2, ['a', 'b']); console.log('按 a, b 排序:', items2); /* 输出示例: [ { a: 'a', b: 1, c: Date }, { a: 'a', b: 2, c: Date }, { a: 'aa', b: 1, c: Date }, { a: 'ab', b: 1, c: Date } ] */
代码解析：
- sortByKeys<T>(items: T[], keys: (keyof T)[]): void: 这是一个泛型函数，T 代表数组中对象的类型。keyof T 确保 keys 数组中的元素都是 T 类型对象的有效属性名，提供了类型安全。
- items.sort((item1, item2) => { … }): 使用 JavaScript 数组的内置 sort 方法，它接受一个比较函数。
- for (const key of keys): 遍历指定的属性键。
- const v1 = item1[key]; const v2 = item2[key];: 获取两个对象在当前属性上的值。
- if (v1 < v2) return -1; if (v2 < v1) return 1;: 这是标准的比较逻辑。如果 v1 小于 v2，返回 -1（item1 排在 item2 前面）；如果 v2 小于 v1，返回 1（item2 排在 item1 前面）。
- return 0;: 如果所有指定的属性值都相等，则返回 0，表示两个元素的相对顺序不变。
这种基本实现适用于大多数基本数据类型（如字符串、数字）的默认升序比较。
实现带自定义比较器的多属性级联排序
在某些情况下，默认的 < 和 > 比较操作可能不满足需求。例如，日期对象需要更精确的比较，或者字符串需要进行不区分大小写的比较，或者存在特定的业务逻辑需要自定义比较规则。为了支持这些场景，我们可以扩展 sortByKeys 函数，使其能够接受自定义比较器。
interface Item { a: string; b: number; c: Date; } /** * 自定义比较器类型，返回 -1 (v1 < v2), 0 (v1 == v2), 或 1 (v1 > v2)。 */ type CustomSorter<V> = (value1: V, value2: V) => -1 | 0 | 1; /** * 根据指定的属性键序列和可选的自定义比较器对数组进行级联排序。 * @param items 待排序的对象数组。 * @param keys 优先级从高到低的属性键数组。 * @param customSorters 一个对象，键是属性名，值是该属性的自定义比较器。 */ function sortByKeys<T>( items: T[], keys: (keyof T)[], customSorters: Partial<{ [key in (keyof T)]: CustomSorter<T[key]> }> = {} ): void { items.sort((item1, item2) => { for (const key of keys) { const v1 = item1[key]; const v2 = item2[key]; const customSorter = customSorters[key]; if (customSorter) { // 如果存在自定义比较器，则使用它 const result = customSorter(v1 as T[typeof key], v2 as T[typeof key]); if (result !== 0) return result; } else { // 否则使用默认比较 if (v1 < v2) return -1; if (v2 < v1) return 1; } } return 0; }); } // 辅助函数生成随机日期 const randomDate = () => new Date(Date.now() + Math.floor(Math.random() * 1000000)); const itemsWithDates: Item[] = [ { a: 'aa', b: 1, c: new Date('2023-01-03T10:00:00Z') }, { a: 'a', b: 2, c: new Date('2023-01-01T12:00:00Z') }, { a: 'a', b: 1, c: new Date('2023-01-02T14:00:00Z') }, { a: 'ab', b: 1, c: new Date('2023-01-04T08:00:00Z') }, ]; console.log('n原始带日期数组:', JSON.parse(JSON.stringify(itemsWithDates))); // 示例3: 优先按 'c' (日期) 排序，使用自定义日期比较器 sortByKeys(itemsWithDates, ['c'], { 'c': (date1: Date, date2: Date) => { if (date1 < date2) return -1; if (date2 < date1) return 1; return 0; }, }); console.log('按 c (自定义日期) 排序:', itemsWithDates); /* 输出示例: [ { a: 'a', b: 2, c: Date('2023-01-01T12:00:00.000Z') }, { a: 'a', b: 1, c: Date('2023-01-02T14:00:00.000Z') }, { a: 'aa', b: 1, c: Date('2023-01-03T10:00:00.000Z') }, { a: 'ab', b: 1, c: Date('2023-01-04T08:00:00.000Z') } ] */ // 示例4: 优先按 'a' (字符串，不区分大小写)，然后按 'b' (数字) 排序 const itemsCaseInsensitive: Item[] = [ { a: 'apple', b: 2, c: randomDate() }, { a: 'banana', b: 1, c: randomDate() }, { a: 'apple', b: 1, c: randomDate() }, { a: 'Banana', b: 3, c: randomDate() }, ]; console.log('n原始不区分大小写数组:', JSON.parse(JSON.stringify(itemsCaseInsensitive))); sortByKeys(itemsCaseInsensitive, ['a', 'b'], { 'a': (str1: string, str2: string) => { const s1 = str1.toLowerCase(); const s2 = str2.toLowerCase(); if (s1 < s2) return -1; if (s2 < s1) return 1; return 0; }, }); console.log('按 a (不区分大小写), b 排序:', itemsCaseInsensitive); /* 输出示例: [ { a: 'apple', b: 1, c: Date }, { a: 'Apple', b: 2, c: Date }, { a: 'banana', b: 1, c: Date }, { a: 'Banana', b: 3, c: Date } ] */
代码解析：
- type CustomSorter<V> = (value1: V, value2: V) => -1 | 0 | 1;: 定义了一个泛型类型 CustomSorter，它是一个函数，接受两个相同类型的值并返回一个数字，表示它们的相对顺序。这与 Array.prototype.sort 的比较函数签名一致。
- customSorters: Partial<{ [key in (keyof T)]: CustomSorter<T[key]> }> = {}: 这是关键的类型定义。
- [key in (keyof T)]: 这是一个映射类型，它遍历 T 的所有属性键。
- CustomSorter<T[key]>: 对于每个属性键 key，其对应的比较器类型是 CustomSorter，且其泛型参数是该属性的实际类型 T[key]。这确保了为特定属性提供的自定义比较器只接受该属性的正确类型值。
- Partial<{ … }>: 表示 customSorters 对象是可选的，并且其中的每个属性（即每个自定义比较器）也是可选的。
- = {}: 提供了默认值，使得 customSorters 参数可以省略。
- if (customSorter) { … } else { … }: 在循环中，我们首先检查当前 key 是否在 customSorters 对象中定义了自定义比较器。如果定义了，就使用它；否则，回退到默认的 < 和 > 比较。
- v1 as T[typeof key], v2 as T[typeof key]: 这里使用了类型断言，因为 TypeScript 在 customSorter(v1, v2) 调用时，可能无法自动推断出 v1 和 v2 的精确类型就是 T[typeof key]，尽管从逻辑上我们知道它们是。这个断言是为了满足 CustomSorter 的类型要求。
注意事项与总结
- 类型安全: 使用 keyof T 和映射类型 Partial<{ [key in (keyof T)]: CustomSorter<T[key]> }> 极大地增强了代码的类型安全性，避免了在运行时出现类型不匹配的问题。
- 性能: Array.prototype.sort 通常是高效的，但对于非常大的数组和复杂的比较逻辑，性能可能会受到影响。在大多数常见场景下，这种实现方式的性能是可接受的。
- 排序方向: 默认实现和示例中的自定义比较器都实现了升序排序。如果需要降序排序，只需在比较函数中将 1 和 -1 的返回值对调即可。例如，if (v1 > v2) return -1; if (v2 > v1) return 1;。
- 稳定性: JavaScript 的 Array.prototype.sort 方法不保证是稳定的（即相等元素的相对顺序可能改变）。如果需要稳定排序，可以考虑引入额外的索引来辅助比较，但这会增加复杂性。在级联排序中，当所有比较属性都相等时，返回 0 会尽可能保持元素的相对顺序。
通过上述方法，我们可以在 TypeScript 中灵活、高效且类型安全地实现对象数组的多属性级联排序，无论是简单的默认比较，还是复杂的自定义比较逻辑，都能得到优雅的解决方案。