JS的十大經典演算法排序

来源:http://www.cnblogs.com/dushao/archive/2016/10/27/6004883.html
-Advertisement-
Play Games

引子 有句話怎麼說來著： 雷鋒推倒雷峰塔，Java implements JavaScript. 當年，想憑藉抱Java大腿火一把而不惜把自己名字給改了的JavaScript（原名LiveScript），如今早已光芒萬丈。node JS的出現更是讓JavaScript可以前後端通吃。雖然Java依然 ...


引子

有句話怎麼說來著：

雷鋒推倒雷峰塔，Java implements JavaScript.

當年，想憑藉抱Java大腿火一把而不惜把自己名字給改了的JavaScript（原名LiveScript），如今早已光芒萬丈。node JS的出現更是讓JavaScript可以前後端通吃。雖然Java依然制霸企業級軟體開發領域（C/C + +的大神們不要打我。。。），但在Web的江湖，JavaScript可謂風頭無兩，坐上了頭把交椅。

然而，在傳統的電腦演算法和數據結構領域，大多數專業教材和書籍的預設語言都是Java或者C/C+ +。這給最近想惡補演算法和數據結構知識的我造成了一定困擾，因為我想尋找一本以JavaScript為預設語言的演算法書籍。當我瞭解到O’REILLY家的動物叢書系列里有一本叫做《數據結構與演算法JavaScript描述》時，便興奮的花了兩天時間把這本書從頭到尾讀了一遍。它是一本很好的針對前端開發者們的入門演算法書籍，可是，它有一個很大的缺陷，就是裡面有很多明顯的小錯誤，明顯到就連我這種半路出家的程式猿都能一眼看出來。還有一個問題是，很多重要的演算法和數據結構知識並沒有在這本書里被提到。這些問題對於作為一個晚期強迫症患者的我來說簡直不能忍。於是乎，一言不合我就決定自己找資料總結演算法。那麼，我就從演算法領域里最基礎的知識點——排序演算法總結起好了。

我相信以下的代碼里一定會有某些bug或錯誤或語法不規範等問題是我自己無法發現的，所以敬請各位大神能夠指出錯誤，因為只有在不斷改錯的道路上我才能取得長久的進步。

十大經典演算法排序總結對比

一張圖概括：

名詞解釋：

n: 數據規模
k:“桶”的個數
In-place: 占用常數記憶體，不占用額外記憶體
Out-place: 占用額外記憶體
穩定性：排序後2個相等鍵值的順序和排序之前它們的順序相同

冒泡排序（Bubble Sort）

冒泡排序須知：

作為最簡單的排序演算法之一，冒泡排序給我的感覺就像Abandon在單詞書里出現的感覺一樣，每次都在第一頁第一位，所以最熟悉。。。冒泡排序還有一種優化演算法，就是立一個flag，當在一趟序列遍歷中元素沒有發生交換，則證明該序列已經有序。但這種改進對於提升性能來說並沒有什麼太大作用。。。

什麼時候最快（Best Cases）：

當輸入的數據已經是正序時（都已經是正序了，我還要你冒泡排序有何用啊。。。。）

什麼時候最慢（Worst Cases）：

當輸入的數據是反序時（寫一個for迴圈反序輸出數據不就行了，幹嘛要用你冒泡排序呢，我是閑的嗎。。。）

冒泡排序動圖演示：

冒泡排序JavaScript代碼實現：
function bubbleSort(arr) {
    var len = arr.length;
    for (var i = 0; i < len; i++) {
        for (var j = 0; j < len - 1 - i; j++) {
            if (arr[j] &gt; arr[j+1]) {        //相鄰元素兩兩對比
                var temp = arr[j+1];        //元素交換
                arr[j+1] = arr[j];
                arr[j] = temp;
            }
        }
    }
    return arr;
}

選擇排序（Selection Sort）

選擇排序須知：

在時間複雜度上表現最穩定的排序演算法之一，因為無論什麼數據進去都是O(n²)的時間複雜度。。。所以用到它的時候，數據規模越小越好。唯一的好處可能就是不占用額外的記憶體空間了吧。

選擇排序動圖演示：

