小編給大家分享一下JavaScript深度優(yōu)先遍歷DFS和廣度優(yōu)先遍歷BFS算法的示例，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！

創(chuàng)新互聯(lián)公司專業(yè)為企業(yè)提供富裕網(wǎng)站建設(shè)、富裕做網(wǎng)站、富裕網(wǎng)站設(shè)計、富裕網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計與制作、富裕企業(yè)網(wǎng)站模板建站服務(wù)，十余年富裕做網(wǎng)站經(jīng)驗，不只是建網(wǎng)站，更提供有價值的思路和整體網(wǎng)絡(luò)服務(wù)。

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

準備

假設(shè)頁面上的dom結(jié)構(gòu)如下：

<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結(jié)構(gòu)轉(zhuǎn)化成樹的樣子

這樣之后，dom結(jié)構(gòu)似乎清楚了不少。

深度優(yōu)先遍歷（Depth-First Search）

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

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

function deepFirstSearch(node,nodeList) {  
    if (node) {    
        nodeList.push(node);    
        var children = node.children;    
        for (var i = 0; i < children.length; i++) 
        //每次遞歸的時候?qū)?需要遍歷的節(jié)點 和 節(jié)點所存儲的數(shù)組傳下去
        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接受兩個參數(shù)，第一個參數(shù)是需要遍歷的節(jié)點，第二個是節(jié)點所存儲的數(shù)組，并且返回遍歷完之后的數(shù)組，該數(shù)組的元素順序就是遍歷順序，調(diào)用方法：

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

控制臺輸出結(jié)果

廣度優(yōu)先遍歷（breadth-first traverse）

該方法是以橫向的維度對dom樹進行遍歷，從該節(jié)點的第一個子節(jié)點開始，遍歷其所有的兄弟節(jié)點，再遍歷第一個節(jié)點的子節(jié)點，完成該遍歷之后，暫時不深入，開始遍歷其兄弟節(jié)點的子節(jié)點。即如圖所示（遍歷順序為紅字鎖標）：

js實現(xiàn)算法代碼（遞歸版本）：

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由于層級太深，會導(dǎo)致堆棧溢出：Maximum call stack size exceeded，但遍歷的順序依舊沒有問題，可以在遍歷過程中進行操作，不返回遍歷數(shù)組即可。

非遞歸版本：

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;  
}

控制臺輸出結(jié)果：

總結(jié)：BFS和DFS都是圖的算法之一，本文所闡述的版本較為簡單，為無向且非連通圖，在日后會更新更多基于JavaScript的算法。

看完了這篇文章，相信你對JavaScript深度優(yōu)先遍歷DFS和廣度優(yōu)先遍歷BFS算法的示例有了一定的了解，想了解更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)網(wǎng)站制作公司行業(yè)資訊頻道，感謝各位的閱讀！

文章題目：JavaScript深度優(yōu)先遍歷DFS和廣度優(yōu)先遍歷BFS算法的示例-創(chuàng)新互聯(lián)
本文網(wǎng)址：http://jinyejixie.com/article48/deojhp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供自適應(yīng)網(wǎng)站、云服務(wù)器、做網(wǎng)站、網(wǎng)站建設(shè)、建站公司、定制網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)