js 中二叉樹的深度遍歷與廣度遍歷(遞歸實現與非遞歸實現)

樹的簡介

棧、隊列、鏈表等數據結構，都是順序數據結構。而樹是非順序數據結構。樹型結構是一類非常重要的非線性結構。直觀地，樹型結構是以分支關系定義的層次結構。


樹型結構

樹在計算機領域中也有著廣泛的應用，例如在編譯程序中，用樹來表示源程序的語法結構；在數據庫系統中，可用樹來組織信息；在分析算法的行為時，可用樹來描述其執行過程等等。

  1. 樹（Tree）是n（n>=0）個結點的有限集。在任意一棵非空樹中：
  • 有且僅有一個特定的稱為根（Root）的結點；
  • 當n>1時，其余結點可分為m(m>0)個互不相交的有限集T1,T2,T3,...Tm，其中每一個集合本身又是一棵樹，并且稱為根的子樹（Subtree）。

例如，（a）是只有一個根結點的樹；（b）是有13個結點的樹，其中A是根，其余結點分成3個互不相交的子集：T1={B,E,F,K,L},t2={D,H,I,J,M};T1,T2和T3都是根A的子樹，且本身也是一棵樹。

  1. 樹的結點包含一個數據元素及若干指向其子樹的分支。

結點擁有的子樹數稱為結點的度（Degree）。例如，（b）中A的度為3，C的度為1，F的度為0。度為0的結點稱為葉子（Leaf）或者終端結點。度不為0的結點稱為非終端結點或分支結點。

樹的度是樹內各結點的度的最大值。（b）的樹的度為3。結點的子樹的根稱為該結點的孩子（Child）。相應的，該結點稱為孩子的雙親（Parent）。同一個雙親的孩子之間互稱兄弟（Sibling）。結點的祖先是從根到該結點所經分支上的所有結點。反之，以某結點為根的子樹中的任一結點都稱為該結點的子孫。

  1. 結點的層次（Level）從根開始定義起，根為第一層，跟的孩子為第二層。若某結點在第層，則其子樹的根就在第l+1層。其雙親在同一層的結點互為堂兄弟。例如，結點G與E，F,H,I,J互為堂兄弟。樹中結點的最大層次稱為樹的深度（Depth）或高度。（b）的樹的深度為4。

求樹的深度：看這篇：http://www.lxweimin.com/p/9fc3d66e5c87

  1. 如果將樹中結點的各子樹看成從左至右是有次序的（即不能交換），則稱該樹為有序樹，否則稱為無序樹。在有序樹中最左邊的子樹的根稱為第一個孩子，最右邊的稱為最后一個孩子。

  2. 森林（Forest）是m（m>=0）棵互不相交的樹的集合。對樹中每個結點而言，其子樹的集合即為森林。

二叉樹

二叉樹（Binary Tree）是另一種樹型結構，它的特點是每個結點至多只有兩棵子樹（即二叉樹中不存在度大于2的結點），并且，二叉樹的子樹有左右之分（其次序不能任意顛倒。）

  1. 二叉樹的性質：
  • 在二叉樹的第 i 層上至多有2^{i-1}個結點(i>=1)。
  • 深度為k的二叉樹至多有2^k - 1個結點，(k>=1)。
  • 對任何一棵二叉樹T，如果其終端結點數為n0，度為2的結點數為n2，則n0 = n2 + 1;
  • 一棵深度為k且有2^k - 1個結點的二叉樹稱為滿二叉樹。
  • 深度為k的，有n個結點的二叉樹，當且僅當其每一個結點都與深度為k的滿二叉樹中編號從1至n的結點一一對應時，稱之為完全二叉樹。
  1. 完全二叉樹的兩個特性：
  • 具有n個結點的完全二叉樹的深度為Math.floor(log_2 n) + 1;
  • 如果對一棵有n個結點的完全二叉樹（其深度為Math.floor(log_2 n) + 1）的結點按層序編號（從第1層到第Math.floor(log_2 n) + 1，每層從左到右），則對任一結點（1<=i<=n）有：

