js如何遍历二叉树？？

来源：互联网发布：ubuntu开机启动项编辑：程序博客网时间：2024/05/17 02:01

1、在百度前端学院看到这一题，一年前学的数据结构，感觉忘得差不多了，然后找了一篇博客算是简单的复习下二叉树题目。

2、下面是我写的js遍历二叉树，包括前序，中序，后序三种遍历方式，也有借鉴的部分哦。

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title></head><style type="text/css">/*二叉树节点基本样式*/.node_1,.node_2,.node_3,.node_4,.node_5{border: 2px solid #1C86EE;float: left;padding: 5px;margin: 5px;box-sizing: content-box;background: #FFFFFF;border-radius: 10px;color:#1C86EE ;}.node_1{width: 800px;height: 300px;}.node_2{width: 350px;height: 250px;}.node_3{width: 125px;height: 210px;}.node_4{width: 80px;height: 80px;}.node_5{width: 7px;height: 20px;}</style><body><div class="node_1">        <!--根节点 -->          1<div class="node_2">2<div class="node_3">3  <div class="node_4">     4<div class="node_5">5</div>     <div class="node_5">5</div>   </div>   <div class="node_4">     4<div class="node_5">5</div>     <div class="node_5">5</div>   </div></div> <div class="node_3">3   <div class="node_4">4     <div class="node_5">5</div>     <div class="node_5">5</div>   </div>   <div class="node_4">4     <div class="node_5">5</div>     <div class="node_5">5</div>   </div> </div></div><div class="node_2">2<div class="node_3">3   <div class="node_4">4     <div class="node_5">5</div>     <div class="node_5">5</div>   </div>   <div class="node_4">4     <div class="node_5">5</div>     <div class="node_5">5</div>   </div></div> <div class="node_3">3    <div class="node_4">4     <div class="node_5">5</div>     <div class="node_5">5</div>   </div>   <div class="node_4">4     <div class="node_5">5</div>     <div class="node_5">5</div>   </div> </div></div></div><input type="button" value="前序" />  <!--触动前序排列的按钮 根左右--><input type="button" value="中序" />  <!--触动中序排列的按钮 左根右--><input type="button" value="后序" />  <!--触动后序排列的按钮 左右根--><script type="text/javascript">var btn = document.getElementsByTagName("input"),    preBtn = btn[0],    inBtn = btn[1],    lastBtn = btn[2],    treeNodes = [], //按照遍历节点顺序记录的各个节点    treeRoot = document.getElementsByClassName('node_1')[0],   //获得根节点    timer = null; //用做清除setInterval();window.onload = function(){preBtn.onclick = function(){reset();            //重置所有节点样式，为初始状态preOrder(treeRoot); //前序遍历二叉树changeColor();      //按照遍历的顺序改变节点的颜色}inBtn.onclick = function(){reset();inOrder(treeRoot);changeColor();}lastBtn.onclick = function(){reset();lastOrder(treeRoot);changeColor();}}function preOrder(node){if(!(node == null)){treeNodes.push(node);      preOrder(node.firstElementChild);preOrder(node.lastElementChild);}}function inOrder(node){if(!(node == null)){inOrder(node.firstElementChild);treeNodes.push(node);inOrder(node.lastElementChild);}}function lastOrder(node){if(!(node == null)){lastOrder(node.firstElementChild);lastOrder(node.lastElementChild);treeNodes.push(node);}}function changeColor(){var i = 0;treeNodes[i].style.backgroundColor = "#63B8FF";    //使遍历的第一个节点改变背景颜色timer = setInterval(function(argument){i++;if(i < treeNodes.length){treeNodes[i-1].style.backgroundColor = "white";  //使上一个节点变成原始颜色treeNodes[i].style.backgroundColor = "#63B8FF";  //使当前节点改变背景颜色}else{clearInterval(timer);                            //清除clearInterval()treeNodes[i-1].style.backgroundColor = "white";  //因为又执行i++，所以如果改变组后一个元素颜色需要i-1}},700)}function reset(){                 //重置函数treeNodes = [];clearInterval(timer);var divs = document.getElementsByTagName('div');for (var i = 0; i < divs.length; i++) {divs[i].style.backgroundColor = "white";}}</script></body></html>

3、我认为js遍历二叉树有两个核心，第一当然是自己要明白二叉树三种遍历规则，第二个就是是否能够理解递归函数，这两点理解了，就没什么了

阅读全文

0 0