JavaScript实现二叉树的先序、中序及后序遍历方法详解


Posted in Javascript onOctober 26, 2017

本文实例讲述了JavaScript实现二叉树的先序、中序及后序遍历方法。分享给大家供大家参考,具体如下:

之前学数据结构的时候,学了二叉树的先序、中序、后序遍历的方法,并用C语言实现了,下文是用js实现二叉树的3种遍历,并以动画的形式展现出遍历的过程。

整个遍历过程还是采用递归的思想,原理很粗暴也很简单

先序遍历的函数:

function preOrder(node){
  if(!(node==null)){
    divList.push(node);
    preOrder(node.firstElementChild);
    preOrder(node.lastElementChild);
  }
}

中序遍历的函数:

function inOrder(node) {
  if (!(node == null)) {
    inOrder(node.firstElementChild);
    divList.push(node);
    inOrder(node.lastElementChild);
  }
}

后序遍历的函数:

function postOrder(node) {
  if (!(node == null)) {
    postOrder(node.firstElementChild);
    postOrder(node.lastElementChild);
    divList.push(node);
  }
}

颜色变化函数:

function changeColor(){
  var i=0;
  divList[i].style.backgroundColor = 'blue';
  timer=setInterval(function(argument){
    i++;
    if(i<divList.length){
      divList[i-1].style.backgroundColor="#fff";
      divList[i].style.backgroundColor="blue";
    }
    else{
      divList[divList.length-1].style.backgroundColor="#fff";
    }
  },500)
}

核心代码如上,本来想写深度优先遍历和广度优先遍历。后来发现二叉树深度优先遍历和先序遍历相同。改日总结一下树的BFS和DFS。

全部代码如下:

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style>
    .root{
      display: flex;
      padding: 20px;
      width: 1000px;
      height: 300px;border: 1px solid #000000;
      margin: 100px auto;
      margin-bottom: 10px;
      justify-content: space-between;
    }
    .child_1{
      display: flex;
      padding: 20px;
      width: 450px;
      height: 260px;border: 1px solid red;
      justify-content: space-between;
    }
    .child_2{
      display: flex;
      padding: 20px;
      width: 170px;
      height: 220px;border: 1px solid green;
      justify-content: space-between;
    }
    .child_3{
      display: flex;
      padding: 20px;
      width: 35px;
      height: 180px;border: 1px solid blue;
      justify-content: space-between;
    }
    input{
      margin-left: 100px;
      width: 60px;
      height: 40px;
      font:20px italic;
    }
  </style>
</head>
<body>
<div class="root">
  <div class="child_1">
    <div class="child_2">
      <div class="child_3"></div>
      <div class="child_3"></div>
    </div>
    <div class="child_2">
      <div class="child_3"></div>
      <div class="child_3"></div>
    </div>
  </div>
  <div class="child_1">
    <div class="child_2">
      <div class="child_3"></div>
      <div class="child_3"></div>
    </div>
    <div class="child_2">
      <div class="child_3"></div>
      <div class="child_3"></div>
    </div>
  </div>
</div>
<input type="button" value="先序">
<input type="button" value="中序">
<input type="button" value="后序">
<script type="text/javascript" src="遍历.js"></script>
</body>
</html>

js:

/**
 * Created by hp on 2016/12/22.
 */
var btn = document.getElementsByTagName('input'),
  preBtn = btn[0],
  inBtn = btn[1],
  postBtn = btn[2],
  treeRoot = document.getElementsByClassName('root')[0],
  divList = [],
  timer = null;
window.onload=function(){
  preBtn.onclick = function () {
    reset();
    preOrder(treeRoot);
    changeColor();
  }
  inBtn.onclick = function () {
    reset();
    inOrder(treeRoot);
    changeColor();
  }
  postBtn.onclick = function () {
    reset();
    postOrder(treeRoot);
    changeColor();
  }
}
/*先序遍历*/
function preOrder(node){
  if(!(node==null)){
    divList.push(node);
    preOrder(node.firstElementChild);
    preOrder(node.lastElementChild);
  }
}
/*中序遍历*/
function inOrder(node) {
  if (!(node == null)) {
    inOrder(node.firstElementChild);
    divList.push(node);
    inOrder(node.lastElementChild);
  }
}
/*后序遍历*/
function postOrder(node) {
  if (!(node == null)) {
    postOrder(node.firstElementChild);
    postOrder(node.lastElementChild);
    divList.push(node);
  }
}
/*颜色变化函数*/
function changeColor(){
  var i=0;
  divList[i].style.backgroundColor = 'blue';
  timer=setInterval(function(argument){
    i++;
    if(i<divList.length){
      divList[i-1].style.backgroundColor="#fff";
      divList[i].style.backgroundColor="blue";
    }
    else{
      divList[divList.length-1].style.backgroundColor="#fff";
    }
  },500)
}
function reset(){
  divList=[];
  clearInterval(timer);
  var divs=document.getElementsByTagName("div");
  for(var i=0;i<divs.length;i++){
    divs[i].style.backgroundColor="#fff";
  }
}

