JavaScript sort方法自定义排序详解

JavaScript 的 `sort()` 方法看似简单，实则暗藏诸多陷阱：默认按字符串 Unicode 排序会导致数字数组（如 `[10, 2, 33, 1]`）错乱；正确排序需精准编写比较函数——数字用 `a - b` 实现升序、字符串推荐 `localeCompare()` 支持本地化与大小写敏感，对象排序必须主动处理 `null`/`undefined`（善用 `??` 或短路逻辑），多级排序依赖 `||` 链式判断避免嵌套冗余；更需警惕原地修改副作用，必要时用展开运算符保护原始数据——掌握这些细节，才能写出健壮、可维护、真正符合业务逻辑的排序代码。

sort 方法默认按字符串排序，数字会出错

JavaScript 的 sort() 方法不传参时，会把数组元素先转成字符串，再按 Unicode 码点排序。这意味着 [10, 2, 33, 1] 会变成 [1, 10, 2, 33]，因为 "10" 为 true。

这不是 bug，是设计如此 —— 它只保证“稳定比较”，不保证数值逻辑正确。

• 对纯字符串数组（如 ["banana", "apple", "cherry"]），默认行为可用
• 只要含数字、或需按大小/日期/对象字段排序，就必须传比较函数
• 空值（null、undefined）在转换中会变成 "null" 或 "undefined"，进一步扰乱顺序

写比较函数：必须返回负数、0 或正数

sort() 的比较函数接收两个参数 a 和 b，它只关心返回值的符号：

• 返回 < 0 → a 排在 b 前面
• 返回 0 → a 和 b 位置不变（稳定排序）
• 返回 > 0 → a 排在 b 后面

升序数字排序最简写法：

numbers.sort((a, b) => a - b);

降序则反过来：

numbers.sort((a, b) => b - a);

注意：不能写 return a > b，那只会返回布尔值（true/false），被转成 1/0，导致排序错误或不稳定。

处理对象数组：按属性排序要小心 undefined

比如按 users 数组里的 age 升序排：

users.sort((a, b) => (a.age || 0) - (b.age || 0));

但更健壮的做法是显式处理缺失值，避免 undefined - 5 得到 NaN：

• 用 ?? 提供默认值：(a.age ?? 0) - (b.age ?? 0)
• 或提前过滤：users.filter(u => u.age != null).sort(...)
• 若想把缺失 age 的项排最后，可写：return (a.age == null) - (b.age == null) || a.age - b.age;

字符串属性（如 name）建议用 localeCompare，支持大小写与本地化：

users.sort((a, b) => a.name.localeCompare(b.name));

多级排序：链式判断别用嵌套 if

要先按 status（'active' > 'pending' > 'archived'），再按 createdAt 时间倒序，别这么写：

if (a.status !== b.status) { return ... } else { return ... }

而是用「短路」逻辑，一行搞定：

items.sort((a, b) => {
  const statusOrder = { active: 0, pending: 1, archived: 2 };
  const byStatus = (statusOrder[a.status] || 99) - (statusOrder[b.status] || 99);
  return byStatus || new Date(b.createdAt) - new Date(a.createdAt);
});

关键点：

• 第一项比较结果非零就直接返回，否则用 || 继续下一项
• 时间比较记得转 Date 对象，否则字符串时间（如 "2023-01-01"）仍走字典序
• 原地修改数组，记得必要时用 [...arr].sort(...) 避免副作用

sort 的比较函数看似简单，但边界情况（null、NaN、时区、Unicode）最容易漏掉。每次写之前，先问一句：这个 a 和 b 可能是什么值？

好了，本文到此结束，带大家了解了《JavaScript sort方法自定义排序详解》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！