JavaScript数组排序踩的坑，差点让我加班到凌晨

• JavaScript数组排序踩的坑，差点让我加班到凌晨*

---

引言

作为一名前端开发者，我本以为对JavaScript的数组排序已经了如指掌。毕竟，Array.prototype.sort()是日常开发中最常用的方法之一。然而，最近在一次数据处理任务中，我差点因为一个"简单"的排序问题加班到凌晨。这篇文章将分享我的踩坑经历，深入剖析JavaScript数组排序的陷阱，并提供解决方案和最佳实践。

主体

1. 问题的起源：一个"简单"的排序需求

那天，我接到一个需求：对一组用户数据按年龄从小到大排序。数据格式如下：

const users = [
  { name: 'Alice', age: 25 },
  { name: 'Bob', age: 30 },
  { name: 'Charlie', age: 20 },
];

我自信地写下了以下代码：

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

看起来没问题，对吧？但当我测试时，发现排序结果并不总是如预期。尤其是在处理某些边界值时，比如age为null、undefined或字符串时，问题就出现了。

2. 深入剖析：Array.prototype.sort()的诡异行为

2.1 默认排序的陷阱

很多人可能不知道，如果不传递比较函数，sort()会将数组元素转换为字符串，然后按Unicode码点排序：

const numbers = [10, 2, 1, 20];
numbers.sort();
console.log(numbers); // 输出 [1, 10, 2, 20]

这种隐式类型转换是许多bug的根源。

2.2 比较函数的返回值

比较函数需要返回：

• 负数：a排在b前面
• 正数：b排在a前面
• 0：顺序不变

但很少有人注意，如果比较函数返回非数字值（如undefined或null），排序结果会变得不可预测。

2.3 稳定性问题

在ES2019之前，JavaScript的sort()是不稳定的（即相等元素的相对顺序可能改变）。虽然现代浏览器已实现稳定排序，但在旧环境中仍需注意。

3. 那些年我踩过的坑

3.1 处理null或undefined值

const users = [
  { name: 'Alice', age: 25 },
  { name: 'Bob', age: null },
  { name: 'Charlie', age: undefined },
];

users.sort((a, b) => a.age - b.age);
// 结果可能出乎意料！

解决方案：

users.sort((a, b) => {
  if (a.age == null) return 1; // null/undefined排在最后
  if (b.age == null) return -1;
  return a.age - b.age;
});

3.2 字符串排序的陷阱

const names = ['Ana', 'ana', 'Bob', 'bob'];
names.sort();
// 输出: ['Ana', 'Bob', 'ana', 'bob'] (因为大写字母的Unicode码点更小)

正确做法是使用localeCompare：

names.sort((a, b) => a.localeCompare(b));

3.3 对象多条件排序

const users = [
  { name: 'Alice', age: 25, score: 80 },
  { name: 'Bob', age: 25, score: 90 },
];

// 先按age升序，再按score降序
users.sort((a, b) => {
  if (a.age !== b.age) return a.age - b.age;
  return b.score - a.score;
});

4. 性能优化：大规模数据排序

对于大型数组（数万条数据以上），sort()可能成为性能瓶颈。这时可以考虑：

1. Web Workers：将排序放在后台线程
2. 分批处理：分块排序后再合并
3. 使用TypedArray：对于纯数字数组，性能更高

// 使用TypedArray排序
const largeArray = new Float64Array(1000000);
// ...填充数据
largeArray.sort(); // 比普通数组快很多

5. 函数式编程的替代方案

为了代码的纯净性，可以考虑不修改原数组的方案：

const sorted = [...users].sort((a, b) => a.age - b.age);

或使用lodash的_.sortBy：

const sorted = _.sortBy(users, 'age');

总结

JavaScript的数组排序看似简单，实则暗藏玄机。通过这次踩坑经历，我总结了以下几点经验：

1. 永远不要使用无参数的sort()
2. 处理边界值（null/undefined）要小心
3. 字符串排序要用localeCompare
4. 多条件排序要明确优先级
5. 性能敏感场景要考虑替代方案

希望这篇文章能帮助你避免类似的陷阱，写出更健壮的排序代码。记住，魔鬼往往藏在细节中，在JavaScript的世界里尤其如此。