排序是数据处理的核心操作,JavaScript 提供了多种灵活的方式实现数组排序。本文将从内置方法、经典算法、高级技巧三个维度展开,并附代码示例与性能对比,助你彻底掌握排序技术。
🔧 一、基础:内置 Array.prototype.sort()
JavaScript 的 sort()
是原地排序方法(直接修改原数组),默认按 Unicode 编码将元素转为字符串后排序。但通过自定义比较函数,可轻松实现复杂逻辑。
// 升序
const numbers = [10, 2, 5];
numbers.sort((a, b) => a - b); // [2, 5, 10]
// 降序
numbers.sort((a, b) => b - a); // [10, 5, 2]
// 忽略大小写
const fruits = ["Banana", "apple", "Cherry"];
fruits.sort((a, b) => a.localeCompare(b, 'en', { sensitivity: 'base' }));
// ["apple", "Banana", "Cherry"]
按对象属性排序是常见需求:
const users = [
{ name: "Alice", age: 30 },
{ name: "Bob", age: 25 }
];
users.sort((a, b) => a.age - b.age); // 按年龄升序
⚙️ 二、经典排序算法实现
虽然 sort()
足够强大,但理解底层算法有助于优化性能。以下是三种常用手写排序算法:
时间复杂度:O(n²)
适用场景:小型数组或教学演示
function bubbleSort(arr) {
for (let i = 0; i < arr.length - 1; i++) {
for (let j = 0; j < arr.length - 1 - i; j++) {
if (arr[j] > arr[j + 1]) {
[arr[j], arr[j + 1]] = [arr[j + 1], arr[j]]; // 交换相邻元素
}
}
}
return arr;
}
时间复杂度:平均 O(n log n)
适用场景:大数据量、高性能需求
function quickSort(arr) {
if (arr.length <= 1) return arr;
const pivot = arr[Math.floor(arr.length / 2)];
const left = arr.filter(x => x < pivot);
const right = arr.filter(x => x > pivot);
return [...quickSort(left), pivot, ...quickSort(right)];
}
时间复杂度:O(n²)
适用场景:近乎有序的小数组
function insertionSort(arr) {
for (let i = 1; i < arr.length; i++) {
const current = arr[i];
let j = i - 1;
while (j >= 0 && arr[j] > current) {
arr[j + 1] = arr[j];
j--;
}
arr[j + 1] = current;
}
return arr;
}
🚀 三、高级排序技巧
当主排序字段相同时,按次字段排序:
const employees = [
{ name: "Alice", age: 30, role: "Developer" },
{ name: "Bob", age: 30, role: "Designer" }
];
employees.sort((a, b) => {
// 先按年龄升序,年龄相同按角色字母排序
return a.age - b.age || a.role.localeCompare(b.role);
});
ES2019 后 sort()
是稳定排序,即相同键值的元素保持原始顺序:
const items = [
{ id: 1, type: 'fruit' },
{ id: 2, type: 'vegetable' },
{ id: 3, type: 'fruit' }
];
// 按 type 排序后,id=1 和 id=3 的 "fruit" 相对顺序不变
使用 Fisher-Yates 算法高效打乱数组:
function shuffle(arr) {
for (let i = arr.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[arr[i], arr[j]] = [arr[j], arr[i]];
}
return arr;
}
对复杂对象数组,可先映射关键值再排序,减少计算:
const products = [
{ name: "Laptop", price: 1200 },
{ name: "Phone", price: 800 }
];
// 1. 创建价格映射
const priceMap = new Map(products.map(p => [p, p.price]));
// 2. 排序
products.sort((a, b) => priceMap.get(a) - priceMap.get(b));
📊 四、排序方法性能对比
方法 | |||
---|---|---|---|
sort() |
|||
💡 建议:
90% 场景使用内置 sort()
+ 自定义比较函数即可。大数组(>10k 元素)优先选择分治类算法(如快速排序)。 对稳定性有要求时(如表格多级排序),确认环境支持 ES2019+。
💎 总结
JavaScript 排序既灵活又强大:
-
基础
掌握 sort()
的比较函数写法,解决数值、字符串、对象排序问题。 -
进阶
理解经典算法原理,根据场景选择最优解。 -
高阶
多字段排序、洗牌算法、性能优化提升实战能力。

優(yōu)網(wǎng)科技秉承"專業(yè)團(tuán)隊(duì)、品質(zhì)服務(wù)" 的經(jīng)營(yíng)理念,誠(chéng)信務(wù)實(shí)的服務(wù)了近萬(wàn)家客戶,成為眾多世界500強(qiáng)、集團(tuán)和上市公司的長(zhǎng)期合作伙伴!
優(yōu)網(wǎng)科技成立于2001年,擅長(zhǎng)網(wǎng)站建設(shè)、網(wǎng)站與各類業(yè)務(wù)系統(tǒng)深度整合,致力于提供完善的企業(yè)互聯(lián)網(wǎng)解決方案。優(yōu)網(wǎng)科技提供PC端網(wǎng)站建設(shè)(品牌展示型、官方門戶型、營(yíng)銷商務(wù)型、電子商務(wù)型、信息門戶型、微信小程序定制開發(fā)、移動(dòng)端應(yīng)用(手機(jī)站、APP開發(fā))、微信定制開發(fā)(微信官網(wǎng)、微信商城、企業(yè)微信)等一系列互聯(lián)網(wǎng)應(yīng)用服務(wù)。