从坑到精通：JavaScript数组排序完全避坑手册

第一次在控制台输入 [10, 5, 20].sort() 却得到 [10, 20, 5] 时，我盯着屏幕足足愣了十秒。这不是个例——Stack Overflow上关于sort()的困惑提问每月新增近千条，其中80%都源于开发者对默认排序行为的误解。本文将带您彻底拆解JavaScript数组排序的陷阱与精髓，从原理剖析到实战技巧，让您从此告别排序翻车现场。

1. 为什么你的sort()总是不按常理出牌？

1.1 隐藏在默认行为中的"字母表陷阱"

JavaScript的 sort() 方法默认将元素转换为字符串后按Unicode码点排序。这个设计源于语言早期对字符串处理的侧重，却成为数字排序的经典陷阱：

// 反直觉的默认排序
console.log([10, 5, 2, 8].sort()); // 输出：[10, 2, 5, 8]

关键机制解析 ：

• 数字被隐式转换为字符串后比较
• "10"的Unicode码点小于"2"（比较第一个字符'1' vs '2'）
• 类似字母表顺序："apple"会排在"banana"前

1.2 当排序遇上非ASCII字符

默认排序对特殊字符的处理同样暗藏玄机：

const cities = ['北京', '上海', '广州', '重庆'];
cities.sort();
console.log(cities); // 可能得到意外的顺序

中文排序需要特别注意 ：

• 中文字符按Unicode编码排序
• 实际业务中应使用 localeCompare 实现符合语言习惯的排序

2. 自定义排序的黄金法则

2.1 比较函数的三个返回值

掌握比较函数的返回值语义是正确排序的核心：

返回值	排序结果
< 0	a排在b前
0	保持相对顺序不变
> 0	b排在a前

经典数字排序模式 ：

// 升序排序
arr.sort((a, b) => a - b);

// 降序排序
arr.sort((a, b) => b - a);

2.2 多条件排序策略

现实场景常需要组合多个排序条件：

const products = [
  { name: '手机', price: 2999, stock: 10 },
  { name: '平板', price: 1999, stock: 5 },
  { name: '笔记本', price: 4999, stock: 2 }
];

// 先按价格升序，价格相同按库存降序
products.sort((a, b) => {
  if (a.price !== b.price) {
    return a.price - b.price;
  }
  return b.stock - a.stock;
});

提示：多条件排序时，建议用if-else明确优先级，避免复杂的逻辑运算

3. 对象数组排序实战技巧

3.1 动态属性排序

通过参数化属性名实现灵活排序：

function sortByProp(arr, prop, order = 'asc') {
  return arr.sort((a, b) => {
    const valA = a[prop];
    const valB = b[prop];
    return order === 'asc' ? valA - valB : valB - valA;
  });
}

// 使用示例
const sortedProducts = sortByProp(products, 'price', 'desc');

3.2 处理可能的undefined值

实际数据常有不完整字段，需要健壮性处理：

users.sort((a, b) => {
  // 处理可能缺失的age属性
  const ageA = a.age ?? 0;
  const ageB = b.age ?? 0;
  return ageA - ageB;
});

4. 高性能排序优化方案

4.1 避免频繁创建比较函数

在大数组排序时，函数创建可能成为性能瓶颈：

// 不推荐：每次排序新建函数
bigArray.sort((a, b) => a.value - b.value);

// 推荐：预定义比较函数
const compareByValue = (a, b) => a.value - b.value;
bigArray.sort(compareByValue);

4.2 复杂计算的缓存策略

当排序涉及复杂计算时，考虑使用Schwartzian变换：

// 对需要复杂计算的值预先计算并缓存
const decorated = array.map(item => ({
  original: item,
  sortKey: computeExpensiveValue(item)
}));

decorated.sort((a, b) => a.sortKey - b.sortKey);
const result = decorated.map(item => item.original);

5. 特殊场景排序方案

5.1 混合类型数组处理

当数组包含多种类型时，需要定义明确的比较逻辑：

const mixed = [20, 'apple', 5, 'banana'];

mixed.sort((a, b) => {
  if (typeof a === 'number' && typeof b === 'number') {
    return a - b;
  }
  if (typeof a === 'string' && typeof b === 'string') {
    return a.localeCompare(b);
  }
  return typeof a === 'number' ? -1 : 1;
});

5.2 中文拼音排序方案

实现符合中文习惯的排序需要特殊处理：

const chineseNames = ['张三', '李四', '王五'];
chineseNames.sort((a, b) => a.localeCompare(b, 'zh'));

6. 排序稳定性与浏览器差异

6.1 何时需要关注稳定性

排序稳定性指相同元素保持原始相对顺序的特性。在以下场景尤为重要：

• 多条件排序的后续排序阶段
• 可视化排序动画展示
• 需要保持原始顺序的业务逻辑

// ES2019后各浏览器均实现稳定排序
const stableSorted = array.sort((a, b) => {
  // 主排序条件
  const primary = a.category.localeCompare(b.category);
  if (primary !== 0) return primary;
  
  // 次排序条件（稳定排序会保持原始相对顺序）
  return 0;
});

6.2 跨浏览器兼容方案

如需支持旧版浏览器，可自行实现稳定排序：

function stableSort(arr, compare) {
  const indexed = arr.map((item, index) => ({ item, index }));
  indexed.sort((a, b) => compare(a.item, b.item) || a.index - b.index);
  return indexed.map(({ item }) => item);
}

7. 测试你的排序知识

7.1 常见排序陷阱自测

// 以下代码输出什么？
console.log([null, 10, 2, undefined].sort());

// 如何正确排序包含负数的数字数组？
const withNegatives = [-5, 0, 10, -2];
console.log(withNegatives.sort(/* 你的解决方案 */));

7.2 性能对比实验

// 对比不同排序方式的性能
const bigArray = Array.from({ length: 100000 }, () => 
  Math.floor(Math.random() * 1000000));

console.time('default sort');
bigArray.slice().sort(); // 复制数组避免影响
console.timeEnd('default sort');

console.time('numeric sort');
bigArray.slice().sort((a, b) => a - b);
console.timeEnd('numeric sort');

在最近的项目中，我遇到一个需要按用户最后活跃时间排序的场景，其中某些用户可能从未活跃。最终采用的解决方案是：

users.sort((a, b) => {
  // 从未活跃的用户排最后
  if (!a.lastActive) return 1;
  if (!b.lastActive) return -1;
  return new Date(b.lastActive) - new Date(a.lastActive);
});