广度优先遍历图解日常coding中，我个人用的比较多的是深度优先遍历，因为这种比较好理解，而且代码量少，总是递归一把梭。

日常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中的变化：

每次循环，子元素都在父元素及叔元素的后端，从而实现了上述用二叉图解读答案的方式。

总结

这篇文章只是学习笔记，如有不当请指正。