JS数组工具函数propSort解析及TypeScript转换疑问

先贴出原函数代码：

/**
 * 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
 * @param {string} prop - numeric property to sort on.
 */
export const propSort = (arr, prop) => {
    arr.sort( (a,b)=>{
        return ( a[prop] || 0 ) - ( b[prop] || 0 );
    });
}

语法细节解答 #

1. a、b的含义 #

a 和 b 是Array.sort()回调函数的默认参数，代表数组中正在比较的一对相邻元素。排序算法会反复调用这个回调，根据返回值调整元素顺序：

• 返回负数：a 排在 b 前面
• 返回正数：b 排在 a 前面
• 返回0：两者相对位置不变

2. 通过字符串获取对象属性值的方式 #

这里用的是方括号属性访问语法（obj[prop]），和常见的点语法（obj.prop）核心区别是：

• 点语法只能使用固定的字面量属性名（比如user.age）
• 方括号语法可以接收字符串变量，实现动态属性访问。这里prop是传入的字符串参数，a[prop]就是取对象a中属性名等于prop值的那个属性。

TypeScript转换的常见陷阱 #

1. 类型不安全的属性访问 #

原JS中直接用a[prop]不会报错，但TS里默认object类型不允许任意字符串访问属性。需要给数组元素定义明确的类型，或者用泛型约束prop必须是该类型的有效键。

2. 假值处理的逻辑漏洞 #

原代码用a[prop] || 0，会把所有假值（包括0、false、''）都替换成0，但如果属性本身的合法值就是0，这会导致错误排序。TS里应该改用空值合并运算符（??），只在属性值为null或undefined时替换为0：a[prop] ?? 0，同时要在类型中明确属性可能为null/undefined。

3. 属性类型的约束缺失 #

原注释说明prop是数值属性，但JS里如果传入非数值属性，-运算会得到NaN，导致排序混乱。TS里需要通过类型约束，确保prop对应的属性是数值类型（或可转换为数值的类型）。

4. 原地排序的行为说明 #

Array.sort()是原地修改数组的方法，转换为TS时，要在函数类型注释中明确返回void，或者如果需要保持纯净性，可以返回新数组（但要注意和原函数的行为兼容）。

5. 泛型的正确应用 #

为了让函数支持任意带数值属性的对象数组，应该使用泛型来增强类型安全，示例如下：

export function propSort<T extends Record<string, number | null | undefined>>(
  arr: T[],
  prop: keyof T
): void {
  arr.sort((a, b) => (a[prop] ?? 0) - (b[prop] ?? 0));
}

这个泛型约束会确保：

• arr的元素是包含字符串键的对象，且对应键的值为数值、null或undefined
• prop必须是该对象的有效键，避免传入不存在的属性名

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