程序員必備的幾種常見排序算法和搜索算法總結

時間  2020-04-22
標籤 程序員 必備 幾種 常見 排序算法 搜索 算法 總結 欄目 快樂工作 简体版
原文   原文鏈接

前言

最近爲了鞏固一下本身的算法基礎,又把算法書裏的基本算法刷了一遍, 特意總結一下前端工程師須要瞭解的排序算法和搜索算法知識,雖然還有不少高深算法須要瞭解, 可是基礎仍是要好好鞏固一下的.本文將以圖文的形式爲你們介紹以下算法知識,但願在讀完以後你們能有所收穫:javascript

  • 冒泡排序及其優化
  • 選擇排序
  • 插入排序
  • 歸併排序
  • 快速排序
  • 順序搜索
  • 二分搜索

正文

我想對於每一個前端工程師來講, 最頭疼的就是算法問題, 可是算法每每也是衡量一我的編程能力的一個很重要的指標.目前不少主流框架和庫都應用了大量的算法和設計模式,爲了讓本身的段位更高,咱們只能不斷的"打怪"(也就是刷算法)升級,才能成爲"最強王者".css

其實前端發展這麼多年, 愈來愈偏向於精細化開發, 不少超級應用(好比淘寶,微信)都在追求極致的用戶體驗, 時間就是金錢,這要求工程師們不能像之前那樣,開發的程序只要能用就行, 咱們每每還要進行更加細緻的測試(包括單元測試, 性能測試等),就拿排序來講, 對於大規模數據量的排序, 咱們採用冒泡排序確定是要被瘋狂吐槽的,由於冒泡排序的性能極差(複雜度爲O(n^2).在真實項目中咱們每每不會採用冒泡排序,更多的會用快速排序或者希爾排序.關於排序算法性能問題我在前端

有詳細介紹. 接下來就讓咱們來一塊兒學習如何實現文章開頭的幾個經常使用排序和搜索算法吧.vue

冒泡排序及其優化

咱們在學排序算法時, 最容易掌握的就是冒泡排序, 由於其實現起來很是簡單,可是從運行性能的角度來看, 它倒是性能最差的一個.java

冒泡排序的實現思路是比較任何兩個相鄰的項, 若是前者比後者大, 則將它們互換位置.node

爲了更方便的展現冒泡排序的過程和性能測試,筆者先寫幾個工具方法,分別爲動態生成指定個數的隨機數組, 生成元素位置序列的方法,代碼以下:webpack

// 生成指定個數的隨機數組
const generateArr = (num = 10) => {
  let arr = []
  for(let i = 0; i< num; i++) {
    let item = Math.floor(Math.random() * (num + 1))
    arr.push(item)
  }
  return arr
}

// 生成指定個數的元素x軸座標
const generateArrPosX = (n= 10, w = 6, m = 6) => {
  let pos = []
  for(let i = 0; i< n; i++) {
    let item = (w + m) * i
    pos.push(item)
  }
  return pos
}
複製代碼

有了以上兩個方法,咱們就能夠生成任意個數的數組以及數組項座標了,這兩個方法接下來咱們會用到.css3

咱們來直接寫個乞丐版的冒泡排序算法:web

bubbleSort(arr = []) {
    let len = arr.length
    for(let i = 0; i< len; i++) {
      for(let j = 0; j < len - 1; j++) {
        if(arr[j] > arr[j+1]) {
          // 置換
          [arr[j], arr[j+1]] = [arr[j+1], arr[j]]
        }
      }
    }
    return arr
  }
複製代碼

接下來咱們來測試一下, 咱們用generateArr方法生成60個數組項的數組, 並動態生成元素座標:算法

// 生成座標
const pos = generateArrPosX(60)
// 生成60個項的數組
const arr = generateArr(60)
複製代碼

執行代碼後會生成下圖隨機節點結構:

有關css部分這裏就不介紹了,你們能夠本身實現.接下來咱們就能夠測試咱們上面寫的冒泡排序了,當咱們點擊排序時,結果以下:
能夠看到數組已按照順序排好了,咱們可使用console.time來測量代碼執行所用的時間,上面"乞丐版"冒泡排序耗時爲0.2890625ms.

咱們深刻分析代碼就能夠知道兩層for循環排序致使了不少多餘的排序,若是咱們從內循環減去外循環中已跑過的輪數,就能夠避免內循環中沒必要要的比較,因此咱們代碼優化以下:

// 冒泡排序優化版
bubbleSort(arr = []) {
  let len = arr.length
  // 優化
  for(let i = 0; i< len; i++) {
    for(let j = 0; j < len - 1 - i; j++) {
      if(arr[j] > arr[j+1]) {
        // 置換
        [arr[j], arr[j+1]] = [arr[j+1], arr[j]]
      }
    }
  }
  return arr
}
複製代碼

通過優化的冒泡排序耗時:0.279052734375ms, 比以前稍微好了一丟丟, 但仍然不是推薦的排序算法.

選擇排序

選擇排序的思路是找到數據結構中的最小值並將其放置在第一位,接着找到第二個最小值並將其放到第二位,依次類推.

咱們仍是按照以前的模式,生成一個60項的數組, 以下:

選擇排序代碼以下: 

selectionSort(arr) {
    let len = arr.length,
        indexMin
    for(let i = 0; i< len -1; i++) {
      indexMin = i
      for(let j = i; j < len; j++){
        if(arr[indexMin] > arr[j]) {
          indexMin = j
        }
      }
      if(i !== indexMin) {
        [arr[i], arr[indexMin]] = [arr[indexMin], arr[i]]
      }
    }
    return arr
}
複製代碼

點擊排序時, 結果以下:

說明代碼運行正常, 能夠實現排序, 控制檯耗時爲: 0.13720703125ms, 明顯比 冒泡排序性能要好.

插入排序

插入排序 的思路是每次排一個數組項,假定第一項已經排序,接着它和第二項比較, 決定第二項的位置, 而後接着用一樣的方式決定第三項的位置, 依次類推, 最終將整個數組從小到大依次排序.

代碼以下:

insertionSort(arr) {
    let len = arr.length,
        j,
        temp;
    for(let i = 1; i< len; i++) {
      j = i
      temp = arr[i]
      while(j > 0 && arr[j-1] > temp) {
        arr[j] = arr[j-1]
        j--
      }
      arr[j] = temp;
    }
 }
複製代碼

執行結果以下:

控制檯打印耗時爲:0.09912109375ms.

歸併排序

歸併排序算法性能比以上三者都好, 能夠在實際項目中投入使用,但實現方式相對複雜.

歸併排序是一種分治算法,其思想是將原始數組切分紅較小的數組，直到每一個小數組只有一個元素，接着將小數組歸併成較大的數組，最後變成一個排序完成的大數組。

其實現過程以下圖所示：

爲了實現該方法咱們須要準備一個合併函數和一個遞歸函數，具體實現以下代碼： 

// 歸併排序
mergeSortRec(arr) {
 let len = arr.length
 if(len === 1) {
   return arr
 }
 let mid = Math.floor(len / 2),
     left = arr.slice(0, mid),
     right = arr.slice(mid, len)
 return merge(mergeSortRec(left), mergeSortRec(right))
}
// 合併方法
merge(left, right) {
    let result = [],
        l = 0,
        r = 0;
    while(l < left.length && r < right.length) {
      if(left[l] < right[r]) {
        result.push(left[l++])
      }else {
        result.push(right[r++])
      }
    }
    while(l < left.length) {
      result.push(left[l++])
    }
    while(r < right.length) {
      result.push(right[r++])
    }
    return result
}
複製代碼

以上代碼中的遞歸做用是將一個大數組劃分爲多個小數組直到只有一項，而後再逐層進行合併排序。若是有不理解的能夠和筆者交流或者結合筆者畫的草圖進行理解。

快速排序

快速排序是目前比較經常使用的排序算法，它的複雜度爲O(nlog^n),而且它的性能比其餘複雜度爲O(nlog^n)的好，也是採用分治的思想，將原始數組進行劃分，因爲快速排序實現起來比較複雜，這裏講一下思路：

  1. 從數組中選擇中間項做爲主元
  2. 建立兩個指針，左邊一個指向數組第一項，右邊一個指向數組最後一項，移動左指針直到咱們找到一個比主元大的元素，移動右指針直到找到一個比主元小的元素，而後交換它們的位置，重複此過程直到左指針超過了右指針
  3. 算法對劃分後的小數組重複1，2步驟，直到數組徹底排序完成。

代碼以下：

// 快速排序
quickSort(arr, left, right) {
    let index
    if(arr.length > 1) {
      index = partition(arr, left, right)
      if(left < index - 1) {
        quickSort(arr, left, index -1)
      }
      if(index < right) {
        quickSort(arr, index, right)
      }
    } 
  }
// 劃分流程
partition(arr, left, right) {
    let part = arr[Math,floor((right + left) / 2)],
        i = left,
        j = right
    while(i <= j) {
      while(arr[i] < part) {
        i++
      }
      while(arr[j] > part) {
        j--
      }
      if(i <= j) {
        // 置換
        [arr[i], arr[j]] = [arr[j], arr[i]]
        i++
        j--
      }
    }
    return i
}
複製代碼

順序搜索

搜索算法也是咱們常常用到的算法之一，好比咱們須要查找某個用戶或者某條數據，不論是在前端仍是在後端，都會使用搜索算法。咱們先來介紹最簡單也是效率最低的順序搜索，其主要思想是將每個數據結構中的元素和咱們要查詢的元素作比較，而後返回指定元素的索引。

之因此說順序搜索效率低是由於每次都要從數組的頭部開始查詢，直到查找到要搜索的值，總體查詢不夠靈活和動態性。順序搜索代碼實現以下： 

sequentialSearch(arr, item) {
    for(let i = 0; i< arr.length; i++) {
      if(item === arr[i]) {
        return i
      }
    }
    return -1
}
複製代碼

接下來咱們看下面一種比較經常使用和靈活的搜索算法——二分搜索。

二分搜索

二分搜索的思想有點「投機學」的意思，可是它是一種有理論依據的「投機學」。首先它要求被搜索的數據結構已排序，其次進行以下步驟：

  1. 找出數組的中間值
  2. 若是中間值是待搜索的值，那麼直接返回中間值的索引
  3. 若是待搜索的值比中間值小，則返回步驟1，將區間範圍縮小，在中間值左邊的子數組中繼續搜索
  4. 若是待搜索的值比選中的值大，則返回步驟1，將區間範圍縮小，在中間值右邊的子數組中繼續搜索
  5. 若是沒有搜到，則返回-1

爲了方便理解筆者畫了以下草圖：

由上圖你們能夠很容易的理解二分搜索的實現過程，接下來咱們看下代碼實現： 

binarySearch(arr, item) {
    // 調用排序算法先對數據進行排序
    this.quickSort(arr)

    let min = 0,
        max = arr.length - 1,
        mid,
        el
    while(min <= max) {
      mid = Math.floor((min + max) / 2)
      el = arr[mid]
      if(el < item) {
        min = mid + 1
      }else if(el > item) {
        max = mid -1
      }else {
        return mid
      }
    }
    return -1
  }
複製代碼

其實還有不少搜索算法，筆者在js基本搜索算法實現與170萬條數據下的性能測試有具體介紹。

最後

若是想學習更多H5遊戲, webpack，node，gulp，css3，javascript，nodeJS，canvas數據可視化等前端知識和實戰，歡迎在公號《趣談前端》加入咱們的技術羣一塊兒學習討論，共同探索前端的邊界。

更多推薦

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程