JS数组sort()数字排序陷阱：为什么[10，5，40]会变成[10，40，5]

一、问题的直观复现与规范底层机制

我们在浏览器控制台或 Node.js 环境中执行以下简短代码时，就会直接触发这一陷阱：

const numbers = [10, 5, 40];
numbers.sort();

console.log(numbers);
// 输出结果为: [10, 40, 5]

按照常理，数字 5 明显小于 10 和 40，按升序排列应当得到 [5, 10, 40]。但 JavaScript 引擎得出的序列却是 [10, 40, 5]。

要理解这个结果，需要回到 ECMAScript 规范对 Array.prototype.sort(compareFn) 的定义。规范明确规定：当调用者没有传入 compareFn 参数（即参数为 undefined）时，排序比较由内部抽象操作 SortCompare(x, y) 执行。在该操作中，任何非 undefined 元素都会通过 ToString() 操作被强制转换为字符串，随后按照 Unicode 字符代码单元值升序排列。

换言之，无论数组中存储的是 Number、Boolean 还是其他基础类型，未传参数时参与排序的并不是原始数据类型，而是它们转换后的字符串：

• 数值 10 转换为字符串 "10"
• 数值 40 转换为字符串 "40"
• 数值 5 转换为字符串 "5"

在比较两个字符串时，字符串比较算法从左到右逐个字符比对其 Unicode 码点（UTF-16 Code Unit）。

二、字典序（Lexicographical Order）的逐字符比对过程

我们在查阅英文字典时，单词 "apple" 排在 "banana" 前面，因为首字母 a 排在 b 前面；同样地，单词 "zoo" 会排在 "ant" 后面。JavaScript 的默认排序机制采用的正是完全相同的字典顺序。

我们可以通过 String.prototype.charCodeAt() 方法查看这三个数字首字符的 UTF-16 编码数值：

console.log('10'.charCodeAt(0)); // 字符 '1' 的 Unicode 编码为 49 (0x0031)
console.log('40'.charCodeAt(0)); // 字符 '4' 的 Unicode 编码为 52 (0x0034)
console.log('5'.charCodeAt(0));  // 字符 '5' 的 Unicode 编码为 53 (0x0035)

比对首字符时，49 < 52 < 53。因为首字符已经分出胜负，算法不会继续检查后续位，直接判定：

1. "10" 的首字符 '1' 最小，排在最前面；
2. "40" 的首字符 '4' 次之，排在中间；
3. "5" 的首字符 '5' 最大，排在最后面。

这就是为什么在没有任何语法报错的情况下，数组被排成了 [10, 40, 5]。

三、标准解决方案：传递二元比较函数（compareFn）

为了让 sort() 按照真实数值大小排列，我们必须显式向其提供一个比较函数。比较函数接收两个待比较的元素 a 与 b，并根据返回值决定两者的排列顺序：

const numbers = [10, 5, 40];

// 正确写法：显式传递升序比较函数
numbers.sort((a, b) => a - b);

console.log(numbers);
// 正确输出: [5, 10, 40]

比较函数的返回值规范非常明确：

• 返回值小于 0（< 0）：表示 a 小于 b，算法会将 a 排在 b 的前面。
• 返回值等于 0（=== 0）：表示 a 与 b 大小相等，两者相对顺序保持不变（ECMAScript 2019 起规范要求必须保持稳定排序）。
• 返回值大于 0（> 0）：表示 a 大于 b，算法会将 b 排在 a 的前面。

当写下 (a, b) => a - b 时：

• 如果比较 a = 10, b = 5，计算 10 - 5 = 5 > 0，所以 5 会被移动到 10 前面；
• 如果比较 a = 10, b = 40，计算 10 - 40 = -30 < 0，所以 10 保持在 40 前面。

如果需要降序排列（从大到小），只需要调换减数与被减数：(a, b) => b - a。

四、完整操作步骤与推导演练

在工程开发中进行数字排序时，推荐按照以下规范流程进行，以确保无副作用、结果稳定：

步骤 1：避免原地修改原数组（防御性拷贝）

sort() 是一个原地修改（in-place mutation）方法。调用它会直接改变原数组本身，并返回该数组的引用。如果你在 React、Vue 等响应式框架中直接调用 state.sort()，可能会因为修改了不可变状态而引发难以察觉的 UI 渲染问题。

const rawList = [10, 5, 40];

// 推荐做法 1：使用展开运算符制作浅拷贝后再排序
const sortedList = [...rawList].sort((a, b) => a - b);

// 推荐做法 2：使用 ES2023 引入的不可变方法 toSorted()
const safeList = rawList.toSorted((a, b) => a - b);

console.log(rawList);    // 仍为 [10, 5, 40]，原数组未被修改
console.log(sortedList); // 结果为 [5, 10, 40]

步骤 2：针对复杂对象数组提取对应数字字段

在实际业务中，排序的数据多为包含 id、价格、时间戳的对象数组。提取对象的数值属性进行相减即可：

const products = [
  { name: '商品A', price: 10 },
  { name: '商品B', price: 5 },
  { name: '商品C', price: 40 }
];

// 按价格升序
products.sort((a, b) => a.price - b.price);

五、两个容易被忽视的进阶边界陷阱

1. 减法运算与极端数值溢出（Infinity 与超大数）

使用 a - b 是一种紧凑高效的书写方式，但在包含浮点精度极限或极端数值时可能出现溢出问题。如果数组中可能出现非常大的正数与负数（相减超过 Number.MAX_VALUE 导致 Infinity），或者出现 NaN，a - b 将返回 NaN。

ECMAScript 规范要求比较函数必须满足严格弱序。如果返回 NaN，排序算法行为将变得不可预测。因此，在严谨库代码或极端数值场景下，建议使用显式比较逻辑：

// 极端数值或防御性极强的写法
function safeNumericSort(a, b) {
  if (Number.isNaN(a) || Number.isNaN(b)) return 0;
  if (a < b) return -1;
  if (a > b) return 1;
  return 0;
}

2. 混合字符串与数字的“自然排序”

如果数组包含类似 ['v1', 'v10', 'v2', 'v5'] 的版本号或文件名字符串，单纯的 sort() 会得到 ['v1', 'v10', 'v2', 'v5']，而 a - b 则会返回 NaN。此时应使用 String.prototype.localeCompare 的数值模式：

const versions = ['v10', 'v5', 'v40', 'v2'];
versions.sort((a, b) => a.localeCompare(b, undefined, { numeric: true }));

console.log(versions);
// 输出: ['v2', 'v5', 'v10', 'v40']

六、全场景排序决策全景与速查表

为了在不同场景下快速选用正确的排序语法，请参考以下决策全景图与速查表：