介绍下深度优先遍历和广度优先遍历，如何实现？ 每日一题系列(五)

前言

深度优先遍历，广度优先遍历，基本上前端人员是很少听说过的，应用场景挺少，并且也没怎么接触过数据结构，因此会觉得陌生

应用场景可用于实现深拷贝

所以这题目可以只做个了解，其实实现也是挺简单的，无非是一个栈，一个队列

深度优先遍历

深度优先遍历DFS 与树的先序遍历比较类似。

假设初始状态是图中所有顶点均未被访问，则从某个顶点v出发，首先访问该顶点然后依次从它的各个未被访问的邻接点出发深度优先搜索遍历图，直至图中所有和v有路径相通的顶点都被访问到。若此时尚有其他顶点未被访问到，则另选一个未被访问的顶点作起始点，重复上述过程，直至图中所有顶点都被访问到为止。

/*深度优先遍历三种方式*/
let deepTraversal1 = (node, nodeList = []) => {
  if (node !== null) {
    nodeList.push(node)
    let children = node.children
    for (let i = 0; i < children.length; i++) {
      deepTraversal1(children[i], nodeList)
    }
  }
  return nodeList
}
let deepTraversal2 = (node) => {
    let nodes = []
    if (node !== null) {
      nodes.push(node)
      let children = node.children
      for (let i = 0; i < children.length; i++) {
        nodes = nodes.concat(deepTraversal2(children[i]))
      }
    }
    return nodes
  }
// 非递归
let deepTraversal3 = (node) => {
  let stack = []
  let nodes = []
  if (node) {
    // 推入当前处理的node
    stack.push(node)
    while (stack.length) {
      let item = stack.pop()
      let children = item.children
      nodes.push(item)
      for (let i = children.length - 1; i >= 0; i--) {
        stack.push(children[i])
      }
    }
  }
  return nodes
}

广度优先遍历

广度优先遍历 BFS

从图中某顶点v出发，在访问了v之后依次访问v的各个未曾访问过的邻接点，然后分别从这些邻接点出发依次访问它们的邻接点，并使得“先被访问的顶点的邻接点先于后被访问的顶点的邻接点被访问，直至图中所有已被访问的顶点的邻接点都被访问到。 如果此时图中尚有顶点未被访问，则需要另选一个未曾被访问过的顶点作为新的起始点，重复上述过程，直至图中所有顶点都被访问到为止。

let widthTraversal2 = (node) => {
  let nodes = []
  let stack = []
  if (node) {
    stack.push(node)
    while (stack.length) {
      let item = stack.shift()
      let children = item.children
      nodes.push(item)
      // 队列，先进先出
      for (let i = 0; i < children.length; i++) {
        stack.push(children[i])
      }
    }
  }
  return nodes
}

验证

这两个遍历方法，是用来遍历dom结构的，因此用dom来进行验证

<div class="parent">
  <div class="child-1">
    <div class="child-1-1">
      <div class="child-1-1-1">
        a
      </div>
    </div>
    <div class="child-1-2">
      <div class="child-1-2-1">
        b
      </div>
    </div>
    <div class="child-1-3">
      C
    </div>
  </div>
  <div class="child-2">
    <div class="child-2-1">
      d
    </div>
    <div class="child-2-2">
      e
    </div>
  </div>
  <div class="child-3">
    <div class="child-3-1">
      f
    </div>
  </div>
</div>

console.log(deepTraversal1(document.querySelector('.parent')))
console.log(widthTraversal2(document.querySelector('.parent')))

输出如下

可以看到，深度和广度都已经实现了

总结

这两个遍历方法，做个了解就行，被问到你能回答上来就行，不一定要手写

明天的题目将是用这两个遍历实现深拷贝