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 相关文章推荐
javascript 嵌套的函数(作用域链)
Mar 15 Javascript
JavaScript高级程序设计 阅读笔记(十七) js事件
Aug 14 Javascript
Jquery显示、隐藏元素以及添加删除样式
Aug 09 Javascript
使用node.js半年来总结的 10 条经验
Aug 18 Javascript
谈谈JavaScript中的几种借用方法
Aug 09 Javascript
微信小程序 弹幕功能简单实例
Feb 14 Javascript
详解Weex基于Vue2.0开发模板搭建
Mar 20 Javascript
浅谈angular.copy() 深拷贝
Sep 14 Javascript
vuex 使用文档小结篇
Jan 11 Javascript
vue框架搭建之axios使用教程
Jul 11 Javascript
mpvue中使用flyjs全局拦截的实现代码
Sep 13 Javascript
JavaScript装箱及拆箱boxing及unBoxing用法解析
Jun 15 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
PHP删除目录及目录下所有文件的方法详解
2013/06/06 PHP
php生成随机字符串可指定纯数字、纯字母或者混合的
2014/04/18 PHP
php实现的百度搜索某地天气的小偷代码
2014/04/23 PHP
为百度UE编辑器上传图片添加水印功能
2015/04/16 PHP
支持中文、字母、数字的PHP验证码
2015/05/04 PHP
PHP中substr函数字符串截取用法分析
2016/01/07 PHP
PHP模拟http请求的方法详解
2016/11/09 PHP
php设计模式之适配器模式实例分析【星际争霸游戏案例】
2020/04/07 PHP
完整显示当前日期和时间的JS代码
2007/09/17 Javascript
JavaScript中的变量声明早于赋值分析
2012/03/01 Javascript
alert中断settimeout计时功能
2013/07/26 Javascript
获取数组中最大最小值方法js代码(自写)
2013/08/12 Javascript
jQuery选择器中含有空格的使用示例及注意事项
2013/08/25 Javascript
js获取checkbox复选框选中的选项实例
2014/08/24 Javascript
js使用递归解析xml
2014/12/12 Javascript
wap手机端解决返回上一页的js实例
2016/12/08 Javascript
NodeJS如何实现同步的方法示例
2018/08/24 NodeJs
js实现网页同时进行多个倒计时功能
2019/02/25 Javascript
JS三级联动代码格式实例详解
2019/12/30 Javascript
Vue实现简单的跑马灯
2020/05/25 Javascript
浅谈Python的垃圾回收机制
2016/12/17 Python
用python写个自动SSH登录远程服务器的小工具(实例)
2017/06/17 Python
pandas数据预处理之dataframe的groupby操作方法
2018/04/13 Python
Python实现的爬取网易动态评论操作示例
2018/06/06 Python
python 拼接文件路径的方法
2018/10/23 Python
python实现随机加减法生成器
2020/02/24 Python
Pycharm配置PyQt5环境的教程
2020/04/02 Python
如何使用localstorage代替cookie实现跨域共享数据问题
2018/04/18 HTML / CSS
数据库连接池的工作原理
2012/09/26 面试题
服装销售人员求职自我评价
2013/09/26 职场文书
班组建设经验交流材料
2014/05/12 职场文书
2015新教师教学工作总结
2015/07/22 职场文书
优秀家长事迹材料(2016推荐版)
2016/02/29 职场文书
swagger如何返回map字段注释
2021/07/03 Java/Android
ElementUI实现el-form表单重置功能按钮
2021/07/21 Javascript
一篇文章带你深入了解Mysql触发器
2021/08/02 MySQL