廣度優先遍歷圖解

剪雲者發表於2019-03-10
圖解

日常coding中，我個人用的比較多的是深度優先遍歷，因為這種比較好理解，而且程式碼量少，總是遞迴一把梭。
而今天探究了下如何廣度優先遍歷，發現其思路上是截然不同的，它比較巧妙的利用到了佇列機制。

準備工作

首先我們先建立一個html：

    <html>
        <head>
            <meta charset="utf-8" />
            <title></title>
        </head>
        <body>
            <div></div>
            <p></p>
        </body>
    </html>
複製程式碼

目標

按廣度優先順序，輸出標籤名。

圖解

首先我用二叉樹圖來表示了當前結構：

廣度優先遍歷圖解

這時候你應該能通過此圖片，直接說出了答案:

 // html、head、body、meta、title、div、p
 // 從上往下，從左往右，很簡單嘛...
複製程式碼

我們該如何通過佇列來獲得這樣的順序呢？

程式碼解讀

我們先看實現程式碼：

function wideTraversal(){
    let html = document.documentElement; // 獲取html標籤   
    let queue = [html]; //佇列裡只有一個html，準備開始
    while(queue.length > 0){ // 開始...
        // 當前遍歷元素出列，並獲得其子元素
        let { children, tagName } = current = queue.shift();
        // Todo
        console.log(tagName.toLocaleLowerCase());
        for(let i = 0; i < children.length; i++){ //將子元素新增到queue末端
            queue.push(children[i]);
        }
    }
}
複製程式碼

其中queue為佇列，while(queue.length > 0) 和 queue.shift() 控制了遍歷次數。這裡我們先觀察queue在while中的變化：

廣度優先遍歷圖解

每次迴圈，子元素都在父元素及叔元素的後端，從而實現了上述用二叉圖解讀答案的方式。

總結

這篇文章只是學習筆記，如有不當請指正。

相關文章