海秋

二叉树的遍历

成果如图：

思路：

1. 先对二叉树进行遍历，按照顺序将节点存入数组
2. 对数组中的节点进行样式处理（排他以及定时器）

遍历代码：

1. 先序遍历：若二叉树为空，则空操作返回，否则先访问根结点，然后前序遍历左子树，再前序遍历右子树。

function DLR(node) {
  //先序遍历
  if (node) {
    //判断二叉树是否存在，若不存在则结束返回
    nodeArr.push(node);
    DLR(node.children[0]);
    DLR(node.children[1]);
  }
}

2. 中序遍历：若树为空，则空操作返回，否则从根结点开始（注意并不是先访问根结点），中序遍历根结点的左子树，然后是访问根结点，最后中序遍历右子树。

function LDR(node) {
  if (node) {
    LDR(node.children[0]);
    nodeArr.push(node);
    LDR(node.children[1]);
  }
}

3. 后序遍历：若树为空，则空操作返回，否则从左到右先叶子后结点的方式遍历访问左右子树，最后访问根结点。

function LRD(node) {
  if (node) {
    LRD(node.children[0]);
    LRD(node.children[1]);
    nodeArr.push(node);
  }
}

最后我们得到了按照遍历顺序排序的数组，再进行样式处理，代码如下

function activeNode(arr) {
  for (let i = 0; i < arr.length; i++) {
    setTimeout(function () {
      for (let j = 0; j < arr.length; j++) {
        arr[j].className = "";
      } //清除所有节点样式
      arr[i].className = "active"; //给当前节点添加样式
    }, i * 500); //i*500 给定时器创造时间间隔
  }
}

参考资料