异常教程

js 数组排序（长文解析）

更新时间:

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

  • 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;
  • 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习 ，欢迎点击围观

在 JavaScript 开发中，数组排序是一个基础但至关重要的操作。无论是处理用户数据、优化算法性能，还是构建复杂的应用逻辑，开发者都需要频繁地对数组元素进行排序。对于编程初学者而言，理解如何正确使用 JavaScript 的内置排序方法是迈向进阶开发的关键一步；而对中级开发者来说，掌握排序的底层原理和优化技巧，则能显著提升代码的效率和健壮性。本文将从零开始，通过循序渐进的方式，结合代码示例和实际案例，深入剖析 JavaScript 数组排序的核心知识点。

JavaScript 数组排序的入门知识

1. 数组排序的基本方法：sort()

JavaScript 提供了 Array.prototype.sort() 方法，这是实现数组排序的核心工具。默认情况下，sort() 会将数组元素转换为字符串，并按照 Unicode 码点进行排序。例如：

const numbers = [3, 1, 4, 1, 5];  
numbers.sort();  
console.log(numbers); // 输出 [1, 1, 3, 4, 5]

但若数组包含非数值类型，或需要自定义排序规则时，默认行为可能不符合预期。例如：

const strings = ["Apple", "banana", "Cherry"];  
strings.sort();  
console.log(strings); // 输出 ["Apple", "Cherry", "banana"]  
// 注意："banana" 被排在最后，因为其首字母小写（Unicode 码点比大写字母低）

2. 自定义排序逻辑：比较函数的使用

为了灵活控制排序规则，sort() 方法支持传入一个 比较函数（Comparator Function）。该函数接受两个参数 a 和 b，返回值需满足以下规则：

  • 若返回值 小于 0，则 a 会被排在 b 之前；
  • 若返回值 等于 0，则 a 和 b 的相对位置不变；
  • 若返回值 大于 0，则 b 会被排在 a 之前。

例如，要按数值大小对字符串数组排序：

const numbersStr = ["3", "1", "10", "2"];  
numbersStr.sort((a, b) => a - b); // 将字符串转为数值比较  
console.log(numbersStr); // 输出 ["1", "2", "3", "10"]

关键点提醒：

  • 类型转换陷阱：若直接比较字符串形式的数值（如 "10" 和 "2"），默认排序会错误地将 "10" 排在 "2" 之前，因为字符串比较是逐字符进行的。
  • 返回值的数学意义：比较函数的返回值需严格遵循上述规则，否则可能导致排序结果混乱。

进阶排序技巧与常见场景

1. 稳定性与性能优化

JavaScript 的 sort() 方法实现基于 快速排序 或 归并排序，具体取决于浏览器或引擎的优化策略。其时间复杂度通常为 O(n log n)，但稳定性（即相等元素的相对位置是否保持不变）无法保证。

若需确保稳定性，可通过记录原始索引的方式实现：

const fruits = ["Apple", "apple", "Banana", "banana"];  
fruits.sort((a, b) => {  
  const nameA = a.toLowerCase();  
  const nameB = b.toLowerCase();  
  if (nameA === nameB) return fruits.indexOf(a) - fruits.indexOf(b); // 保持原始顺序  
  return nameA.localeCompare(nameB);  
});  
console.log(fruits); // 输出 ["Apple", "apple", "Banana", "banana"]

2. 多条件排序与对象数组排序

在实际开发中，开发者常需对对象数组按多个字段排序。例如，按 age 升序，再按 name 降序：

const users = [  
  { name: "Alice", age: 30 },  
  { name: "Bob", age: 25 },  
  { name: "Alice", age: 28 }  
];  

users.sort((a, b) => {  
  if (a.age === b.age) {  
    return b.name.localeCompare(a.name); // name 降序  
  }  
  return a.age - b.age; // age 升序  
});  

console.log(users);  
// 输出顺序为：{age:25}, {age:28, name降序}, {age:30}

3. 数组降序排序的简洁写法

通过直接调整比较函数的返回值，可快速实现降序排序：

const scores = [90, 85, 95, 70];  
scores.sort((a, b) => b - a); // 降序  
console.log(scores); // 输出 [95, 90, 85, 70]

排序的常见陷阱与解决方案

1. 修改原数组的副作用

sort() 方法会 直接修改原数组，而非返回新数组。若需保留原始数据，应先克隆数组：

const original = [3, 1, 2];  
original.sort(); // 原数组被修改  
console.log(original); // 输出 [1, 2, 3]  

// 安全做法：  
const sorted = [...original].sort();

2. 比较函数的返回值类型错误

若比较函数返回非数字值（如 true 或字符串），排序结果可能不可预测。例如：

[3, 1, 2].sort((a, b) => a === b); // 错误：返回 true/false（1/0），导致排序混乱

正确写法：始终返回数值类型。

3. 处理复杂数据类型的排序

对于嵌套对象或特殊类型（如日期、货币值），需设计针对性的比较逻辑。例如，按日期对象排序：

const dates = [  
  new Date("2023-01-01"),  
  new Date("2023-03-01"),  
  new Date("2023-02-01")  
];  

dates.sort((a, b) => a - b); // 直接比较时间戳

实战案例：电商商品排序

假设有一个电商商品列表，需根据用户选择的排序方式（价格升序、销量降序等）动态调整：

const products = [  
  { price: 29.99, sales: 150 },  
  { price: 19.99, sales: 200 },  
  { price: 49.99, sales: 80 }  
];  

// 排序函数工厂  
function createSorter(sortType) {  
  return (a, b) => {  
    switch (sortType) {  
      case "price_asc":  
        return a.price - b.price;  
      case "sales_desc":  
        return b.sales - a.sales;  
      default:  
        return 0;  
    }  
  };  
}  

// 使用示例  
products.sort(createSorter("price_asc"));  
console.log(products); // 按价格升序排列

结论

JavaScript 数组排序是一个看似简单却充满细节的操作。通过掌握 sort() 方法的核心用法、比较函数的设计原则，以及常见场景的解决方案，开发者可以高效地实现各类排序需求。无论是处理基础的数值排序，还是复杂的对象数组多条件排序，关键在于：

  1. 理解比较函数的返回值逻辑；
  2. 注意原数组的修改副作用；
  3. 根据实际场景选择最优的排序策略。

随着实践的深入，开发者还可进一步探索手写排序算法（如冒泡排序、归并排序）以提升算法思维，或通过性能测试优化大规模数据的排序效率。希望本文能成为你掌握 JavaScript 数组排序的坚实起点！

最新发布

查看更多文章