如果i=1，則結點i是二叉樹的根，無雙親；如果i>1，則其雙親parent(i)是結點Math.floor(i/2)。
如果2i > n，則結點i無左孩子（結點i為葉子結點）；否則其左孩子LChild(i)是結點2i.
如果2i + 1 > n，則結點i無右孩子；否則其右孩子RChild(i)是結點2i + 1;

二叉樹

完全二叉樹
  1. 二叉樹的存儲結構
  • 順序存儲結構

用一組連續的存儲單元依次自上而下，自左至右存儲完全二叉樹上的結點元素，即將二叉樹上編號為i的結點元素存儲在加上定義的一維數組中下標為i-1的分量中。“0”表示不存在此結點。這種順序存儲結構僅適用于完全二叉樹。因為，在最壞情況下，一個深度為k且只有k個結點的單支樹（樹中不存在度為2的結點）卻需要長度為2的n次方-1的一維數組。

順序：[1, 2, 3, 4, 5, , 6, , , 7]

  • 鏈式存儲結構

二叉樹的結點由一個數據元素和分別指向其左右子樹的兩個分支構成，則表示二叉樹的鏈表中的結點至少包含三個域：數據域和左右指針域。有時，為了便于找到結點的雙親，還可在結點結構中增加一個指向其雙親結點的指針域。利用這兩種結構所得的二叉樹的存儲結構分別稱之為二叉鏈表和三叉鏈表。 在含有n個結點的二叉鏈表中有n+1個空鏈域，我們可以利用這些空鏈域存儲其他有用信息，從而得到另一種鏈式存儲結構---線索鏈表。

鏈式：{ data, left, right}

二叉樹的遍歷

遍歷二叉樹(Traversing Binary Tree)：是指按指定的規律對二叉樹中的每個結點訪問一次且僅訪問一次。

二叉樹有深度遍歷和廣度遍歷， 深度遍歷有前序、 中序和后序三種遍歷方法。二叉樹的前序遍歷可以用來顯示目錄結構等；中序遍歷可以實現表達式樹，在編譯器底層很有用；后序遍歷可以用來實現計算目錄內的文件及其信息等。

二叉樹是非常重要的數據結構， 其中二叉樹的遍歷要使用到棧和隊列還有遞歸等，很多其它數據結構也都是基于二叉樹的基礎演變而來的。熟練使用二叉樹在很多時候可以提升程序的運行效率，減少代碼量，使程序更易讀。

二叉樹不僅是一種數據結構，也是一種編程思想。學好二叉樹是程序員進階的一個必然進程。

前序遍歷：訪問根–>遍歷左子樹–>遍歷右子樹;
中序遍歷：遍歷左子樹–>訪問根–>遍歷右子樹;
后序遍歷：遍歷左子樹–>遍歷右子樹–>訪問根;
廣度遍歷：按照層次一層層遍歷;

  • 例如(a+b*c)-d/e，該表達式用二叉樹表示如圖：


    (a+b*c)-d/e

對該二叉樹進行深度和廣度遍歷為：

*前序遍歷：- + a * b c / d e
中序遍歷：a + b * c - d / e
后序遍歷：a b c + d e / -
廣度遍歷：- + / a * d e b c

1. js中的二叉樹

上述二叉樹(a+b*c)-d/e在js中可以用對象的形式表示出來：

var tree = {
    value: "-",
    left: {
        value: '+',
        left: {
            value: 'a',
        },
        right: {
            value: '*',
            left: {
                value: 'b',
            },
            right: {
                value: 'c',
            }
        }
    },
    right: {
        value: '/',
        left: {
            value: 'd',
        },
        right: {
            value: 'e',
        }
    }
}

2. js中二叉樹的深度遍歷

深度遍歷也可稱為深度優先遍歷（Depth-First Search，DFS），因為它總是優先往深處訪問。

先序遍歷

  • 遞歸遍歷
let result = [];
let dfs = function (node) {
    if(node) {
        result.push(node.value);
        dfs(node.left);
        dfs(node.right);
    }
}

dfs(tree);
console.log(result); 
// ["-", "+", "a", "*", "b", "c", "/", "d", "e"]

先序遞歸遍歷思路：

