如何用 JS 實現二叉堆

時間  2021-05-03 標籤 前端 web json api 數組 微信 編輯器 函數 性能 字體
👆   這是第  90  篇 不摻水的原創 ，想要了解更多 ，請戳上方藍色字體： 政採雲前端團隊  關注咱們吧～

本文首發於政採雲前端團隊博客：如何用 JS 實現二叉堆前端

https://www.zoo.team/article/binary-heap-with-js

前言

二叉樹(Binary Tree)是一種樹形結構，它的特色是每一個節點最多隻有兩個分支節點，一棵二叉樹一般由根節點、分支節點、葉子節點組成，以下圖所示。每一個分支節點也經常被稱做爲一棵子樹，而二叉堆是一種特殊的樹，它屬於徹底二叉樹。web

二叉樹與二叉堆的關係

在平常工做中會遇到不少數組的操做，好比排序等。那麼理解二叉堆的實現對之後的開發效率會有所提高，下面就簡單介紹一下什麼是二叉樹，什麼是二叉堆。json

二叉樹特徵

  • 根節點：二叉樹最頂層的節點
  • 分支節點：除了根節點之外且擁有葉子節點
  • 葉子節點：除了自身，沒有其餘子節點

在二叉樹中，咱們經常還會用父節點和子節點來描述，好比上圖中左側節點 2 爲 6 和 3 的父節點，反之 6 和 3 是 2 子節點。api

二叉樹分類

二叉樹分爲滿二叉樹(full binary tree)和徹底二叉樹(complete binary tree)。數組

  • 滿二叉樹：一棵深度爲 k 且有 2 ^ k - 1個節點的二叉樹稱爲滿二叉樹
  • 徹底二叉樹：徹底二叉樹是指最後一層左邊是滿的，右邊可能滿也可能不滿，而後其他層都是滿的二叉樹稱爲徹底二叉樹(滿二叉樹也是一種徹底二叉樹)

二叉樹結構

從圖中咱們能夠看出二叉樹是從上到下依次排列下來，可想而知能夠用一個數組來表示二叉樹的結構，從下標 index( 0 - 8 ) 從上到下依次排列。微信

  • 二叉樹左側節點表達式 index * 2 + 1。例如：以根節點爲例求左側節點，根節點的下標爲0，則左側節點的序數是1 ，對應數組中的值爲1
  • 二叉樹右側節點表達式 index * 2 + 2。例如：以根節點爲例求右側節點，根節點的下標爲0，則右側節點的序數是2 ，對應數組中的值爲 8
  • 二叉樹葉子節點表達式 序數 >= floor( N / 2 )都是葉子節點（N是數組的長度）。例如：floor( 9 / 2 ) = 4 ，則從下標 4 開始的值都爲葉子節點

二叉堆特徵

二叉堆是一個徹底二叉樹，父節點與子節點要保持固定的序關係，而且每一個節點的左子樹和右子樹都是一個二叉堆。編輯器

從上圖能夠看出函數

  • 圖一：每一個父節點大於子節點或等於子節點，知足二叉堆的性質
  • 圖二：其中有一個父節點小於子節點則不知足二叉堆性質

二叉堆分類

二叉堆根據排序不一樣，能夠分爲最大堆和最小堆性能

  • 最大堆：根節點的鍵值是全部堆節點鍵值中最大者，且每一個父節點的值都比子節點的值大
  • 最小堆：根節點的鍵值是全部堆節點鍵值中最小者，且每一個父節點的值都比子節點的值小

如何實現二叉堆

經過上面的講述想必你們對二叉堆有了必定的理解，那麼接下來就是如何實現。以最大堆爲例，首先要初始化數組而後經過交換位置造成最大堆。字體

初始化二叉堆

從上面描述，咱們能夠知道二叉堆其實就是一個數組，那麼初始化就很是簡單了。

class Heap{
  constructor(arr){
    this.data = [...arr];
    this.size = this.data.length;
  }
}

父子節點交換位置

圖一中 2 做爲父節點小於子節點，很顯然不符合最大堆性質。maxHeapify 函數能夠把每一個不符合最大堆性質的節點調換位置，從而知足最大堆性質的數組。

調整步驟：

1.調整分支節點 2 的位置（不知足最大堆性質）

2.獲取父節點 2 的左右節點 ( 12 , 5 ) ，從 ( 2 , 15 , 5 ) 中進行比較

