1. 前言
算法为王。想学好前端，先练好内功，内功不行，就算招式练的再花哨，终究成不了高手；只有内功深厚者，前端之路才会走得更远。
笔者写的 JavaScript 数据结构与算法之美 系列用的语言是 JavaScript ，旨在入门数据结构与算法和方便以后复习。
文中包含了 十大经典排序算法 的思想、代码实现、一些例子、复杂度分析、动画、还有算法可视化工具。
这应该是目前较为简单的 JavaScript 十大经典排序算法 的文章讲解了吧。
2. 如何分析一个排序算法
复杂度分析是整个算法学习的精髓。
- 时间复杂度: 一个算法执行所耗费的时间。
- 空间复杂度: 运行完一个程序所需内存的大小。
时间和空间复杂度的详解，请看 JavaScript 数据结构与算法之美 - 时间和空间复杂度。
学习排序算法，我们除了学习它的算法原理、代码实现之外，更重要的是要学会如何评价、分析一个排序算法。
分析一个排序算法，要从 执行效率、内存消耗、稳定性 三方面入手。
2.1 执行效率
1. 最好情况、最坏情况、平均情况时间复杂度
我们在分析排序算法的时间复杂度时，要分别给出最好情况、最坏情况、平均情况下的时间复杂度。
除此之外，你还要说出最好、最坏时间复杂度对应的要排序的原始数据是什么样的。
2. 时间复杂度的系数、常数 、低阶
我们知道，时间复杂度反应的是数据规模 n 很大的时候的一个增长趋势，所以它表示的时候会忽略系数、常数、低阶。
但是实际的软件开发中，我们排序的可能是 10 个、100 个、1000 个这样规模很小的数据，所以，在对同一阶时间复杂度的排序算法性能对比的时候，我们就要把系数、常数、低阶也考虑进来。
3. 比较次数和交换（或移动）次数
这一节和下一节讲的都是基于比较的排序算法。基于比较的排序算法的执行过程，会涉及两种操作，一种是元素比较大小，另一种是元素交换或移动。
所以，如果我们在分析排序算法的执行效率的时候，应该把比较次数和交换（或移动）次数也考虑进去。
2.2 内存消耗
也就是看空间复杂度。
还需要知道如下术语：
- 内排序：所有排序操作都在内存中完成；
- 外排序：由于数据太大，因此把数据放在磁盘中，而排序通过磁盘和内存的数据传输才能进行；
- 原地排序：原地排序算法，就是特指空间复杂度是 O(1) 的排序算法。
2.3 稳定性
- 稳定：如果待排序的序列中存在值
相等的元素，经过排序之后，相等元素之间原有的先后顺序不变。
比如： a 原本在 b 前面，而 a = b，排序之后，a 仍然在 b 的前面；
- 不稳定：如果待排序的序列中存在值
相等的元素，经过排序之后，相等元素之间原有的先后顺序改变。
比如：a 原本在 b 的前面，而 a = b，排序之后， a 在 b 的后面；
3. 十大经典排序算法
3.1 冒泡排序（Bubble Sort）
思想
- 冒泡排序只会操作相邻的两个数据。
- 每次冒泡操作都会对相邻的两个元素进行比较，看是否满足大小关系要求。如果不满足就让它俩互换。
- 一次冒泡会让至少一个元素移动到它应该在的位置，重复 n 次，就完成了 n 个数据的排序工作。
特点
- 优点：排序算法的基础，简单实用易于理解。
- 缺点：比较次数多，效率较低。
实现
// 冒泡排序（未优化） const bubbleSort = arr => { console.time('改进前冒泡排序耗时'); const length = arr.length; if (length <= 1) return; // i < length - 1 是因为外层只需要 length-1 次就排好了，第 length 次比较是多余的。 for (let i = 0; i < length - 1; i++) { // j < length - i - 1 是因为内层的 length-i-1 到 length-1 的位置已经排好了，不需要再比较一次。 for (let j = 0; j < length - i - 1; j++) { if (arr[j] > arr[j + 1]) { const temp = arr[j]; arr[j] = arr[j + 1]; arr[j + 1] = temp; } } } console.log('改进前 arr :', arr); console.timeEnd('改进前冒泡排序耗时'); };
优化：当某次冒泡操作已经没有数据交换时，说明已经达到完全有序，不用再继续执行后续的冒泡操作。
// 冒泡排序（已优化） const bubbleSort2 = arr => { console.time('改进后冒泡排序耗时'); const length = arr.length; if (length <= 1) return; // i < length - 1 是因为外层只需要 length-1 次就排好了，第 length 次比较是多余的。 for (let i = 0; i < length - 1; i++) { let hasChange = false; // 提前退出冒泡循环的标志位 // j < length - i - 1 是因为内层的 length-i-1 到 length-1 的位置已经排好了，不需要再比较一次。 for (let j = 0; j < length - i - 1; j++) { if (arr[j] > arr[j + 1]) { const temp = arr[j]; arr[j] = arr[j + 1]; arr[j + 1] = temp; hasChange = true; // 表示有数据交换 } } if (!hasChange) break; // 如果 false 说明所有元素已经到位，没有数据交换，提前退出 } console.log('改进后 arr :', arr); console.timeEnd('改进后冒泡排序耗时'); };
测试
// 测试 const arr = [7, 8, 4, 5, 6, 3, 2, 1]; bubbleSort(arr); // 改进前 arr : [1, 2, 3, 4, 5, 6, 7, 8] // 改进前冒泡排序耗时: 0.43798828125ms const arr2 = [7, 8, 4, 5, 6, 3, 2, 1]; bubbleSort2(arr2); // 改进后 arr : [1, 2, 3, 4, 5, 6, 7, 8] // 改进后冒泡排序耗时: 0.318115234375ms
分析
- 第一，冒泡排序是原地排序算法吗 ？
冒泡的过程只涉及相邻数据的交换操作，只需要常量级的临时空间，所以它的空间复杂度为 O(1)，是一个原地排序算法。
- 第二，冒泡排序是稳定的排序算法吗 ？
在冒泡排序中，只有交换才可以改变两个元素的前后顺序。
为了保证冒泡排序算法的稳定性，当有相邻的两个元素大小相等的时候，我们不做交换，相同大小的数据在排序前后不会改变顺序。
所以冒泡排序是稳定的排序算法。
- 第三，冒泡排序的时间复杂度是多少 ？
最佳情况：T(n) = O(n)，当数据已经是正序时。
最差情况：T(n) = O(n2)，当数据是反序时。
平均情况：T(n) = O(n2)。
动画
3.2 插入排序（Insertion Sort）
插入排序又为分为 直接插入排序 和优化后的 拆半插入排序 与 希尔排序，我们通常说的插入排序是指直接插入排序。
一、直接插入
思想
一般人打扑克牌，整理牌的时候，都是按牌的大小（从小到大或者从大到小）整理牌的，那每摸一张新牌，就扫描自己的牌，把新牌插入到相应的位置。
插入排序的工作原理：通过构建有序序列，对于未排序数据，在已排序序列中从后向前扫描，找到相应位置并插入。
步骤
- 从第一个元素开始，该元素可以认为已经被排序；
- 取出下一个元素，在已经排序的元素序列中从后向前扫描；
- 如果该元素（已排序）大于新元素，将该元素移到下一位置；
- 重复步骤 3，直到找到已排序的元素小于或者等于新元素的位置；
- 将新元素插入到该位置后；
- 重复步骤 2 ~ 5。
实现
// 插入排序 const insertionSort = array => { const len = array.length; if (len <= 1) return let preIndex, current; for (let i = 1; i < len; i++) { preIndex = i - 1; //待比较元素的下标 current = array[i]; //当前元素 while (preIndex >= 0 && array[preIndex] > current) { //前置条件之一: 待比较元素比当前元素大 array[preIndex + 1] = array[preIndex]; //将待比较元素后移一位 preIndex--; //游标前移一位 } if (preIndex + 1 != i) { //避免同一个元素赋值给自身 array[preIndex + 1] = current; //将当前元素插入预留空位 console.log('array :', array); } } return array; };
测试
// 测试 const array = [5, 4, 3, 2, 1]; console.log("原始 array :", array); insertionSort(array); // 原始 array: [5, 4, 3, 2, 1] // array: [4, 5, 3, 2, 1] // array: [3, 4, 5, 2, 1] // array: [2, 3, 4, 5, 1] // array: [1, 2, 3, 4, 5]
分析
- 第一，插入排序是原地排序算法吗 ？
插入排序算法的运行并不需要额外的存储空间，所以空间复杂度是 O(1)，所以，这是一个原地排序算法。
- 第二，插入排序是稳定的排序算法吗 ？
在插入排序中，对于值相同的元素，我们可以选择将后面出现的元素，插入到前面出现元素的后面，这样就可以保持原有的前后顺序不变，所以插入排序是稳定的排序算法。
- 第三，插入排序的时间复杂度是多少 ？
最佳情况：T(n) = O(n)，当数据已经是正序时。
最差情况：T(n) = O(n2)，当数据是反序时。
平均情况：T(n) = O(n2)。
动画
二、拆半插入
插入排序也有一种优化算法，叫做拆半插入。
思想
折半插入排序是直接插入排序的升级版，鉴于插入排序第一部分为已排好序的数组，我们不必按顺序依次寻找插入点，只需比较它们的中间值与待插入元素的大小即可。
步骤
- 取 0 ~ i-1 的中间点 ( m = (i-1) >> 1 )，array[i] 与 array[m] 进行比较，若 array[i] < array[m]，则说明待插入的元素 array[i] 应该处于数组的 0 ~ m 索引之间；反之，则说明它应该处于数组的 m ~ i-1 索引之间。
- 重复步骤 1，每次缩小一半的查找范围，直至找到插入的位置。
- 将数组中插入位置之后的元素全部后移一位。
- 在指定位置插入第 i 个元素
注：x >> 1 是位运算中的右移运算，表示右移一位，等同于 x 除以 2 再取整，即 x >> 1 == Math.floor(x/2) 。
// 折半插入排序 const binaryInsertionSort = array => { const len = array.length; if (len <= 1) return; let current, i, j, low, high, m; for (i = 1; i < len; i++) { low = 0; high = i - 1; current = array[i]; while (low <= high) { //步骤 1 & 2 : 折半查找 m = (low + high) >> 1; // 注: x>>1 是位运算中的右移运算, 表示右移一位, 等同于 x 除以 2 再取整, 即 x>>1 == Math.floor(x/2) . if (array[i] >= array[m]) { //值相同时, 切换到高半区，保证稳定性 low = m + 1; //插入点在高半区 } else { high = m - 1; //插入点在低半区 } } for (j = i; j > low; j--) { //步骤 3: 插入位置之后的元素全部后移一位 array[j] = array[j - 1]; console.log('array2 :', JSON.parse(JSON.stringify(array))); } array[low] = current; //步骤 4: 插入该元素 } console.log('array2 :', JSON.parse(JSON.stringify(array))); return array; };
测试
const array2 = [5, 4, 3, 2, 1]; console.log('原始 array2:', array2); binaryInsertionSort(array2); // 原始 array2: [5, 4, 3, 2, 1] // array2 : [5, 5, 3, 2, 1] // array2 : [4, 5, 5, 2, 1] // array2 : [4, 4, 5, 2, 1] // array2 : [3, 4, 5, 5, 1] // array2 : [3, 4, 4, 5, 1] // array2 : [3, 3, 4, 5, 1] // array2 : [2, 3, 4, 5, 5] // array2 : [2, 3, 4, 4, 5] // array2 : [2, 3, 3, 4, 5] // array2 : [2, 2, 3, 4, 5] // array2 : [1, 2, 3, 4, 5]
注意：和直接插入排序类似，折半插入排序每次交换的是相邻的且值为不同的元素，它并不会改变值相同的元素之间的顺序，因此它是稳定的。
三、希尔排序
希尔排序是一个平均时间复杂度为 O(n log n) 的算法，会在下一个章节和 归并排序、快速排序、堆排序 一起讲，本文就不展开了。
3.3 选择排序（Selection Sort）
思路
选择排序算法的实现思路有点类似插入排序，也分已排序区间和未排序区间。但是选择排序每次会从未排序区间中找到最小的元素，将其放到已排序区间的末尾。
步骤
- 首先在未排序序列中找到最小（大）元素，存放到排序序列的起始位置。
- 再从剩余未排序元素中继续寻找最小（大）元素，然后放到已排序序列的末尾。
- 重复第二步，直到所有元素均排序完毕。
实现
const selectionSort = array => { const len = array.length; let minIndex, temp; for (let i = 0; i < len - 1; i++) { minIndex = i; for (let j = i + 1; j < len; j++) { if (array[j] < array[minIndex]) { // 寻找最小的数 minIndex = j; // 将最小数的索引保存 } } temp = array[i]; array[i] = array[minIndex]; array[minIndex] = temp; console.log('array: ', array); } return array; };
测试
// 测试 const array = [5, 4, 3, 2, 1]; console.log('原始array:', array); selectionSort(array); // 原始 array: [5, 4, 3, 2, 1] // array: [1, 4, 3, 2, 5] // array: [1, 2, 3, 4, 5] // array: [1, 2, 3, 4, 5] // array: [1, 2, 3, 4, 5]
分析
- 第一，选择排序是原地排序算法吗 ？
选择排序空间复杂度为 O(1)，是一种原地排序算法。
- 第二，选择排序是稳定的排序算法吗 ？
选择排序每次都要找剩余未排序元素中的最小值，并和前面的元素交换位置，这样破坏了稳定性。所以，选择排序是一种不稳定的排序算法。
- 第三，选择排序的时间复杂度是多少 ？
无论是正序还是逆序，选择排序都会遍历 n2 / 2 次来排序，所以，最佳、最差和平均的复杂度是一样的。
最佳情况：T(n) = O(n2)。
最差情况：T(n) = O(n2)。
平均情况：T(n) = O(n2)。
动画
3.4 归并排序（Merge Sort）
思想
排序一个数组，我们先把数组从中间分成前后两部分，然后对前后两部分分别排序，再将排好序的两部分合并在一起，这样整个数组就都有序了。
归并排序采用的是分治思想。
分治，顾名思义，就是分而治之，将一个大问题分解成小的子问题来解决。小的子问题解决了，大问题也就解决了。
注：x >> 1 是位运算中的右移运算，表示右移一位，等同于 x 除以 2 再取整，即 x >> 1 === Math.floor(x / 2) 。
实现
const mergeSort = arr => { //采用自上而下的递归方法 const len = arr.length; if (len < 2) { return arr; } // length >> 1 和 Math.floor(len / 2) 等价 let middle = Math.floor(len / 2), left = arr.slice(0, middle), right = arr.slice(middle); // 拆分为两个子数组 return merge(mergeSort(left), mergeSort(right)); }; const merge = (left, right) => { const result = []; while (left.length && right.length) { // 注意: 判断的条件是小于或等于，如果只是小于，那么排序将不稳定. if (left[0] <= right[0]) { result.push(left.shift()); } else { result.push(right.shift()); } } while (left.length) result.push(left.shift()); while (right.length) result.push(right.shift()); return result; };
测试
// 测试 const arr = [3, 44, 38, 5, 47, 15, 36, 26, 27, 2, 46, 4, 19, 50, 48]; console.time('归并排序耗时'); console.log('arr :', mergeSort(arr)); console.timeEnd('归并排序耗时'); // arr : [2, 3, 4, 5, 15, 19, 26, 27, 36, 38, 44, 46, 47, 48, 50] // 归并排序耗时: 0.739990234375ms
分析
- 第一，归并排序是原地排序算法吗 ？
这是因为归并排序的合并函数，在合并两个有序数组为一个有序数组时，需要借助额外的存储空间。
实际上，尽管每次合并操作都需要申请额外的内存空间，但在合并完成之后，临时开辟的内存空间就被释放掉了。在任意时刻，CPU 只会有一个函数在执行，也就只会有一个临时的内存空间在使用。临时内存空间最大也不会超过 n 个数据的大小，所以空间复杂度是 O(n)。
所以，归并排序不是原地排序算法。
- 第二，归并排序是稳定的排序算法吗 ？
merge 方法里面的 left[0] <= right[0] ，保证了值相同的元素，在合并前后的先后顺序不变。归并排序是稳定的排序方法。
- 第三，归并排序的时间复杂度是多少 ？
从效率上看，归并排序可算是排序算法中的佼佼者。假设数组长度为 n，那么拆分数组共需 logn 步，又每步都是一个普通的合并子数组的过程，时间复杂度为 O(n)，故其综合时间复杂度为 O(n log n)。
最佳情况：T(n) = O(n log n)。
最差情况：T(n) = O(n log n)。
平均情况：T(n) = O(n log n)。
动画
3.5 快速排序 （Quick Sort）
快速排序的特点就是快，而且效率高！它是处理大数据最快的排序算法之一。
思想
- 先找到一个基准点（一般指数组的中部），然后数组被该基准点分为两部分，依次与该基准点数据比较，如果比它小，放左边；反之，放右边。
- 左右分别用一个空数组去存储比较后的数据。
- 最后递归执行上述操作，直到数组长度 <= 1;
特点：快速，常用。
缺点：需要另外声明两个数组，浪费了内存空间资源。
实现
方法一：
const quickSort1 = arr => { if (arr.length <= 1) { return arr; } //取基准点 const midIndex = Math.floor(arr.length / 2); //取基准点的值，splice(index,1) 则返回的是含有被删除的元素的数组。 const valArr = arr.splice(midIndex, 1); const midIndexVal = valArr[0]; const left = []; //存放比基准点小的数组 const right = []; //存放比基准点大的数组 //遍历数组，进行判断分配 for (let i = 0; i < arr.length; i++) { if (arr[i] < midIndexVal) { left.push(arr[i]); //比基准点小的放在左边数组 } else { right.push(arr[i]); //比基准点大的放在右边数组 } } //递归执行以上操作，对左右两个数组进行操作，直到数组长度为 <= 1 return quickSort1(left).concat(midIndexVal, quickSort1(right)); }; const array2 = [5, 4, 3, 2, 1]; console.log('quickSort1 ', quickSort1(array2)); // quickSort1: [1, 2, 3, 4, 5]
方法二：
// 快速排序 const quickSort = (arr, left, right) => { let len = arr.length, partitionIndex; left = typeof left != 'number' ? 0 : left; right = typeof right != 'number' ? len - 1 : right; if (left < right) { partitionIndex = partition(arr, left, right); quickSort(arr, left, partitionIndex - 1); quickSort(arr, partitionIndex + 1, right); } return arr; }; const partition = (arr, left, right) => { //分区操作 let pivot = left, //设定基准值（pivot） index = pivot + 1; for (let i = index; i <= right; i++) { if (arr[i] < arr[pivot]) { swap(arr, i, index); index++; } } swap(arr, pivot, index - 1); return index - 1; }; const swap = (arr, i, j) => { let temp = arr[i]; arr[i] = arr[j]; arr[j] = temp; };
测试
// 测试 const array = [5, 4, 3, 2, 1]; console.log('原始array:', array); const newArr = quickSort(array); console.log('newArr:', newArr); // 原始 array: [5, 4, 3, 2, 1] // newArr: [1, 4, 3, 2, 5]
分析
- 第一，快速排序是原地排序算法吗 ？
因为 partition() 函数进行分区时，不需要很多额外的内存空间，所以快排是原地排序算法。
- 第二，快速排序是稳定的排序算法吗 ？
和选择排序相似，快速排序每次交换的元素都有可能不是相邻的，因此它有可能打破原来值为相同的元素之间的顺序。因此，快速排序并不稳定。
- 第三，快速排序的时间复杂度是多少 ？
极端的例子：如果数组中的数据原来已经是有序的了，比如 1，3，5，6，8。如果我们每次选择最后一个元素作为 pivot，那每次分区得到的两个区间都是不均等的。我们需要进行大约 n 次分区操作，才能完成快排的整个过程。每次分区我们平均要扫描大约 n / 2 个元素，这种情况下，快排的时间复杂度就从 O(nlogn) 退化成了 O(n2)。
最佳情况：T(n) = O(n log n)。
最差情况：T(n) = O(n2)。
平均情况：T(n) = O(n log n)。
动画
解答开篇问题
快排和归并用的都是分治思想，递推公式和递归代码也非常相似，那它们的区别在哪里呢 ？
可以发现：
- 归并排序的处理过程是
由下而上的，先处理子问题，然后再合并。 - 而快排正好相反，它的处理过程是
由上而下的，先分区，然后再处理子问题。 - 归并排序虽然是稳定的、时间复杂度为 O(nlogn) 的排序算法，但是它是非原地排序算法。
- 归并之所以是非原地排序算法，主要原因是合并函数无法在原地执行。
- 快速排序通过设计巧妙的原地分区函数，可以实现原地排序，解决了归并排序占用太多内存的问题。
