JS家的排序算法

╰+攻爆jí腚メ 2022-04-03 03:54 164阅读 0赞

> **小编推荐：**[Fundebug][]专注于JavaScript、微信小程序、微信小游戏，Node.js和Java实时BUG监控。真的是一个很好用的bug监控费服务，众多大佬公司都在使用。

## 引子 ##

--------------------

有句话怎么说来着：

> 雷锋推倒雷峰塔，Java implements JavaScript.

当年，想凭借抱Java大腿火一把而不惜把自己名字给改了的JavaScript（原名LiveScript），如今早已光芒万丈。node JS的出现更是让JavaScript可以前后端通吃。虽然Java依然制霸企业级软件开发领域（C/C + +的大神们不要打我。。。），但在Web的江湖，JavaScript可谓风头无两，坐上了头把交椅。

然而，在传统的计算机算法和数据结构领域，大多数专业教材和书籍的默认语言都是Java或者C/C+ +。这给最近想恶补算法和数据结构知识的我造成了一定困扰，因为我想寻找一本以JavaScript为默认语言的算法书籍。当我了解到O’REILLY家的动物丛书系列里有一本叫做《数据结构与算法JavaScript描述》时，便兴奋的花了两天时间把这本书从头到尾读了一遍。它是一本很好的针对前端开发者们的入门算法书籍，可是，它有一个很大的缺陷，就是里面有很多明显的小错误，明显到就连我这种半路出家的程序猿都能一眼看出来。还有一个问题是，很多重要的算法和数据结构知识并没有在这本书里被提到。这些问题对于作为一个晚期强迫症患者的我来说简直不能忍。于是乎，一言不合我就决定自己找资料总结算法。那么，我就从算法领域里最基础的知识点——排序算法总结起好了。

我相信以下的代码里一定会有某些bug或错误或语法不规范等问题是我自己无法发现的，所以敬请各位大神能够指出错误，因为只有在不断改错的道路上我才能取得长久的进步。

## 十大经典算法排序总结对比 ##

--------------------

一张图概括：

![Image 1][]

主流排序算法概览

名词解释：

**n**: 数据规模  
**k**:“桶”的个数  
**In-place**: 占用常数内存，不占用额外内存  
**Out-place**: 占用额外内存  
**稳定性**：排序后2个相等键值的顺序和排序之前它们的顺序相同

## 冒泡排序（Bubble Sort） ##

--------------------

冒泡排序须知：

作为最简单的排序算法之一，冒泡排序给我的感觉就像Abandon在单词书里出现的感觉一样，每次都在第一页第一位，所以最熟悉。。。冒泡排序还有一种优化算法，就是立一个flag，当在一趟序列遍历中元素没有发生交换，则证明该序列已经有序。但这种改进对于提升性能来说并没有什么太大作用。。。

什么时候最快（Best Cases）：

当输入的数据已经是正序时（都已经是正序了，我还要你冒泡排序有何用啊。。。。）

什么时候最慢（Worst Cases）：

当输入的数据是反序时（写一个for循环反序输出数据不就行了，干嘛要用你冒泡排序呢，我是闲的吗。。。）

冒泡排序动图演示：

![20181220123652422][]

Bubble Sort 动图演示 算法可视化来源：http://visualgo.net/

冒泡排序JavaScript代码实现：

## 选择排序（Selection Sort） ##

--------------------

选择排序须知：

在时间复杂度上表现最稳定的排序算法之一，因为无论什么数据进去都是O(n²)的时间复杂度。。。所以用到它的时候，数据规模越小越好。唯一的好处可能就是不占用额外的内存空间了吧。

选择排序动图演示：

![20181220123652461][]

Selection Sort 动图演示 算法可视化来源：http://visualgo.net/

选择排序JavaScript代码实现：

## 插入排序（Insertion Sort） ##

--------------------

插入排序须知：

插入排序的代码实现虽然没有冒泡排序和选择排序那么简单粗暴，但它的原理应该是最容易理解的了，因为只要打过扑克牌的人都应该能够秒懂。当然，如果你说你打扑克牌摸牌的时候从来不按牌的大小整理牌，那估计这辈子你对插入排序的算法都不会产生任何兴趣了。。。  
插入排序和冒泡排序一样，也有一种优化算法，叫做**拆半插入**。对于这种算法，得了懒癌的我就套用教科书上的一句经典的话吧：感兴趣的同学可以在课后自行研究。。。

插入排序动图演示：

![20181220123652499][]

Insertion Sort 动图演示 算法可视化来源：http://visualgo.net/

插入排序JavaScript代码实现：

## 希尔排序（Shell Sort） ##

--------------------

希尔排序须知：

希尔排序是插入排序的一种更高效率的实现。它与插入排序的不同之处在于，它会优先比较距离较远的元素。希尔排序的核心在于间隔序列的设定。既可以提前设定好间隔序列，也可以动态的定义间隔序列。动态定义间隔序列的算法是《算法（第4版》的合著者Robert Sedgewick提出的。在这里，我就使用了这种方法。