選擇排序JavaScript代碼實現：
function selectionSort(arr) {
    var len = arr.length;
    var minIndex, temp;
    for (var i = 0; i < len - 1; i++) {
        minIndex = i;
        for (var j = i + 1; j < len; j++) {
            if (arr[j] < arr[minIndex]) {     //尋找最小的數
                minIndex = j;                 //將最小數的索引保存
            }
        }
        temp = arr[i];
        arr[i] = arr[minIndex];
        arr[minIndex] = temp;
    }
    return arr;
}

插入排序（Insertion Sort）

插入排序須知：

插入排序的代碼實現雖然沒有冒泡排序和選擇排序那麼簡單粗暴，但它的原理應該是最容易理解的了，因為只要打過撲克牌的人都應該能夠秒懂。當然，如果你說你打撲克牌摸牌的時候從來不按牌的大小整理牌，那估計這輩子你對插入排序的演算法都不會產生任何興趣了。。。
插入排序和冒泡排序一樣，也有一種優化演算法，叫做拆半插入。對於這種演算法，得了懶癌的我就套用教科書上的一句經典的話吧：感興趣的同學可以在課後自行研究。。。

插入排序動圖演示：

插入排序JavaScript代碼實現：
function insertionSort(arr) {
    var len = arr.length;
    var preIndex, current;
    for (var i = 1; i < len; i++) {
        preIndex = i - 1;
        current = arr[i];
        while(preIndex &gt;= 0 &amp;&amp; arr[preIndex] &gt; current) {
            arr[preIndex+1] = arr[preIndex];
            preIndex--;
        }
        arr[preIndex+1] = current;
    }
    return arr;
}

希爾排序（Shell Sort）

希爾排序須知：

希爾排序是插入排序的一種更高效率的實現。它與插入排序的不同之處在於，它會優先比較距離較遠的元素。希爾排序的核心在於間隔序列的設定。既可以提前設定好間隔序列，也可以動態的定義間隔序列。動態定義間隔序列的演算法是《演算法（第4版》的合著者Robert Sedgewick提出的。在這裡，我就使用了這種方法。

希爾排序JavaScript代碼實現：
function shellSort(arr) {
    var len = arr.length,
        temp,
        gap = 1;
    while(gap < len/3) {          //動態定義間隔序列
        gap =gap*3+1;
    }
    for (gap; gap &gt; 0; gap = Math.floor(gap/3)) {
        for (var i = gap; i < len; i++) {
            temp = arr[i];
            for (var j = i-gap; j &gt;= 0 &amp;&amp; arr[j] &gt; temp; j-=gap) {
                arr[j+gap] = arr[j];
            }
            arr[j+gap] = temp;
        }
    }
    return arr;
}

歸併排序（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沒有對遞歸進行優化。運用遞歸函數不僅沒有運行速度上的優勢，還可能造成程式運行失敗。因此不建議使用遞歸。

