可视化讲解深度优先遍历(DFT)

时间 2019-11-15

原文原文链接

可视化讲解深度优先遍历(DFT)

深度优先遍历, 刷过题的朋友应该都很熟悉了,难是不难,可是理解起来仍是要费一些功夫的. 深度优先遍历的实现方法有递归和非递归两种, 这里咱们用可视化的角度,讲解前一种: 递归的深度优先遍历.javascript

为何要以可视化的方式来说解呢? 由于人是视觉的动物, 若是和你说 二叉树 或 栈 , 相信你们脑中出现的都是下面的图形:java

而不是下面的代码:node

// binary tree
class Node {
  constructor(value, leftChild, rightChild) {
    this.value = value
    this.leftChild = leftChild
    this.rightChild = rightChild
  }
}

// stack
const stack = new Array()
stack.push(1)
var topItem = stack.pop()

因此说, 人是视觉动物, 以图形可视化的方式来说解问题每每能讲解的更清楚, 这也就是我写本文的原因.git

效果展现

为了可视化的讲解 深度优先遍历算法, 笔者写了一个简单的网页, 实现的功能有:github

用户可编辑进行深度遍历的二叉树
网页上给出了 JavaScript 版本的实现
点击 Start DFT 按钮, 用户将看到算法中用到的 二叉树 和栈都将动态的展现在页面中,能够直观的看到代码运行过程当中数据的变化

页面目前还在继续优化中，让咱们看看目前的效果：算法

在线demo:

https://ssthouse.github.io/vi...微信

能够看到，网页模拟了深度搜索时二叉树和栈的动态变化过程：数据结构

二叉树中当前遍历到的节点会变成红色;
栈中压入（push）的节点为灰色;
栈中弹出（pop) 的节点会变为红色，而后消失;

其中页面左上角为初始遍历的二叉树数据，用户能够修改二叉树数据后再次启动可视化深度优先遍历过程.post

页面左下角为深度优先遍历的 javascript 实现版本，做为参考.优化

深度优先遍历简介

可视化分析以前，让咱们先来简单看看实现深度优先搜索的代码：

export class Dft {
  constructor(rootNode, stepCallback) {
    this.rootNode = rootNode
    this.stepCallback = stepCallback
  }

  start() {
    if (!this.rootNode || !this.stepCallback) {
      return
    }
    const stack = [this.rootNode]
    while (stack.length !== 0) {
      const curNode = stack.pop()
      console.log(`current node: ${curNode.value}`)
      curNode.childrenNodes.forEach(element => {
        stack.push(element)
      })
    }
  }
}

export class Node {
  constructor(value, childrenNodes = []) {
    this.value = value
    this.childrenNodes = childrenNodes
  }
}

代码不长，让咱们一步步看.

首先咱们建立了一个栈 const stack = [this.rootNode] , 并将根节点放入栈中.

接下来是一个while语句, 跳出循环的条件是 栈为空, 也就是表明咱们遍历完了整棵树.

在循环中, 咱们先将栈顶的节点弹出, 并打印出来, 表示咱们已经遍历过了该节点. 而后将该节点的全部子节点压入栈中, 这就保障了咱们下一个遍历到的点就是该节点的子节点. 重复该循环, 最后咱们就能够看到, 二叉树的每一个节点都按照深度搜索的顺序被打印了出来:

current node: 1
current node: 4
current node: 7
current node: 6
current node: 2
current node: 5
current node: 3

若是是对栈的使用比较熟悉的同窗, 可能看到这里就已经明白原理了.

可是, 若是是对栈使用不是很熟悉的同窗, 估计对代码的执行过程仍是没有一个直观的认识, 那么让咱们以更直观的方式看看这段代码是怎么运行的.