希尔排序JavaScript代码实现：

## 归并排序（Merge Sort） ##

--------------------

归并排序须知：

作为一种典型的分而治之思想的算法应用，归并排序的实现由两种方法：

1.  自上而下的递归（所有递归的方法都可以用迭代重写，所以就有了第2种方法）
2.  自下而上的迭代

在《数据结构与算法JavaScript描述》中，作者给出了自下而上的迭代方法。但是对于递归法，作者却认为：

> However, it is not possible to do so in JavaScript, as the recursion goes too deep

for the language to handle.  
然而,在 JavaScript 中这种方式不太可行,因为这个算法的递归深度对它来讲太深了。

说实话，我不太理解这句话。意思是JavaScript编译器内存太小，递归太深容易造成内存溢出吗？还望有大神能够指教。  
**更新**：  
在《JavaScript语言精粹》的第四章里提到了递归问题。对我之前的疑问进行了解答：

> Some languages offer the tail recursion optimization. This means that if a function returns the result of invoking itself recursively, then the invocation is replaced with a loop, which can significantly speed things up. Unfortunately, JavaScript does not currently provide tail recursion optimization. Functions that recurse very deeply can fail by exhausting the return stack.  
> 一些语言提供了尾递归优化。这意味着如果一个函数返回自身递归调用的结果，那么调用的过程会被替换为一个循环，它可以显著提高速度。遗憾的是，JavaScript当前并没有提供尾递归优化。深度递归的函数可能会因为堆栈溢出而运行失败。

简而言之，就是JavaScript没有对递归进行优化。运用递归函数不仅没有运行速度上的优势，还可能造成程序运行失败。因此不建议使用递归。  
**再次更新**：  
好消息！好消息！ES6已经添加了对尾递归优化的支持，妈妈再也不用担心我用JavaScript写递归了。不过，需要注意的是，ES6的尾递归优化只在严格模式下才会开启。这样规定的原因在阮一峰的《ECMAScript6 入门》里解释得很清楚：

> 正常模式下，函数内部有两个变量，可以跟踪函数的调用栈。  
> func.arguments：返回调用时函数的参数。  
> func.caller：返回调用当前函数的那个函数。  
> 尾调用优化发生时，函数的调用栈会改写，因此上面两个变量就会失真。严格模式禁用这两个变量，所以尾调用模式仅在严格模式下生效。

