前端十大經典演算法

發表於2019-08-15

演算法概述

演算法分類

十種常見排序演算法可以分為兩大類：

非線性時間比較類排序：通過比較來決定元素間的相對次序，由於其時間複雜度不能突破O(nlogn)，因此稱為非線性時間比較類排序。
線性時間非比較類排序：不通過比較來決定元素間的相對次序，它可以突破基於比較排序的時間下界，以線性時間執行，因此稱為線性時間非比較類排序。

演算法複雜度

氣泡排序（Bubble Sort）

氣泡排序是一種簡單的排序演算法。它重複地走訪過要排序的數列，一次比較兩個元素，如果它們的順序錯誤就把它們交換過來。走訪數列的工作是重複地進行直到沒有再需要交換，也就是說該數列已經排序完成。這個演算法的名字由來是因為越小的元素會經由交換慢慢“浮”到數列的頂端。

1.1 演算法描述

比較相鄰的元素。如果第一個比第二個大，就交換它們兩個；
對每一對相鄰元素作同樣的工作，從開始第一對到結尾的最後一對，這樣在最後的元素應該會是最大的數；
針對所有的元素重複以上的步驟，除了最後一個；
重複步驟1~3，直到排序完成。

1.2 動圖演示

1.3 程式碼實現

function bubbleSort(arr) {

    var len = arr.length;

    for (var i = 0; i < len - 1; i++) {

        for (var j = 0; j < len - 1 - i; j++) {

            if (arr[j] > arr[j+1]) {       // 相鄰元素兩兩對比

                var temp = arr[j+1];       // 元素交換

                arr[j+1] = arr[j];

                arr[j] = temp;

            }

        }

    }

    return arr;

}

選擇排序（Selection Sort）

選擇排序(Selection-sort)是一種簡單直觀的排序演算法。它的工作原理：首先在未排序序列中找到最小（大）元素，存放到排序序列的起始位置，然後，再從剩餘未排序元素中繼續尋找最小（大）元素，然後放到已排序序列的末尾。以此類推，直到所有元素均排序完畢。

2.1 演算法描述

n個記錄的直接選擇排序可經過n-1趟直接選擇排序得到有序結果。具體演算法描述如下：

初始狀態：無序區為R[1..n]，有序區為空；
第i趟排序(i=1,2,3…n-1)開始時，當前有序區和無序區分別為R[1..i-1]和R(i..n）。該趟排序從當前無序區中-選出關鍵字最小的記錄 R[k]，將它與無序區的第1個記錄R交換，使R[1..i]和R[i+1..n)分別變為記錄個數增加1個的新有序區和記錄個數減少1個的新無序區；
n-1趟結束，陣列有序化了。

2.2 動圖演示

2.3 程式碼實現

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;

}

2.4 演算法分析

表現最穩定的排序演算法之一，因為無論什麼資料進去都是O(n2)的時間複雜度，所以用到它的時候，資料規模越小越好。唯一的好處可能就是不佔用額外的記憶體空間了吧。理論上講，選擇排序可能也是平時排序一般人想到的最多的排序方法了吧。

插入排序（Insertion Sort）

插入排序（Insertion-Sort）的演算法描述是一種簡單直觀的排序演算法。它的工作原理是通過構建有序序列，對於未排序資料，在已排序序列中從後向前掃描，找到相應位置並插入。

3.1 演算法描述

一般來說，插入排序都採用in-place在陣列上實現。具體演算法描述如下：

從第一個元素開始，該元素可以認為已經被排序；
取出下一個元素，在已經排序的元素序列中從後向前掃描；
如果該元素（已排序）大於新元素，將該元素移到下一位置；
重複步驟3，直到找到已排序的元素小於或者等於新元素的位置；
將新元素插入到該位置後；
重複步驟2~5。

3.2 動圖演示

3.2 程式碼實現

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 >= 0 && arr[preIndex] > current) {

            arr[preIndex + 1] = arr[preIndex];

            preIndex--;

        }

        arr[preIndex + 1] = current;

    }

    return arr;

}

3.4 演算法分析

插入排序在實現上，通常採用in-place排序（即只需用到O(1)的額外空間的排序），因而在從後向前掃描過程中，需要反覆把已排序元素逐步向後挪位，為最新元素提供插入空間。

希爾排序（Shell Sort）

1959年Shell發明，第一個突破O(n2)的排序演算法，是簡單插入排序的改進版。它與插入排序的不同之處在於，它會優先比較距離較遠的元素。希爾排序又叫縮小增量排序。

4.1 演算法描述

先將整個待排序的記錄序列分割成為若干子序列分別進行直接插入排序，具體演算法描述：

選擇一個增量序列t1，t2，…，tk，其中ti>tj，tk=1；
按增量序列個數k，對序列進行k 趟排序；
每趟排序，根據對應的增量ti，將待排序列分割成若干長度為m 的子序列，分別對各子表進行直接插入排序。僅增量因子為1 時，整個序列作為一個表來處理，表長度即為整個序列的長度。

