深度优先搜索(DFS)
首先构造一个我们需要遍历的结构,这里用html演示
<div id="root">
<p></p>
<label></label>
<ul>
<li>
<span></span>
</li>
<li></li>
<li>
<a href="">
<img src="" alt="">
</a>
</li>
</ul>
</div>
用图表示的话就是这样
其实这个方法就是从根节点开始,一直遍历他的子节点,直到他的子节点被遍历完毕,才去遍历他的兄弟节点,以此类推
核心算法如下:
function DFS(node) {
let nodes = []
if (node !== null) {
let stack = []
stack.push(node)
while (stack.length !== 0) {
let item = stack.pop()
nodes.push(item)
let children = item.children
for (let i = children.length - 1; i >= 0; i--) {
stack.push(children[i])
}
}
return nodes
}
}
算法讲解:
nodes:[ ] -> [div] -> [div, p] ->[div, p, label] -> [div, p, label, ul] -> [div, p,label, ul, li] -> [div, p, label, ul, li, span] -> [div, p, label, ul, li, span, li] ->[div, p, label, ul, li, span, li, li] -> [div, p, label, ul, li, span, li, li, a] -> [div, p, label, ul, li, span, li, li, a, img]
stack:[ ] -> [div] -> [ul, label, p] -> [ul, label] -> [ul] -> [li, li, li] ->[li, li,span] ->[li, li] -> [li] -> [a] -> [img] -> [ ]
item: div -> p -> label -> ul -> li -> span -> li -> li -> a -> img
结果:
广度优先搜索(BFS)
还是以上html结构,用图表示广度优先搜索的话就是这样
这个方法就是从根节点的第一个子节点开始,先遍历他所有的兄弟节点,然后在遍历第一个节点的子节点,完成该遍历后,暂时不深入,继续遍历其兄弟节点的子节点,以此类推。
核心算法如下:
function BFS(node) {
let nodes = []
if (node != null) {
let queue = []
queue.unshift(node)
while (queue.length != 0) {
let item = queue.shift()
nodes.push(item)
let children = item.children
for (let i = 0; i < children.length; i++) {
queue.push(children[i])
}
}
}
return nodes
}
算法讲解:
nodes[ ]: [ ] -> [div] -> [div, p] -> [div, p, label] -> [div, p, label, ul] -> [div, p, label, ul, li] -> [div, p, label, ul], li, li] -> [div, p, label, ul, li, li, li] -> [div, p, label, ul, li, li, li, span] -> [div, p, label, ul, li, li, li, span, a] -> [div, p, label, ul, li, li, li, span, a, img]
queue[ ]: [ ] -> [div] -> [p, label, ul] -> [label, ul] -> [ul] -> [li, li, li] -> [li, li, span] -> [li, span] -> [span, a] -> [a] -> [img]
item: div -> p -> label -> ul -> li -> li -> li -> span -> a -> img