和选择排序一样，归并排序的性能不受输入数据的影响，但表现比选择排序好的多，因为始终都是O(n log n）的时间复杂度。代价是需要额外的内存空间。

归并排序动图演示：

![20181220123652534][]

Merge Sort 动图演示 算法可视化来源：http://visualgo.net/

归并排序JavaScript代码实现：

## 快速排序（Quick Sort） ##

--------------------

快速排序须知：

又是一种分而治之思想在排序算法上的典型应用。本质上来看，快速排序应该算是在冒泡排序基础上的递归分治法。  
快速排序的名字起的是简单粗暴，因为一听到这个名字你就知道它存在的意义，就是快，而且效率高! 它是处理大数据最快的排序算法之一了。虽然Worst Case的时间复杂度达到了O(n²)，但是人家就是优秀，在大多数情况下都比平均时间复杂度为O(n log n) 的排序算法表现要更好，可是这是为什么呢，我也不知道。。。好在我的强迫症又犯了，查了N多资料终于在《算法艺术与信息学竞赛》上找到了满意的答案：

> 快速排序的最坏运行情况是O(n²)，比如说顺序数列的快排。但它的平摊期望时间是O(n log n) ，且O(n log n)记号中隐含的常数因子很小，比复杂度稳定等于O(n log n)的归并排序要小很多。所以，对绝大多数顺序性较弱的随机数列而言，快速排序总是优于归并排序。

**更新**：  
《算法 第四版》里对于快速排序的优缺点进行了更加明确的解释：

> 快速排序的内循环比大多数排序算法都要短小，这意味着它无论是在理论上还是在实际中都要更快。它的主要缺点是非常脆弱，在实现时要非常小心才能避免低劣的性能。

快速排序动图演示：

![20181220123652644][]

Quick Sort 动图演示 算法可视化来源：http://visualgo.net/

快速排序JavaScript代码实现：

## 堆排序（Heap Sort） ##

--------------------

堆排序须知：

堆排序可以说是一种利用堆的概念来排序的选择排序。分为两种方法：

1.  大顶堆：每个节点的值都大于或等于其子节点的值，在堆排序算法中用于升序排列
2.  小顶堆：每个节点的值都小于或等于其子节点的值，在堆排序算法中用于降序排列

堆排序动图演示：

![20181220123652682][]

Heap Sort 动图演示 算法可视化来源：http://www.ee.ryerson.ca/~courses/coe428/sorting/heapsort.html

堆排序JavaScript代码实现：

var len;    //因为声明的多个函数都需要数据长度，所以把len设置成为全局变量
    
    function buildMaxHeap(arr) {   //建立大顶堆
        len = arr.length;
        for (var i = Math.floor(len/2); i >= 0; i--) {
            heapify(arr, i);
        }
    }
    
    function heapify(arr, i) {     //堆调整
        var left = 2 * i + 1,
            right = 2 * i + 2,
            largest = i;
    
        if (left < len && arr[left] > arr[largest]) {
            largest = left;
        }
    
        if (right < len && arr[right] > arr[largest]) {
            largest = right;
        }
    
        if (largest != i) {
            swap(arr, i, largest);
            heapify(arr, largest);
        }
    }
    
    function swap(arr, i, j) {
        var temp = arr[i];
        arr[i] = arr[j];
        arr[j] = temp;
    }
    
    function heapSort(arr) {
        buildMaxHeap(arr);
    
        for (var i = arr.length-1; i > 0; i--) {
            swap(arr, 0, i);
            len--;
            heapify(arr, 0);
        }
        return arr;
    }

## 计数排序（Counting Sort） ##

--------------------

计数排序须知：

计数排序的核心在于将输入的数据值转化为键存储在额外开辟的数组空间中。  
作为一种线性时间复杂度的排序，计数排序要求输入的数据必须是有确定范围的整数。

计数排序动图演示：

![Image 1][]

Counting Sort 动图演示 算法可视化来源：http://visualgo.net/

计数排序JavaScript代码实现：

## 桶排序（Bucket Sort） ##

--------------------

桶排序须知：

桶排序是计数排序的升级版。它利用了函数的映射关系，高效与否的关键就在于这个映射函数的确定。  
为了使桶排序更加高效，我们需要做到这两点：

1.  在额外空间充足的情况下，尽量增大桶的数量
2.  使用的映射函数能够将输入的N个数据均匀的分配到K个桶中

同时，对于桶中元素的排序，选择何种比较排序算法对于性能的影响至关重要。

什么时候最快（Best Cases）：

当输入的数据可以均匀的分配到每一个桶中

什么时候最慢（Worst Cases）：

当输入的数据被分配到了同一个桶中

桶排序JavaScript代码实现：

## 基数排序（Radix Sort） ##

--------------------

基数排序须知：

基数排序有两种方法：

1.  MSD 从高位开始进行排序
2.  LSD 从低位开始进行排序

基数排序 vs 计数排序 vs 桶排序

这三种排序算法都利用了桶的概念，但对桶的使用方法上有明显差异：  
基数排序：根据键值的每位数字来分配桶  
计数排序：每个桶只存储单一键值  
桶排序：每个桶存储一定范围的数值

LSD基数排序动图演示：

![Image 1][]

Radix Sort 动图演示 算法可视化来源：http://visualgo.net/

基数排序JavaScript代码实现：

//LSD Radix Sort
    var counter = [];
    function radixSort(arr, maxDigit) {
        var mod = 10;
        var dev = 1;
        for (var i = 0; i < maxDigit; i++, dev *= 10, mod *= 10) {
            for(var j = 0; j < arr.length; j++) {
                var bucket = parseInt((arr[j] % mod) / dev);
                if(counter[bucket]==null) {
                    counter[bucket] = [];
                }
                counter[bucket].push(arr[j]);
            }
            var pos = 0;
            for(var j = 0; j < counter.length; j++) {
                var value = null;
                if(counter[j]!=null) {
                    while ((value = counter[j].shift()) != null) {
                          arr[pos++] = value;
                    }
              }
            }
        }
        return arr;
    }

## 写在最后 ##

--------------------

排序算法实在是博大精深，还有hin多hin多我没有总结到或者我自己还没弄明白的算法，仅仅是总结这十种排序算法都把我写哭了。。。  
因此，以后如果我掌握了更多的排序姿势，我一定还会回来的！  
  
作者：不是小羊的肖恩  
链接：https://www.jianshu.com/p/1b4068ccd505

## 关于Fundebug ##

[Fundebug][]专注于JavaScript、微信小程序、微信小游戏、支付宝小程序、React Native、Node.js和Java实时BUG监控。 自从2016年双十一正式上线，Fundebug累计处理了9亿+错误事件，得到了Google、360、金山软件、百姓网等众多知名用户的认可。欢迎免费试用！

[![2018121912254161][]][2018121912254161]

[Fundebug]: https://www.fundebug.com/
[Image 1]: 
[20181220123652422]: /images/20220403/cc99f6c4ec754ace9a52c607de52ce6f.png
[20181220123652461]: /images/20220403/a97eb7aad4874813aa6a0c774dc70c8d.png
[20181220123652499]: /images/20220403/9b35c764208949758bfe4e7fc6c95870.png
[20181220123652534]: /images/20220403/ed3fd45ce82f44f3b82bfe6424c5738a.png
[20181220123652644]: /images/20220403/bf9c44260194492d801f8a7af0939b14.png
[20181220123652682]: /images/20220403/5f7082b0a26d4a4d98bf069a7ebc2132.png
[2018121912254161]: /images/20220403/bf736eb088004cdda79dc69c34870216.png