3.找出最大的節點與父節點進行交換，若是該節點自己爲最大節點則中止操做

4.重複 step2 的操做，從 2 , 4 , 7 中找出最大值與 2 作交換（遞歸）

maxHeapify(i) {
  let max = i;

  if(i >= this.size){
    return;
  }
  // 當前序號的左節點
  const l = i * 2 + 1;
  // 當前須要的右節點
  const r = i * 2 + 2;

  // 求當前節點與其左右節點三者中的最大值
  if(l < this.size && this.data[l] > this.data[max]){
    max = l;
  }
  if(r < this.size && this.data[r] > this.data[max]){
    max = r;
  }

  // 最終max節點是其自己,則已經知足最大堆性質，中止操做
  if(max === i) {
    return;
  }

  // 父節點與最大值節點作交換
  const t = this.data[i];
  this.data[i] = this.data[max];
  this.data[max] = t;

  // 遞歸向下繼續執行
  return this.maxHeapify(max);
}

造成最大堆

咱們能夠看到，初始化是由一個數組組成，如下圖爲例很顯然並不會知足最大堆的性質，上述 maxHeapify 函數只是對某一個節點做出對調，沒法對整個數組進行重構，因此咱們要依次對數組進行遞歸重構。

1.找到全部分支節點 Math.floor( N / 2 )（不包括葉子節點）

2.將找到的子節點進行 maxHeapify 操做

rebuildHeap(){
  // 葉子節點
  const L = Math.floor(this.size / 2);
  for(let i = L - 1; i >= 0; i--){
    this.maxHeapify(i);
  }
}

生成一個升序的數組


1.swap 函數交換首尾位置

2.將最後一個從堆中拿出至關於 size - 1

3.執行 maxHeapify 函數進行根節點比較找出最大值進行交換

4.最終 data 會變成一個升序的數組

sort() {
  for(let i = this.size - 1; i > 0; i--){
    swap(this.data, 0, i);
    this.size--;
    this.maxHeapify(0);
  }
}

插入方法

Insert 函數做爲插入節點函數，首先

1.往 data 結尾插入節點

2.由於節點追加，size + 1

3.由於一個父節點擁有 2 個子節點，咱們能夠根據這個性質經過 isHeap 函數獲取第一個葉子節點，能夠經過第一個葉子節點獲取新插入的節點，而後進行 3 個值的對比，找出最大值，判斷插入的節點。若是跟父節點相同則不進行重構（相等知足二叉堆性質），不然進行 rebuildHeap 重構堆

isHeap() {
  const L = Math.floor(this.size / 2);
  for (let i = L - 1; i >= 0; i--) {
    const l = this.data[left(i)] || Number.MIN_SAFE_INTEGER;
    const r = this.data[right(i)] || Number.MIN_SAFE_INTEGER;

    const max = Math.max(this.data[i], l, r);

    if (max !== this.data[i]) {
      return false;
    }
    return true;
  }
}
insert(key) {
  this.data[this.size] = key;
  this.size++
  if (this.isHeap()) {
    return;
  }
  this.rebuildHeap();
}

刪除方法

delete 函數做爲刪除節點，首先

1.刪除傳入index的節點

2.由於節點刪除，size - 1

3.重複上面插入節點的操做

delete(index) {
  if (index >= this.size) {
    return;
  }
  this.data.splice(index, 1);
  this.size--;
  if (this.isHeap()) {
    return;
  }
  this.rebuildHeap();
}

完整代碼

/**
 * 最大堆
 */

function left(i) {
  return (i * 2) + 1;
}

function right(i) {
  return (i * 2) + 2;
}

function swap(A, i, j) {
  const t = A[i];
  A[i] = A[j];
  A[j] = t;
}

class Heap {
  constructor(arr) {
    this.data = [...arr];
    this.size = this.data.length;
    this.rebuildHeap = this.rebuildHeap.bind(this);
    this.isHeap = this.isHeap.bind(this);
    this.sort = this.sort.bind(this);
    this.insert = this.insert.bind(this);
    this.delete = this.delete.bind(this);
    this.maxHeapify = this.maxHeapify.bind(this);
  }

  /**
   * 重構堆，造成最大堆
   */
  rebuildHeap() {
    const L = Math.floor(this.size / 2);
    for (let i = L - 1; i >= 0; i--) {
      this.maxHeapify(i);
    }
  }