由此可见,二叉树的遍历思想是一样的。之前一直把JS看做是写各种特效的语言,现在向来是too naive了。

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
一个可以兼容IE FF的加为首页与加入收藏实现代码
Nov 02 Javascript
js 字符串转化成数字的代码
Jun 29 Javascript
jquery实现带复选框的表格行选中删除时高亮显示
Aug 01 Javascript
JS自调用匿名函数具体实现
Feb 11 Javascript
javascript检查浏览器是否支持flash的实现代码
Aug 14 Javascript
JS 面向对象之继承---多种组合继承详解
Jul 10 Javascript
Ajax异步获取html数据中包含js方法无效的解决方法
Feb 20 Javascript
jQuery滚动插件scrollable.js用法分析
May 25 jQuery
vue组件Prop传递数据的实现示例
Aug 17 Javascript
jQuery实现的简单无刷新评论功能示例
Nov 08 jQuery
微信小程序实现简单input正则表达式验证功能示例
Nov 30 Javascript
微信小程序scroll-view实现字幕滚动
Jul 14 Javascript
JavaScript实现树的遍历算法示例【广度优先与深度优先】
Oct 26 #Javascript
详述 Sublime Text 打开 GBK 格式中文乱码的解决方法
Oct 26 #Javascript
node.js的exports、module.exports与ES6的export、export default深入详解
Oct 26 #Javascript
详解Webstorm 新建.vue文件支持高亮vue语法和es6语法
Oct 26 #Javascript
Node.js中环境变量process.env的一些事详解
Oct 26 #Javascript
Sublime Text新建.vue模板并高亮(图文教程)
Oct 26 #Javascript
vue+swiper实现组件化开发的实例代码
Oct 26 #Javascript
You might like
Windows7下的php环境配置教程
2015/02/28 PHP
thinkphp查询,3.X 5.0方法(亲试可行)
2017/06/17 PHP
jQuery hover 延时器实现代码
2011/03/12 Javascript
javascript 中that的含义示例介绍
2014/05/14 Javascript
jQuery搜索子元素的方法
2015/02/10 Javascript
超漂亮的jQuery图片轮播特效
2015/11/24 Javascript
探讨JavaScript标签位置的存放与功能有无关系
2016/01/15 Javascript
第一次接触Bootstrap框架
2016/10/24 Javascript
Bootstrap 3.x打印预览背景色与文字显示异常的解决
2016/11/06 Javascript
使用jquery实现的循环连续可停顿滚动实例
2016/11/23 Javascript
将鼠标焦点定位到文本框最后(代码分享)
2017/01/11 Javascript
Bootstrap警告(Alerts)的实现方法
2017/03/22 Javascript
Javarscript中模块(module)、加载(load)与捆绑(bundle)详解
2017/05/28 Javascript
使用Vue完成一个简单的todolist的方法
2017/12/01 Javascript
Nodejs处理异常操作示例
2018/12/25 NodeJs
vueScroll实现移动端下拉刷新、上拉加载
2019/03/22 Javascript
JS实现容器模块左右拖动效果
2020/01/14 Javascript
JavaScript实现手机号码 3-4-4格式并控制新增和删除时光标的位置
2020/06/02 Javascript
[06:53]2018DOTA2国际邀请赛寻真——勇于创新的Vici Gaming
2018/08/14 DOTA
Python实现的批量下载RFC文档
2015/03/10 Python
Python中super的用法实例
2015/05/28 Python
Python网站验证码识别
2016/01/25 Python
Python 正则表达式入门(中级篇)
2016/12/07 Python
利用Python代码实现数据可视化的5种方法详解
2018/03/25 Python
python解决字符串倒序输出的问题
2018/06/25 Python
Python3+OpenCV2实现图像的几何变换(平移、镜像、缩放、旋转、仿射)
2019/05/13 Python
Python上下文管理器类和上下文管理器装饰器contextmanager用法实例分析
2019/11/07 Python
django连接mysql数据库及建表操作实例详解
2019/12/10 Python
django admin后管定制-显示字段的实例
2020/03/11 Python
没编程基础可以学python吗
2020/06/17 Python
css3的focus-within选择器的使用
2020/05/11 HTML / CSS
给校长的建议书300字
2014/05/16 职场文书
社区党支部公开承诺书
2015/04/29 职场文书
女方家长婚礼答谢词
2015/09/29 职场文书
安全学习心得体会范文
2016/01/18 职场文书
python基础之爬虫入门
2021/05/10 Python