JS算法之深度優先遍歷(DFS)和廣度優先遍歷(BFS)

JS算法之深度優先遍歷(DFS)和廣度優先遍歷(BFS)

背景

在開發頁面的時候，咱們有時候會遇到這種需求：在頁面某個dom節點中遍歷，找到目標dom節點，咱們正常作法是利用選擇器document.getElementById()，document.getElementsByName()或者document.getElementsByTagName()，但在本文，咱們從算法的角度去查找dom節點，同時理解一下深度優先遍歷(DFS)和廣度優先遍歷(BFS)的原理。

準備

假設頁面上的dom結構以下：

<div id="root">
    <ul>
        <li>
            <a href="">
                <img src="" alt="">
            </a>
        </li>
        <li>
            <span></span>
        </li>
        <li>
        </li>
    </ul>
    <p></p>
    <button></button>
</div>

讓咱們來把這個dom結構轉化成樹的樣子

這樣以後，dom結構彷佛清楚了很多。

深度優先遍歷（Depth-First Search）

該方法是以縱向的維度對dom樹進行遍歷，從一個dom節點開始，一直遍歷其子節點，直到它的全部子節點都被遍歷完畢以後在遍歷它的兄弟節點。即如圖所示（遍歷順序爲紅字鎖標）：

js實現該算法代碼(遞歸版本)：

function deepFirstSearch(node,nodeList) {  
    if (node) {    
        nodeList.push(node);    
        var children = node.children;    
        for (var i = 0; i < children.length; i++) 
        //每次遞歸的時候將 須要遍歷的節點 和 節點所存儲的數組傳下去
        deepFirstSearch(children[i],nodeList);    
    }    
    return nodeList;  
}

非遞歸版本：

function deepFirstSearch(node) {
    var nodes = [];
    if (node != null) {
        var stack = [];
        stack.push(node);
        while (stack.length != 0) {
        var item = stack.pop();
        nodes.push(item);
        var children = item.children;
        for (var i = children.length - 1; i >= 0; i--)
            stack.push(children[i]);
        }
    }
    return nodes;
}

deepFirstSearch接受兩個參數，第一個參數是須要遍歷的節點，第二個是節點所存儲的數組，而且返回遍歷完以後的數組，該數組的元素順序就是遍歷順序，調用方法：

let root = document.getElementById('root')
deepTraversal(root,nodeList=[])

控制檯輸出結果

廣度優先遍歷（breadth-first traverse）

該方法是以橫向的維度對dom樹進行遍歷，從該節點的第一個子節點開始，遍歷其全部的兄弟節點，再遍歷第一個節點的子節點，完成該遍歷以後，暫時不深刻，開始遍歷其兄弟節點的子節點。即如圖所示（遍歷順序爲紅字鎖標）：

js實現算法代碼（遞歸版本）：

function breadthFirstSearch(node) {
    var nodes = [];
    var i = 0;
    if (!(node == null)) {
        nodes.push(node);
        breadthFirstSearch(node.nextElementSibling);
        node = nodes[i++];
        breadthFirstSearch(node.firstElementChild);
    }
    return nodes;
}

遞歸版本的BFS因爲層級太深，會致使堆棧溢出：Maximum call stack size exceeded，但遍歷的順序依舊沒有問題，能夠在遍歷過程當中進行操做，不返回遍歷數組便可。
非遞歸版本：

function breadthFirstSearch(node) {  
    var nodes = [];  
    if (node != null) {  
        var queue = [];  
        queue.unshift(node);  
        while (queue.length != 0) {  
            var item = queue.shift();  
            nodes.push(item);  
            var children = item.children;  
            for (var i = 0; i < children.length; i++)  
                queue.push(children[i]);  
        }  
    }  
    return nodes;  
}

控制檯輸出結果：

總結

BFS和DFS都是圖的算法之一，本文所闡述的版本較爲簡單，爲無向且非連通圖，在往後會更新更多基於JavaScript的算法。