  isHeap() {
    const L = Math.floor(this.size / 2);
    for (let i = L - 1; i >= 0; i--) {
      const l = this.data[left(i)] || Number.MIN_SAFE_INTEGER;
      const r = this.data[right(i)] || Number.MIN_SAFE_INTEGER;

      const max = Math.max(this.data[i], l, r);

      if (max !== this.data[i]) {
        return false;
      }
      return true;
    }
  }

  sort() {
    for (let i = this.size - 1; i > 0; i--) {
      swap(this.data, 0, i);
      this.size--;
      this.maxHeapify(0);
    }
  }

  insert(key) {
    this.data[this.size++] = key;
    if (this.isHeap()) {
      return;
    }
    this.rebuildHeap();
  }

  delete(index) {
    if (index >= this.size) {
      return;
    }
    this.data.splice(index, 1);
    this.size--;
    if (this.isHeap()) {
      return;
    }
    this.rebuildHeap();
  }

  /**
   * 交換父子節點位置，符合最大堆特徵
   * @param {*} i
   */
  maxHeapify(i) {
    let max = i;

    if (i >= this.size) {
      return;
    }

    // 求左右節點中較大的序號
    const l = left(i);
    const r = right(i);
    if (l < this.size && this.data[l] > this.data[max]) {
      max = l;
    }

    if (r < this.size && this.data[r] > this.data[max]) {
      max = r;
    }

    // 若是當前節點最大，已是最大堆
    if (max === i) {
      return;
    }

    swap(this.data, i, max);

    // 遞歸向下繼續執行
    return this.maxHeapify(max);
  }
}

module.exports = Heap;

示例

相信經過上面的講述你們對最大堆的實現已經有了必定的理解，咱們能夠利用這個來進行排序。

const arr = [15, 12, 8, 2, 5, 2, 3, 4, 7];
const fun = new Heap(arr);
fun.rebuildHeap(); // 造成最大堆的結構
fun.sort();// 經過排序，生成一個升序的數組
console.log(fun.data) // [2, 2, 3, 4, 5, 7, 8, 12, 15]

總結

文章中主要講述了二叉樹、二叉堆的概念，而後經過代碼實現二叉堆。咱們能夠經過二叉堆來作排序和優先級隊列等。

看完兩件事

若是你以爲這篇內容對你挺有啓發，我想邀請你幫我兩件小事

1.點個「在看」，讓更多人也能看到這篇內容（點了「在看」，bug -1 😊）

2.關注公衆號「 政採雲前端團隊」，持續爲你推送精選好文

招賢納士

政採雲前端團隊（ZooTeam），一個年輕富有激情和創造力的前端團隊，隸屬於政採雲產品研發部，Base 在風景如畫的杭州。團隊現有 40 餘個前端小夥伴，平均年齡 27 歲，近 3 成是全棧工程師，妥妥的青年風暴團。成員構成既有來自於阿里、網易的「老」兵，也有浙大、中科大、杭電等校的應屆新人。團隊在平常的業務對接以外，還在物料體系、工程平臺、搭建平臺、性能體驗、雲端應用、數據分析及可視化等方向進行技術探索和實戰，推進並落地了一系列的內部技術產品，持續探索前端技術體系的新邊界。

若是你想改變一直被事折騰，但願開始能折騰事；若是你想改變一直被告誡須要多些想法，卻無從破局；若是你想改變你有能力去作成那個結果，卻不須要你；若是你想改變你想作成的事須要一個團隊去支撐，但沒你帶人的位置；若是你想改變既定的節奏，將會是「5 年工做時間 3 年工做經驗」；若是你想改變原本悟性不錯，但老是有那一層窗戶紙的模糊… 若是你相信相信的力量，相信平凡人能成就非凡事，相信能遇到更好的本身。若是你但願參與到隨着業務騰飛的過程，親手推進一個有着深刻的業務理解、完善的技術體系、技術創造價值、影響力外溢的前端團隊的成長曆程，我以爲咱們該聊聊。任什麼時候間，等着你寫點什麼，發給 ZooTeam@cai-inc.com

本文分享自微信公衆號 - 政採雲前端團隊（Zoo-Team）。
若有侵權，請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。

联系我们 沪ICP备13005482号-10