先遍歷根結點，將值存入數組，然后遞歸遍歷：先左結點，將值存入數組，繼續向下遍歷；直到（二叉樹為空）子樹為空，則遍歷結束；
然后再回溯遍歷右結點，將值存入數組，這樣遞歸循環，直到（二叉樹為空）子樹為空，則遍歷結束。

  • 非遞歸遍歷（利用棧：將遍歷到的結點都依次存入棧中，拿結果時從棧中訪問）
let dfs = function (nodes) {
    let result = [];
    let stack = [];
    stack.push(nodes);
    while(stack.length) { // 等同于 while(stack.length !== 0) 直到棧中的數據為空
        let node = stack.pop(); // 取的是棧中最后一個j
        result.push(node.value);
        if(node.right) stack.push(node.right); // 先壓入右子樹
        if(node.left) stack.push(node.left); // 后壓入左子樹
    }
    return result;
}
dfs(tree);

先序非遞歸遍歷思路：

  1. 初始化一個棧，將根節點壓入棧中；
  2. 當棧為非空時，循環執行步驟3到4，否則執行結束；
  3. 從隊列取得一個結點（取的是棧中最后一個結點），將該值放入結果數組；
  4. 若該結點的右子樹為非空，則將該結點的右子樹入棧，若該結點的左子樹為非空，則將該結點的左子樹入棧；（注意：先將右結點壓入棧中，后壓入左結點，從棧中取得時候是取最后一個入棧的結點，而先序遍歷要先遍歷左子樹，后遍歷右子樹）

中序遍歷

  • 遞歸遍歷
let result = [];
let dfs = function (node) {
     if(node) {
        dfs(node.left);
        result.push(node.value); // 直到該結點無左子樹 將該結點存入結果數組 接下來并開始遍歷右子樹
        dfs(node.right);
    }
}

dfs(tree);
console.log(result);
//  ["a", "+", "b", "*", "c", "-", "d", "/", "e"]

中序遞歸遍歷的思路：

先遞歸遍歷左子樹，從最后一個左子樹開始存入數組，然后回溯遍歷雙親結點，再是右子樹，這樣遞歸循環。

  • 非遞歸遍歷
function dfs(node) {
    let result = [];
    let stack = [];
    while(stack.length || node) { // 是 || 不是 &&
        if(node) {
            stack.push(node);
            node = node.left;
        } else {
            node = stack.pop();
            result.push(node.value);
            //node.right && stack.push(node.right);
            node = node.right; // 如果沒有右子樹 會再次向棧中取一個結點即雙親結點
        }
    }
    return result;
}

dfs(tree);
// ["a", "+", "b", "*", "c", "-", "d", "/", "e"]

一種利用回溯法思想的代碼：
看這里：https://zhuanlan.zhihu.com/p/27307626 但是他的代碼有些問題。。。

非遞歸遍歷的思路：

將當前結點壓入棧，然后將左子樹當做當前結點，如果當前結點為空，將雙親結點取出來，將值保存進數組，然后將右子樹當做當前結點，進行循環。

后序遍歷

  • 遞歸遍歷
result = [];
function dfs(node) {
    if(node) {
        dfs(node.left);
        dfs(node.right);
        result.push(node.value);
    }
}
dfs(tree);
console.log(result);
// ["a", "b", "c", "*", "+", "d", "e", "/", "-"]

寫到這，深深的被遞歸折服。。。。服

先走左子樹，當左子樹沒有孩子結點時，將此結點的值放入數組中，然后回溯遍歷雙親結點的右結點，遞歸遍歷。

  • 非遞歸遍歷

(含大量注釋代碼的)

