淺解前端必須掌握的演算法（五）：堆排序（上）

程式猿何大叔發表於2018-06-29

前端演算法排序

前言

雖然前端面試中很少會考到演算法類的題目，但是你去比如像騰訊一樣的大廠面試的時候就知道了，對基本演算法的掌握對於從事電腦科學技術的我們來說，還是必不可少的，每天花上 10 分鐘，輕鬆瞭解基本演算法概念以及前端的實現方式。

另外，掌握了一些基本的演算法實現，對於我們日常開發來說，也是如虎添翼，能讓我們的 js 業務邏輯更趨高效和流暢。

特別說明

今天這個演算法稍微比較複雜，牽扯到的概念也比較多，需要先了解基礎知識。我給每篇文章的定位是 10 分鐘內應該要掌握下來，所以我就擅作主張地將堆排序演算法講解分割為上、下兩篇文章了，希望能讓大家閱讀起來更清爽愉快。

文章結構

《堆排序（上）》文章結構：

簡單的二叉樹
簡單的滿二叉樹
簡單的完全二叉樹
簡單的堆
簡單的堆分類

《堆排序（下）》文章結構：

演算法介紹
輕鬆實現大頂堆調整
輕鬆實現建立大頂堆
輕鬆實現堆排序
複雜度分析

簡單的二叉樹

要了解堆，必須先了解一下二叉樹，兩者關係在下一步闡述。

二叉樹（Binary Tree）是每一個節點最多有兩個分支的樹結構，通常分支被稱作「左子樹」和「右子樹」，分支具有左右次序，不能隨意顛倒。

二叉樹第 i 層最多擁有 2^(i-1) 個節點，深度為 k 的二叉樹最多共有 2^(k+1)-1 個節點，且定義根節點所在的層級 i=0，所在的深度 k=0。注意該定義在全文起作用，後續不繼續提及。

二叉樹示意圖

簡單的滿二叉樹

假設某個二叉樹深度為 k，第 i 層擁有 2^(i-1) 個節點，且總共擁有 2^(k+1)-1 個節點，這樣的二叉樹稱為「滿二叉樹」。

換句話說，二叉樹的每一層都是滿的，除了最後一層上的節點，每一個節點都具有左節點和右節點。

滿二叉樹示意圖

簡單的完全二叉樹

假設某個二叉樹深度為 k，共有 n 個節點，當且僅當其中的每一個節點，都可以和同樣深度為 k 的滿二叉樹上的，按層序編號相同的節點，也就是序號為 1 到 n 的節點，均一一對應時，這樣的二叉樹稱為「完全二叉樹」。

滿二叉樹一定是完全二叉樹，但是完全二叉樹不一定是滿二叉樹。

完全二叉樹示意圖

如下的就不是完全二叉樹，樹 1 中 10 號節點缺失，樹 2 中 6、7 號節點缺失，樹 3 中 10、11 號節點缺失。

不是完全二叉樹示意圖

簡單的堆

堆（Heap），一類特殊的資料結構的統稱，通常是一個可以被看做一棵樹的陣列物件。

堆的實現通過構造二叉堆（binary heap），實為二叉樹的一種，由於其應用的普遍性，當不加限定時，均指該資料結構的這種實現。

堆，是完全二叉樹。

堆和陣列相互關係示意圖

對於給定的某個節點的下標 idx，可以很容易地計算出這個節點的父節點與孩子節點的下標：

// 計算父節點的下標
var getParentPos = function(idx){
  return Math.floor(idx / 2);
}

// 計算左子節點的下標
var getLeftChildPos = function(idx){
  return 2*idx;
};

// 計算右子節點的下標
var getRightChildPos = function(idx){
  return 2*idx + 1;
};
複製程式碼

如下圖，取下標 idx = 4 的節點，則其父節點的下標就為 Math.floor(4/2) === 2，其左子節點的下標就為 2*4 === 8，其右子節點的下標就為 2*4 + 1 === 9。

計算親屬節點位置示意圖

但將堆轉換為陣列時，由於陣列的初始化下標始終為 0，所以我們的堆資料結構模型在此時要發生如下改變：

改變資料結構模型示意圖

同樣的，以上的演算法也需要做一下微調：

// 計算父節點的下標
var getParentPos = function(idx){
  return Math.floor((idx-1) / 2);
}

// 計算左子節點的下標
var getLeftChildPos = function(idx){
  return 2*idx + 1;
};

// 計算右子節點的下標
var getRightChildPos = function(idx){
  return 2 * (idx+1);
};
複製程式碼