js实现深度优先搜索(DFS)和广度优先搜索(BFS)

深度优先搜索（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

结果：