遍歷之深度優先遍歷和廣度優先遍歷的區別

  在平常工做中，咱們常常會用到遍歷操做。如遍歷一顆樹，找到某個節點。遍歷又分爲廣度優先遍歷(Depth First Traversal)和深度優先遍歷(Breadth First Traversal)兩種。

一、深度優先遍歷(DFS)

  首先訪問根節點，其次是它的子節點，訪問子節點的子節點，直到子節點沒有子節點爲止，就這樣一直循環下去，直到根節點下全部的子節點都被訪問到爲止。簡單點說就是，從根節點出發，按照從左到右的順序，訪問其子節點，若是子節點還有子節點，則一直向下訪問，直到沒有子節點爲止。而後再返回到離根節點最近的而沒有訪問到的子節點，而後按照前面的查找方法，一遍一遍的循環下去，直到全部的節點被訪問完畢爲止。 算法實現以下：

function deepTranversal(node，nodeList=[]){
        if(node){
            nodeList.push(node)
            let children=node.children;
            let len=children.length;
            if(children&&len){
                for(let i=0;i<len;i++){
                    deepTranversal(node,nodeList)
                }
            }
        }
        return nodeList;
    }
複製代碼

//驗證
    <div id="A">
        A
        <div id="B1">
            B1
            <span id="C1">C1</span>
            <span id="C2">C2</span>
        </div>
        <div id="B2">B2
            <span id="C3">C3</span>
            <span id="C4">C4</span>
        </div>
        <div id="B3">B3
            <span id="C5">C5</span>
            <span id="C6">C6</span>
        </div>
        <div id="B4">B4
            <span id="C7">C7</span>
            <span id="C8">C8</span>
        </div>
    </div>
    //如上所示節點樹
    let  node=document.querySelector("#A");
    for(let item of deepTranversal(node,[])){
        console.log(item.id);
    }
    
複製代碼

輸出結果以下

二、廣度優先遍歷

  首先訪問根節點，其次是它的子節點，而後按照從左到右的順序，訪問子節點的子節點，直到子節點沒有子節點爲止，就這樣一直循環下去，直到根節點下全部的子節點都被訪問到爲止。簡單點說就是從根節點出發，一層一層的從上向下訪問，同層節點從左往右訪問，直到全部的節點都被訪問到爲止。 算法實現以下：

function breadthTranversal(node,nodeList=[]){
        let satck=[];
        if(node){
            stack.push(node);
            while(stack.length){
                let item=stack.shift();
                nodeList.push(item);
                let children=item.children;
                let len=children.length;
                for(let i=0;i<len;i++){
                    stack.push(children[i]);
                }
            }
        }
        return nodeList;
    }
    //驗證 節點仍是上面的節點數據
    for(let item of breadthTranversal(node,[])){
        console.log(item.id)
    }
複製代碼

輸出結果以下