前端开发必知:五种核心排序算法原理与实现详解
本文深入解析前端开发中五种基础且关键的排序算法:冒泡、选择、插入、快速及归并排序。通过梳理各算法的核心原理与逻辑步骤,结合JavaScript代码实现,帮助开发者理解分治、遍历与递归机制,从而在实际项目中根据数据规模选择最优排序方案,提升数据处理效率与代码性能。
前言
在前端开发领域,数据排序是一项基础且高频的操作。熟练掌握各类排序算法,不仅能提升数据处理效率,还能优化代码执行性能。本文旨在系统介绍五种经典且常用的排序算法:冒泡排序、选择排序、插入排序、快速排序以及归并排序。通过深入剖析这些算法的运行机制与逻辑结构,开发者能够更精准地选择适合场景的排序策略,进而优化应用的整体性能。
1. 冒泡排序(Bubble Sort)
冒泡排序是一种直观且易于理解的排序方法。其核心机制是反复遍历待排序数列,依次比较相邻的两个元素。若发现元素顺序与预期不符(即前大后小),则交换二者位置。该过程持续进行,直至某次遍历中未发生任何交换操作,表明数列已完全有序。
原理和逻辑:
- 比较相邻的两个元素,如果第一个比第二个大,就交换它们两个;
- 对每一对相邻元素做同样的工作,从开始第一对到结尾的最后一对。这步做完后,最后的元素会是最大的数;
- 针对所有的元素重复以上的步骤,除了最后一个;
- 持续每次对越来越少的元素重复上面的步骤,直到没有任何一对数字需要比较。
代码实现
// 1. 冒泡排序
let arr = [2, 5, 8, 1, 3, 9, 6, 7];
const bubbleSort = (arr) => {
let len = arr.length;
for (let i = 0; i < len; i++) {
for (let j = 0; j < len - i - 1; j++) {
if (arr[j] > arr[j + 1]) {
let tmp = arr[j];
arr[j] = arr[j + 1];
arr[j + 1] = tmp;
}
}
}
return arr;
};
console.log("bubbleSort:",bubbleSort(arr));
//bubbleSort: [1, 2, 3, 5, 6, 7, 8, 9]
2. 选择排序(Selection Sort)
选择排序是一种简单直观的排序策略。其运作机制是:首先在未排序序列中找出最小(或最大)的元素,将其放置在已排序序列的起始位置;随后,从剩余未排序元素中继续寻找最小(或最大)元素,并追加到已排序序列的末尾。该过程重复执行,直至所有元素均被排序。
原理和逻辑:
- 从未排序序列中找到最小(大)元素,存放到排序序列的起始位置;
- 再从剩余未排序元素中继续寻找最小(大)元素,然后放到已排序序列的末尾;
- 重复第二步,直到所有元素均排序完毕。
代码实现
// 2. 选择排序
let arr = [2, 5, 8, 1, 3, 9, 6, 7];
const selectSort = (arr) => {
let len = arr.length;
for (let i = 0; i < len - 1; i++) {
let maxIndex = i;
for (let j = i + 1; j < len; j++) {
if (arr[j] > arr[maxIndex]) {
maxIndex = j;
}
}
let tmp = arr[i];
arr[i] = arr[maxIndex];
arr[maxIndex] = tmp;
}
return arr;
};
console.log("selectSort:",selectSort(arr));
//selectSort: [1, 2, 3, 5, 6, 7, 8, 9]
3. 插入排序(Insertion Sort)
插入排序的核心思想是构建有序序列。对于未排序的数据,算法从已排序序列的末尾向前扫描,找到合适的位置并将当前元素插入其中,从而逐步扩大有序序列的范围。
原理和逻辑:
- 从第一个元素开始,该元素可以认为已经被排序;
- 取出下一个元素,在已经排序的元素序列中从后向前扫描;
- 如果该元素(已排序)大于新元素,将该元素移到下一位置;
- 重复步骤3,直到找到已排序的元素小于或者等于新元素的位置;
- 将新元素插入到该位置后;
- 重复步骤1~5。
代码实现
// 3. 插入排序
let arr = [2, 5, 8, 1, 3, 9, 6, 7];
const insertSort = (arr) => {
let len = arr.length;
for (let i = 1; i < len; i++) {
let current = arr[i];
let prev = i - 1;
while (prev >= 0 && current < arr[prev]) {
arr[prev + 1] = arr[prev];
prev--;
}
arr[prev + 1] = current;
}
return arr;
};
console.log("insertSort:", insertSort(arr));
//insertSort: [1, 2, 3, 5, 6, 7, 8, 9]
4. 快速排序(Quick Sort)
快速排序采用分治法策略。它通过选取一个基准值,将数据集划分为两部分:一部分的所有元素均小于基准值,另一部分的所有元素均大于基准值。随后,算法递归地对这两部分子数组分别执行快速排序,直至整个序列有序。
原理和逻辑:
- 选择一个基准值,通常选择第一个元素或者中间元素;
- 重新排序数组,所有比基准值小的元素摆放在基准前面,所有比基准值大的元素摆在基准后面(相同的数可以到任一边)。在这个分区退出之后,该基准就处于数组的中间位置;
- 递归地(recursive)把小于基准值元素的子数组和大于基准值元素的子数组排序。
代码实现
// 4. 快速排序
let arr = [2, 5, 8, 1, 3, 9, 6, 7];
function quickSort(arr){
if(arr.length <2 ) return arr
let first = arr[0]
let left = [], right=[]
for(let i = 1 ; i <arr.length; i++){
if(first > arr[i]){
right.push(arr[i])
}else{
left.push(arr[i])
}
}
return [...quickSort(left) , first , ...quickSort(right)]
}
console.log('quickSort:',quickSort(arr));
//quickSort: [1, 2, 3, 5, 6, 7, 8, 9]5. 归并排序(Merge Sort)
归并排序是一种基于归并操作的高效排序算法,也是分治法(Divide and Conquer)的典型应用。它通过将大问题分解为小问题,分别解决后再合并结果,从而实现排序。
原理和逻辑:
- 把长度为n的输入序列分成两个长度为n/2的子序列;
- 对这两个子序列分别采用归并排序;
- 将两个排序好的子序列合并成一个最终的排序序列。
代码实现
// 5. 归并排序
let arr = [2, 5, 8, 1, 3, 9, 6, 7];
function mergeSort(arr) {
if (arr.length < 2) return arr;
let middle = Math.floor(arr.length / 2);
let left = arr.slice(0, middle);
let right = arr.slice(middle, arr.length);
return merge(mergeSort(left), mergeSort(right));
}
function merge(left, right) {
let result = [];
while (left.length && right.length) {
if (left[0] < right[0]) {
result.push(left.shift());
} else {
result.push(left.shift());
}
}
// 这也可以采用 while
if (left.length) {
result.push(...left);
}
if (right.length) {
result.push(...right);
}
return result;
}
console.log("mergeSort:", mergeSort(arr));
//mergeSort: [1, 2, 3, 5, 6, 7, 8, 9]总结
至此,关于前端必须掌握的五种常用排序算法的详细介绍已完毕。如需了解更多前端排序算法相关内容,建议查阅本站过往文章或继续浏览后续相关教程。感谢大家的支持与关注!
JS动态构建复杂嵌套JSON对象的方法
2026-11-05 15:41:52
JS负数取余为什么是负数?详解余数与模运算区别
2026-11-05 13:34:41
JS 解压出现乱码或报错怎么解决?
2026-11-05 12:32:38
JS 中 startsWith、indexOf 与正则判断字符串前缀的对比
2026-11-04 22:19:43
JS解析Excel后怎么将数据转换为JSON格式
2026-11-04 20:58:28