4.2 動圖演示

4.3 程式碼實現

function shellSort(arr) {

    var len = arr.length,

        temp,

        gap = 1;

    while (gap < len / 3) {         // 動態定義間隔序列

        gap = gap * 3 + 1;

    }

    for (gap; gap > 0; gap = Math.floor(gap / 3)) {

        for (var i = gap; i < len; i++) {

            temp = arr[i];

            for (var j = i-gap; j > 0 && arr[j]> temp; j-=gap) {

                arr[j + gap] = arr[j];

            }

            arr[j + gap] = temp;

        }

    }

    return arr;

}

4.4 演算法分析

希爾排序的核心在於間隔序列的設定。既可以提前設定好間隔序列，也可以動態的定義間隔序列。動態定義間隔序列的演算法是《演算法（第4版）》的合著者Robert Sedgewick提出的。　

歸併排序（Merge Sort）

歸併排序是建立在歸併操作上的一種有效的排序演算法。該演算法是採用分治法（Divide and Conquer）的一個非常典型的應用。將已有序的子序列合併，得到完全有序的序列；即先使每個子序列有序，再使子序列段間有序。若將兩個有序表合併成一個有序表，稱為2-路歸併。

5.1 演算法描述

把長度為n的輸入序列分成兩個長度為n/2的子序列；
對這兩個子序列分別採用歸併排序；
將兩個排序好的子序列合併成一個最終的排序序列。

5.2 動圖演示

5.3 程式碼實現

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>0 && right.length>0) {
        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;
}

5.4 演算法分析

歸併排序是一種穩定的排序方法。和選擇排序一樣，歸併排序的效能不受輸入資料的影響，但表現比選擇排序好的多，因為始終都是O(nlogn）的時間複雜度。代價是需要額外的記憶體空間。

快速排序（Quick Sort）

快速排序的基本思想：通過一趟排序將待排記錄分隔成獨立的兩部分，其中一部分記錄的關鍵字均比另一部分的關鍵字小，則可分別對這兩部分記錄繼續進行排序，以達到整個序列有序。

6.1 演算法描述

快速排序使用分治法來把一個串（list）分為兩個子串（sub-lists）。具體演算法描述如下：

從數列中挑出一個元素，稱為 “基準”（pivot）；
重新排序數列，所有元素比基準值小的擺放在基準前面，所有元素比基準值大的擺在基準的後面（相同的數可以到任一邊）。在這個分割槽退出之後，該基準就處於數列的中間位置。這個稱為分割槽（partition）操作；
遞迴地（recursive）把小於基準值元素的子數列和大於基準值元素的子數列排序。

6.2 動圖演示

6.3 程式碼實現

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）

堆排序（Heapsort）是指利用堆這種資料結構所設計的一種排序演算法。堆積是一個近似完全二叉樹的結構，並同時滿足堆積的性質：即子結點的鍵值或索引總是小於（或者大於）它的父節點。

7.1 演算法描述

將初始待排序關鍵字序列(R1,R2….Rn)構建成大頂堆，此堆為初始的無序區；
將堆頂元素R[1]與最後一個元素R[n]交換，此時得到新的無序區(R1,R2,……Rn-1)和新的有序區(Rn),且滿足R[1,2…n-1]<=R[n]；
由於交換後新的堆頂R[1]可能違反堆的性質，因此需要對當前無序區(R1,R2,……Rn-1)調整為新堆，然後再次將R[1]與無序區最後一個元素交換，得到新的無序區(R1,R2….Rn-2)和新的有序區(Rn-1,Rn)。不斷重複此過程直到有序區的元素個數為n-1，則整個排序過程完成。

7.2 動圖演示

7.3 程式碼實現

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）

計數排序不是基於比較的排序演算法，其核心在於將輸入的資料值轉化為鍵儲存在額外開闢的陣列空間中。作為一種線性時間複雜度的排序，計數排序要求輸入的資料必須是有確定範圍的整數。

8.1 演算法描述

找出待排序的陣列中最大和最小的元素；
統計陣列中每個值為i的元素出現的次數，存入陣列C的第i項；
對所有的計數累加（從C中的第一個元素開始，每一項和前一項相加）；
反向填充目標陣列：將每個元素i放在新陣列的第C(i)項，每放一個元素就將C(i)減去1。

8.2 動圖演示

8.3 程式碼實現

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] > 0) {
            arr[sortedIndex++] = j;
            bucket[j]--;
        }
    }
 
    return arr;
}

8.4 演算法分析

計數排序是一個穩定的排序演算法。當輸入的元素是 n 個 0到 k 之間的整數時，時間複雜度是O(n+k)，空間複雜度也是O(n+k)，其排序速度快於任何比較排序演算法。當k不是很大並且序列比較集中時，計數排序是一個很有效的排序演算法。

桶排序（Bucket Sort）

桶排序是計數排序的升級版。它利用了函式的對映關係，高效與否的關鍵就在於這個對映函式的確定。桶排序 (Bucket sort)的工作的原理：假設輸入資料服從均勻分佈，將資料分到有限數量的桶裡，每個桶再分別排序（有可能再使用別的排序演算法或是以遞迴方式繼續使用桶排序進行排）。

