日常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中的变化:
每次循环,子元素都在父元素及叔元素的后端,从而实现了上述用二叉图解读答案的方式。
总结
这篇文章只是学习笔记,如有不当请指正。