和選擇排序一樣，歸併排序的性能不受輸入數據的影響，但表現比選擇排序好的多，因為始終都是O(n log n）的時間複雜度。代價是需要額外的記憶體空間。

歸併排序動圖演示：

歸併排序JavaScript代碼實現：
function mergeSort(arr) {  //採用自上而下的遞歸方法
    var len = arr.length;
    if(len < 2) {
        return arr;
    }
    var middle = Math.floor(len / 2),
        left = arr.slice(0, middle),
        right = arr.slice(middle);
    return merge(mergeSort(left), mergeSort(right));
}

function merge(left, right)
{
    var result = [];

    while (left.length &amp;&amp; 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;
}

快速排序（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)的歸併排序要小很多。所以，對絕大多數順序性較弱的隨機數列而言，快速排序總是優於歸併排序。

更新：
《演算法 第四版》里對於快速排序的優缺點進行了更加明確的解釋：

快速排序的內迴圈比大多數排序演算法都要短小，這意味著它無論是在理論上還是在實際中都要更快。它的主要缺點是非常脆弱，在實現時要非常小心才能避免低劣的性能。

快速排序動圖演示：

快速排序JavaScript代碼實現：
function quickSort(arr, left, right) {
    var 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;
}

function partition(arr, left ,right) {     //分區操作
    var pivot = left,                      //設定基準值（pivot）
        index = pivot + 1;
    for (var i = index; i <= right; i++) {
        if (arr[i] < arr[pivot]) {
            swap(arr, i, index);
            index++;
        }        
    }
    swap(arr, pivot, index - 1);
    return index-1;
}

function swap(arr, i, j) {
    var temp = arr[i];
    arr[i] = arr[j];
    arr[j] = temp;
}

堆排序（Heap Sort）

堆排序須知：

堆排序可以說是一種利用堆的概念來排序的選擇排序。分為兩種方法：

  1. 大頂堆：每個節點的值都大於或等於其子節點的值，在堆排序演算法中用於升序排列
  2. 小頂堆：每個節點的值都小於或等於其子節點的值，在堆排序演算法中用於降序排列
堆排序動圖演示：

堆排序JavaScript代碼實現：
var len;    //因為聲明的多個函數都需要數據長度，所以把len設置成為全局變數

function buildMaxHeap(arr) {   //建立大頂堆
    len = arr.length;
    for (var i = Math.floor(len/2); i &gt;= 0; i--) {
        heapify(arr, i);
    }
}

function heapify(arr, i) {     //堆調整
    var left = 2 * i + 1,
        right = 2 * i + 2,
        largest = i;

    if (left < len &amp;&amp; arr[left] &gt; arr[largest]) {
        largest = left;
    }

    if (right < len &amp;&amp; arr[right] &gt; 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 &gt; 0; i--) {
        swap(arr, 0, i);
        len--;
        heapify(arr, 0);
    }
    return arr;
}

計數排序（Counting Sort）

計數排序須知：

計數排序的核心在於將輸入的數據值轉化為鍵存儲在額外開闢的數組空間中。
作為一種線性時間複雜度的排序，計數排序要求輸入的數據必須是有確定範圍的整數。

計數排序動圖演示：

計數排序JavaScript代碼實現：
function countingSort(arr, maxValue) {
    var bucket = new Array(maxValue+1),
        sortedIndex = 0;
        arrLen = arr.length,
        bucketLen = maxValue + 1;

    for (var i = 0; i < arrLen; i++) {
        if (!bucket[arr[i]]) {
            bucket[arr[i]] = 0;
        }
        bucket[arr[i]]++;
    }

    for (var j = 0; j < bucketLen; j++) {
        while(bucket[j] &gt; 0) {
            arr[sortedIndex++] = j;
            bucket[j]--;
        }
    }

    return arr;
}

桶排序（Bucket Sort）

桶排序須知：

桶排序是計數排序的升級版。它利用了函數的映射關係，高效與否的關鍵就在於這個映射函數的確定。
為了使桶排序更加高效，我們需要做到這兩點：

  1. 在額外空間充足的情況下，儘量增大桶的數量
  2. 使用的映射函數能夠將輸入的N個數據均勻的分配到K個桶中

同時，對於桶中元素的排序，選擇何種比較排序演算法對於性能的影響至關重要。

什麼時候最快（Best Cases）：

當輸入的數據可以均勻的分配到每一個桶中

什麼時候最慢（Worst Cases）：

當輸入的數據被分配到了同一個桶中

桶排序JavaScript代碼實現：
function bucketSort(arr, bucketSize) {
    if (arr.length === 0) {
      return arr;
    }

    var i;
    var minValue = arr[0];
    var maxValue = arr[0];
    for (i = 1; i < arr.length; i++) {
      if (arr[i] < minValue) {
          minValue = arr[i];                //輸入數據的最小值
      } else if (arr[i] &gt; maxValue) {
          maxValue = arr[i];                //輸入數據的最大值
      }
    }

    //桶的初始化
    var DEFAULT_BUCKET_SIZE = 5;            //設置桶的預設數量為5
    bucketSize = bucketSize || DEFAULT_BUCKET_SIZE;
    var bucketCount = Math.floor((maxValue - minValue) / bucketSize) + 1;   
    var buckets = new Array(bucketCount);
    for (i = 0; i < buckets.length; i++) {
        buckets[i] = [];
    }

    //利用映射函數將數據分配到各個桶中
    for (i = 0; i < arr.length; i++) {
        buckets[Math.floor((arr[i] - minValue) / bucketSize)].push(arr[i]);
    }

    arr.length = 0;
    for (i = 0; i < buckets.length; i++) {
        insertionSort(buckets[i]);                      //對每個桶進行排序，這裡使用了插入排序
        for (var j = 0; j < buckets[i].length; j++) {
            arr.push(buckets[i][j]);                      
        }
    }

    return arr;
}

基數排序（Radix Sort）

基數排序須知：

基數排序有兩種方法：

  1. MSD 從高位開始進行排序
  2. LSD 從低位開始進行排序
基數排序 vs 計數排序 vs 桶排序

這三種排序演算法都利用了桶的概念，但對桶的使用方法上有明顯差異：
基數排序：根據鍵值的每位數字來分配桶
計數排序：每個桶只存儲單一鍵值
桶排序：每個桶存儲一定範圍的數值

LSD基數排序動圖演示：

基數排序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多我沒有總結到或者我自己還沒弄明白的演算法，僅僅是總結這十種排序演算法都把我寫哭了。。。
因此，以後如果我掌握了更多的排序姿勢，我一定還會回來的！


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 史林楓：sqlserver資料庫中數據日誌的壓縮及sqlserver占用記憶體管理設置
    使用sqlserver和IIS開發.net B/S程式時，數據量逐漸增多，用戶也逐漸增多，那麼伺服器的穩定性就需要維護了。資料庫如何占用更小記憶體，無用的日誌如何瞬間清空？ ...
  • MYSQL基礎操作之數據約束與關聯查詢
    一、MYSQL約束 1.預設值約束，當欄位沒有插入值的時候，mysql自動給該欄位分配預設值。 預設值的欄位允許為空。 對預設值欄位也可以插入null。 2.非空約束 2.1非空欄位必須賦值(錯誤顯示) 2.2不能插入null（錯誤顯示） 3.唯一約束 下麵語句執行發生錯誤 錯誤提示 4.主鍵約束( ...
  • Query 總結
    JQuery官方網站 http://jquery.com/ 1、JQuery概念 A、Jquery是一個優秀的Javascript框架。它是輕量級的js庫 ，它相容CSS3，還相容各種瀏覽器，jQuery2.0及後續版本將不再支持IE6/7/8瀏覽器。jQuery使用戶能更方便地處理HTML doc ...
  • web前端學習隨筆
    為什麼是隨筆 好好算下來，學習web前端已有半個月了，這半個月來主要學習的是HTML和CSS部分，期間有困惑，也有解決困惑時的快感，所以想把這段時間感受到的一些東西記下來，因為內容比較雜，所以乾脆叫隨筆吧。這裡面不會說前端的相關基礎知識，只是說一些自己對前端的一些認識。 html是用來控制頁面結構的 ...
  • div+css佈局中absolute與relative的區別
    常用的定位可分為以下四種: 1.static: 元素的定位預設值。元素出現在正常的文檔流中。top, left, right, bottom,z-index聲明無效，言意上對於static的元素是沒有任何效果。 2.relative: 相對定位。通過top, left, right, bottom相 ...
  • 自定義滾動條配合滑鼠滾輪demo
    <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"/> <link href="css/reset.css" rel="stylesheet" type="text/css"> <style type="text/c ...
  • H5 觸摸事件
    HTML5中新添加了很多事件，但是由於他們的相容問題不是很理想，應用實戰性不是太強，所以在這裡基本省略，咱們只分享應用廣泛相容不錯的事件，日後隨著相容情況提升以後再陸續添加分享。今天為大家介紹的事件主要是觸摸事件：touchstart、touchmove和touchend。 一開始觸摸事件touch ...
  • angular2 組件之間通訊-使用服務通訊模式 2016.10.27 基於正式版ng2
    工作中用到ng2的組件通訊 奈何官方文檔言簡意賅 沒說明白 自己搞明白後 整理後分享下 rxjs 不懂的看這篇文章 講很詳細 http://www.open-open.com/lib/view/open1462525661610.html 以下是服務代碼 以下是子組件中的代碼 節選 以下是父組件代碼 ...
一周排行
    -Advertisement-
    Play Games
  • WPF 已知問題 監聽 WMI 事件導致觸摸失效
    示例項目結構 在 Visual Studio 中創建一個 WinForms 應用程式後，項目結構如下所示： MyWinFormsApp/ │ ├───Properties/ │ └───Settings.settings │ ├───bin/ │ ├───Debug/ │ └───Release/ ...
  • [STAThread]特性
    [STAThread] 特性用於需要與 COM 組件交互的應用程式，尤其是依賴單線程模型（如 Windows Forms 應用程式）的組件。在 STA 模式下，線程擁有自己的消息迴圈，這對於處理用戶界面和某些 COM 組件是必要的。 [STAThread] static void Main(stri ...
  • UWP WinUI3 傳入 AddHandler 的 RoutedEventHandler 類型與事件所需不匹配將拋出參數異常
    在WinForm中使用全局異常捕獲處理 在WinForm應用程式中，全局異常捕獲是確保程式穩定性的關鍵。通過在Program類的Main方法中設置全局異常處理，可以有效地捕獲並處理未預見的異常，從而避免程式崩潰。 註冊全局異常事件 [STAThread] static void Main() { / ...
  • .NET 多版本 WinForm 開源控制項庫 SunnyUI
    前言 給大家推薦一款開源的 Winform 控制項庫，可以幫助我們開發更加美觀、漂亮的 WinForm 界面。 項目介紹 SunnyUI.NET 是一個基於 .NET Framework 4.0+、.NET 6、.NET 7 和 .NET 8 的 WinForm 開源控制項庫，同時也提供了工具類庫、擴展 ...
  • .net core8 使用Swagger（附當前源碼）
    說明 該文章是屬於OverallAuth2.0系列文章，每周更新一篇該系列文章（從0到1完成系統開發）。 該系統文章，我會儘量說的非常詳細，做到不管新手、老手都能看懂。 說明：OverallAuth2.0 是一個簡單、易懂、功能強大的許可權+可視化流程管理系統。 有興趣的朋友，請關註我吧(*^▽^*) ...
  • WPF 什麼時候 VisualTreeHelper.GetDescendantBounds 將返回無窮大
    一、下載安裝 1.下載git 必須先下載並安裝git，再TortoiseGit下載安裝 git安裝參考教程：https://blog.csdn.net/mukes/article/details/115693833 2.TortoiseGit下載與安裝 TortoiseGit，Git客戶端，32/6 ...
  • C# 開源教程帶你輕鬆掌握數據結構與演算法
    前言 在項目開發過程中，理解數據結構和演算法如同掌握蓋房子的秘訣。演算法不僅能幫助我們編寫高效、優質的代碼，還能解決項目中遇到的各種難題。 給大家推薦一個支持C#的開源免費、新手友好的數據結構與演算法入門教程：Hello演算法。 項目介紹 《Hello Algo》是一本開源免費、新手友好的數據結構與演算法入門 ...
  • 第22篇 生成proto文件bat腳本
    1.生成單個Proto.bat內容 @rem Copyright 2016, Google Inc. @rem All rights reserved. @rem @rem Redistribution and use in source and binary forms, with or with ...
  • 記一次 .NET某上位機視覺程式 卡死分析
    一：背景 1. 講故事 前段時間有位朋友找到我，說他的窗體程式在客戶這邊出現了卡死，讓我幫忙看下怎麼回事？dump也生成了，既然有dump了那就上 windbg 分析吧。 二：WinDbg 分析 1. 為什麼會卡死 窗體程式的卡死，入口門檻很低，後續往下分析就不一定了，不管怎麼說先用 !clrsta ...
  • 醫學DICOM文件與PACS系統進行數據傳輸
    前言 人工智慧時代，人臉識別技術已成為安全驗證、身份識別和用戶交互的關鍵工具。 給大家推薦一款.NET 開源提供了強大的人臉識別 API，工具不僅易於集成，還具備高效處理能力。 本文將介紹一款如何利用這些API，為我們的項目添加智能識別的亮點。 項目介紹 GitHub 上擁有 1.2k 星標的 C# ...
所有分類