function dfs(node) {
    let result = [];
    let stack = [];
    stack.push(node);
    while(stack.length) {
        // 不能用node.touched !== 'left' 標記‘left’做判斷，
        // 因為回溯到該結點時，遍歷右子樹已經完成，該結點標記被更改為‘right’ 若用標記‘left’判斷該if語句會一直生效導致死循環
        if(node.left && !node.touched) { // 不要寫成if(node.left && node.touched !== 'left')
            // 遍歷結點左子樹時，對該結點做 ‘left’標記；為了子結點回溯到該（雙親）結點時，便不再訪問左子樹
            node.touched = 'left';
            node = node.left;
            stack.push(node);
            continue;
        }
        if(node.right && node.touched !== 'right') { // 右子樹同上
            node.touched = 'right';
            node = node.right;
            stack.push(node);
            continue;
        }
        node = stack.pop(); // 該結點無左右子樹時，從棧中取出一個結點，訪問(并清理標記)
        node.touched && delete node.touched; // 可以不清理不影響結果 只是第二次對同一顆樹再執行該后序遍歷方法時，結果就會出錯啦因為你對這棵樹做的標記還留在這棵樹上
        result.push(node.value);
        node = stack.length ? stack[stack.length - 1] : null;
        //node = stack.pop(); 這時當前結點不再從棧中取（彈出），而是不改變棧數據直接訪問棧中最后一個結點
        //如果這時當前結點去棧中取（彈出）會導致回溯時當該結點左右子樹都被標記過時 當前結點又變成從棧中取會漏掉對結點的訪問（存入結果數組中）
    }
    return result; // 返回值
}

dfs(tree);

后序遍歷非遞歸遍歷思路：先把根結點和左樹推入棧，然后取出左樹，再推入右樹，取出，最后取根結點。

步驟：

  1. 初始化一個棧，將根節點壓入棧中，并標記為當前節點(node)；
  2. 當棧為非空時，執行步驟3，否則執行結束；
  3. 如果當前節點(node)有左子樹且沒有被 touched，則執行4；如果當前結點有右子樹，被 touched left 但沒有被 touched right 則執行5 否則執行6；
  4. 對當前節點(node)標記 touched left，將當前節點的左子樹賦值給當前節點(node=node.left) 并將當前節點(node)壓入棧中，回到3；
  5. 對當前節點(node)標記 touched right，將當前節點的右子樹賦值給當前節點(node=node.right) 并將當前節點(node)壓入棧中，回到3；
  6. 清理當前節點(node)的 touched 標記，彈出棧中的一個節點并訪問，然后再將棧頂節點標記為當前節點(item)，回到3；

3. js中二叉樹的廣度遍歷

廣度優先遍歷二叉樹(層序遍歷)是用隊列來實現的，廣度遍歷是從二叉樹的根結點開始，自上而下逐層遍歷；在同一層中，按照從左到右的順序對結點逐一訪問。

  • 遞歸遍歷
let result = [];
let stack = [tree]; // 先將要遍歷的樹壓入棧
let count = 0; // 用來記錄執行到第一層
let bfs = function () {
    let node = stack[count];
    if(node) {
        result.push(node.value);
        if(node.left) stack.push(node.left);
        if(node.right) stack.push(node.right);
        count++;
        bfs();
    }
}
dfc();
console.log(result);
//  ["-", "+", "/", "a", "*", "d", "e", "b", "c"]
  • 非遞歸算法
function bfs(node) {
    let result = [];
    let queue = [];
    queue.push(node);
    let pointer = 0;
    while(pointer < queue.length) {
        let node = queue[pointer++]; // // 這里不使用 shift 方法（復雜度高），用一個指針代替
        result.push(node.value);
        node.left && queue.push(node.left);
        node.right && queue.push(node.right);
    }
    return result;
}

bfs(tree);
// ["-", "+", "/", "a", "*", "d", "e", "b", "c"]

另外一種比較消耗性能的方法：不額外定義一個指針變量 pointer，使用數組的shift()方法，每次改變 queue 的數據（入棧、出棧），來讀取數據，直到棧 queue 中數據為空，執行結束。（頻繁的改變數組，因為數組是引用類型，要改變它，要新開辟一個地址，所以比較消耗空間）

function bfs (node) {
    let result = [];
    let queue = [];
    queue.push(node);
    while(queue.length) {
        node = queue.shift();
        result.push(node.value); // 不要忘記訪問
        // console.log(node.value);
        node.left && queue.push(node.left);
        node.right && queue.push(node.right);
    }
    return result;
}
bfs(tree);
//  ["-", "+", "/", "a", "*", "d", "e", "b", "c"]

References

二叉樹與JavaScript
JavaScript與簡單算法
javascript實現數據結構： 樹和二叉樹,二叉樹的遍歷和基本操作
圖的基本算法（BFS和DFS）
搜索思想——DFS & BFS（基礎基礎篇）

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。