
JavaScript Array.prototype.sort() 基础
javascript 的 array.prototype.sort() 方法用于对数组的元素进行原地排序,并返回数组。默认情况下,sort() 方法会将数组元素转换为字符串,然后按照它们的 utf-16 码元值顺序进行排序。然而,对于数值或复杂对象排序,这种默认行为往往不符合预期。
为了实现自定义排序逻辑,sort() 方法可以接受一个可选的比较函数作为参数。这个比较函数通常接收两个参数 a 和 b,它们代表了数组中正在被比较的两个元素。比较函数的返回值决定了 a 和 b 在排序后的相对位置:
- 如果 compareFunction(a, b) 返回值小于 0,则 a 会被排在 b 之前。
- 如果 compareFunction(a, b) 返回值大于 0,则 b 会被排在 a 之前。
- 如果 compareFunction(a, b) 返回值等于 0,则 a 和 b 的相对位置不变(但 ECMAScript 标准不保证此行为,某些浏览器可能会改变)。
理解比较函数的返回值机制是实现复杂排序的关键。
propSort 函数解析
我们来看一个典型的 propSort 函数,它旨在根据对象数组中指定数值属性的值进行排序。
/**
* sort array by numeric by numeric property values
* of object entries. null entries are treated as 0.
* array entries must be objects.
* @param {object[]} arr - The array of objects to sort.
* @param {string} prop - The numeric property name (string) to sort on.
*/
export const propSort = (arr, prop) => {
arr.sort((a, b) => {
return (a[prop] || 0) - (b[prop] || 0);
});
};该 propSort 函数是对 Array.prototype.sort() 方法的一个封装,其核心在于传递给 sort() 的匿名比较函数 (a, b) => { return (a[prop] || 0) - (b[prop] || 0); }。
立即学习“Java免费学习笔记(深入)”;
a 和 b 是什么? 在 sort() 方法的比较函数中,a 和 b 代表了 arr 数组中的两个元素,它们是待比较的完整对象。例如,如果 arr 是 [{ id: 3, value: 10 }, { id: 1, value: 5 }],那么 a 和 b 将依次是这些对象。
prop 是字符串,如何获取值?prop 参数是一个字符串,它代表了我们希望进行排序的对象属性的名称。在 JavaScript 中,我们可以使用方括号 [] 语法来通过字符串变量访问对象的属性,例如 a[prop]。如果 prop 的值为 "value",那么 a[prop] 就等同于 a.value。这种动态属性访问是处理通用排序逻辑的关键。
-
(a[prop] || 0) - (b[prop] || 0) 的逻辑:
- 数值比较: 核心是 (aValue - bValue)。如果 aValue 小于 bValue,结果为负数,a 排在 b 前面;如果 aValue 大于 bValue,结果为正数,b 排在 a 前面;如果相等,结果为零。这正是 sort() 比较函数所期望的返回值行为。
- || 0 处理 null/undefined: a[prop] || 0 是一种常见的 JavaScript 短路求值模式。如果 a[prop] 的值是 null、undefined、0、false 或空字符串,它将被视为“假值”,此时 || 运算符会返回 0。这意味着,如果对象的指定属性不存在或为 null/undefined,该属性的值将被视为 0 进行排序。这在处理数据不完整或可选属性时非常有用,确保了排序逻辑的健壮性。
因此,propSort 函数的整体逻辑是:遍历数组中的每对对象,取出它们指定属性的值(如果属性不存在或为 null 则默认为 0),然后进行数值比较,从而实现按该属性的升序排序。
TypeScript 转换与注意事项
将 propSort 函数转换为 TypeScript 可以显著提高代码的类型安全性、可读性和可维护性。转换的关键在于正确地定义输入数组的类型以及 prop 参数的类型。
/**
* 根据对象数组中指定数值属性的值进行排序。
* null 或 undefined 的属性值将被视为 0。
* 数组元素必须是对象。
* @template T 数组中对象的类型。
* @param {T[]} arr - 要排序的对象数组。
* @param {keyof T} prop - 用于排序的数值属性名称。
*/
export const propSort = >(arr: T[], prop: keyof T): void => {
arr.sort((a, b) => {
// 确保属性值是可转换为数字的类型,并处理 null/undefined
const aValue = (a[prop] as unknown as number) || 0;
const bValue = (b[prop] as unknown as number) || 0;
return aValue - bValue;
});
}; TypeScript 转换要点:
泛型 T: 我们引入了泛型
来代表数组 arr 中每个元素的类型。这使得 propSort 函数可以适用于任何类型的对象数组,提高了函数的通用性。T extends Record 约束 T 必须是一个对象类型。 arr: T[]: 明确 arr 是一个由 T 类型对象组成的数组。
prop: keyof T: 这是 TypeScript 中一个非常强大的类型工具。keyof T 会生成一个联合类型,包含 T 类型所有公共属性的字符串字面量。这意味着,当调用 propSort 时,prop 参数只能是 T 类型对象中实际存在的属性名,从而在编译时捕获拼写错误或不存在的属性访问,极大地增强了类型安全性。
-
类型断言 as unknown as number:
虽然 prop: keyof T 确保了 prop 是 T 的一个有效属性,但 TypeScript 无法静态地知道 T[prop] 的具体类型是否一定是 number。keyof T 只能保证属性存在,不保证其值类型。
因此,a[prop] 的类型在 TypeScript 中可能是 T[keyof T],这是一个宽泛的联合类型。为了能够进行数值减法,我们需要明确告诉 TypeScript 编译器,我们期望 a[prop] 和 b[prop] 的值最终能被当作 number 处理。
as unknown as number 是一个两阶段的类型断言。首先 as unknown 将类型转换为 unknown,这是一种安全的操作,表示我们不确定其类型。然后 as number 告诉编译器,我们确信它最终会是 number。这允许我们进行数值运算,但同时也意味着开发者需要确保运行时 a[prop] 的值确实可以被解释为数字,否则可能导致运行时错误(例如 NaN)。
-
更严谨的类型定义: 如果我们希望 prop 只能是 T 中 number 类型的属性,可以进一步约束 T 或 prop。例如:
type NumericPropertyKeys
= { [K in keyof T]: T[K] extends number | null | undefined ? K : never; }[keyof T]; export const propSort = >( arr: T[], prop: NumericPropertyKeys ): void => { arr.sort((a, b) => { const aValue = (a[prop] as number | null | undefined) || 0; const bValue = (b[prop] as number | null | undefined) || 0; return aValue - bValue; }); }; 这种方式通过 NumericPropertyKeys 泛型类型,限制 prop 只能是 T 中类型为 number、null 或 undefined 的属性键,从而在编译时提供更强的类型检查。
注意事项:
- 运行时类型安全: 尽管 TypeScript 提供了编译时类型检查,但 (a[prop] as unknown as number) || 0 这样的断言并不能保证运行时 a[prop] 的值确实是数字。如果 a[prop] 是一个字符串(例如 "abc"),"abc" || 0 仍然是 "abc","abc" - (something) 会得到 NaN,导致排序结果不可预测。因此,在实际应用中,确保传入的数据结构符合预期至关重要,或者在比较函数内部增加更严格的运行时类型检查。
- 原地排序: sort() 方法会修改原始数组。如果需要保留原始数组,应先创建数组的副本(例如 [...arr].sort(...))。
总结
Array.prototype.sort() 结合自定义比较函数是 JavaScript 中实现复杂排序逻辑的强大工具。propSort 函数提供了一个简洁的模式,用于按对象指定数值属性进行排序,并优雅地处理了 null/undefined 值。将其转换为 TypeScript 后,通过泛型和 keyof 操作符,我们能够获得编译时的类型安全保障,避免常见的属性名拼写错误和类型不匹配问题,从而构建出更健壮、更易维护的代码。在实践中,合理运用 TypeScript 的类型系统,并辅以必要的运行时检查,可以最大限度地提升代码质量。