9.1 演算法描述

設定一個定量的陣列當作空桶；
遍歷輸入資料，並且把資料一個一個放到對應的桶裡去；
對每個不是空的桶進行排序；
從不是空的桶裡把排好序的資料拼接起來。

9.2 圖片演示

9.3 程式碼實現

unction 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] > 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;
}

9.4 演算法分析

桶排序最好情況下使用線性時間O(n)，桶排序的時間複雜度，取決與對各個桶之間資料進行排序的時間複雜度，因為其它部分的時間複雜度都為O(n)。很顯然，桶劃分的越小，各個桶之間的資料越少，排序所用的時間也會越少。但相應的空間消耗就會增大。

基數排序（Radix Sort）

基數排序是按照低位先排序，然後收集；再按照高位排序，然後再收集；依次類推，直到最高位。有時候有些屬性是有優先順序順序的，先按低優先順序排序，再按高優先順序排序。最後的次序就是高優先順序高的在前，高優先順序相同的低優先順序高的在前。

10.1 演算法描述

取得陣列中的最大數，並取得位數；
arr為原始陣列，從最低位開始取每個位組成radix陣列；
對radix進行計數排序（利用計數排序適用於小範圍數的特點）；

10.2 動圖演示

10.3 程式碼實現

/ 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;
}

10.4 演算法分析

基數排序基於分別排序，分別收集，所以是穩定的。但基數排序的效能比桶排序要略差，每一次關鍵字的桶分配都需要O(n)的時間複雜度，而且分配之後得到新的關鍵字序列又需要O(n)的時間複雜度。假如待排資料可以分為d個關鍵字，則基數排序的時間複雜度將是O(d*2n) ，當然d要遠遠小於n，因此基本上還是線性級別的。

基數排序的空間複雜度為O(n+k)，其中k為桶的數量。一般來說n>>k，因此額外空間需要大概n個左右。

lj十大經典演算法
2020-03-23
演算法
資料探勘十大經典演算法
2020-11-03
演算法
十大經典排序演算法（動圖演示）
2020-10-10
排序演算法
十大經典排序演算法動畫與解析
2019-04-15
排序演算法動畫
十大經典排序演算法之氣泡排序
2019-05-31
排序演算法
Java十大經典排序演算法最強總結
2019-01-05
Java排序演算法
十大經典排序演算法動畫，看我就夠了！
2018-12-01
排序演算法動畫
轉載：十大經典排序的演算法部落格
2018-06-07
排序演算法
十大經典排序演算法（動圖演示，收藏好文）
2018-09-26
排序演算法
管理十大經典理論
2020-04-06
【計理02組06號】十大經典排序演算法【上篇】
2022-01-13
排序演算法
JavaScript 資料結構與演算法之美 - 十大經典排序演算法
2019-07-30
JavaScript資料結構演算法排序
十大經典排序演算法動畫與解析，看我就夠了
2019-02-24
排序演算法動畫
前端經典面試題
2024-08-21
前端面試題
Lisp經典演算法
2018-03-26
Lisp演算法
十大經典排序演算法動畫解析和 Java 程式碼實現
2019-01-09
排序演算法動畫Java
前端時光機（經典技能）
2019-04-22
前端
Python經典演算法片段
2018-04-12
Python演算法
十大經典排序演算法最強總結（含JAVA程式碼實現）
2020-08-13
排序演算法Java
前端面試必備-40道LeetCode經典面試演算法題
2019-12-12
前端面試LeetCode演算法
經典十大排序演算法（含升序降序，基數排序含負數排序）
2021-09-09
排序演算法
記一道經典前端題
2019-02-20
前端
前端經典面試題（有答案）
2023-03-06
前端面試題
經典排序演算法回顧：
2024-03-14
排序演算法
全球十大農業大資料經典案例
2018-11-16
大資料
資料探勘領域十大經典演算法之—樸素貝葉斯演算法（附程式碼）
2018-09-18
演算法
人臉識別三大經典演算法（附經典論文列表）
2018-10-30
演算法
曾經的全球十大智慧城市典範
2022-03-31
十大Python經典面試題，入門必知！
2021-03-05
Python面試題
JavaScript實現經典排序演算法
2019-04-08
JavaScript排序演算法
經典加密演算法入門-RSA
2019-03-04
加密演算法
幾種經典的排序演算法
2018-06-09
排序演算法
經典排序演算法PHP實現
2018-08-21
排序演算法PHP
排序演算法（七大經典排序演算法）
2018-03-05
排序演算法
十大經典排序演算法動畫與解析，看我就夠了！（配程式碼完全版）
2018-12-07
排序演算法動畫
18年最新經典web前端面試題
2018-09-26
Web前端面試題
經典排序演算法 — C# 版（上）
2019-01-18
排序演算法C#
10大經典排序演算法動畫
2018-12-07
排序演算法動畫