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 相关文章推荐
简单时间提示DEMO从0开始一直进行计时
Nov 19 Javascript
javascript 兼容各个浏览器的事件
Feb 04 Javascript
jQuery使用$.ajax进行异步刷新的方法(附demo下载)
Dec 04 Javascript
基于JavaScript如何制作遮罩层对话框
Jan 26 Javascript
有关jquery与DOM节点操作方法和属性记录
Apr 15 Javascript
老生常谈js动态添加事件--- 事件委托
Jul 19 Javascript
JavaScript中的工厂函数(推荐)
Mar 08 Javascript
Dropify.js图片宽高自适应的方法
Nov 27 Javascript
详解Node.js中path模块的resolve()和join()方法的区别
Oct 29 Javascript
Vue + Elementui实现多标签页共存的方法
Jun 12 Javascript
vue和小程序项目中使用iconfont的方法
May 19 Javascript
详解JavaScript自定义函数
Jul 29 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 strstr查找字符串中是否包含某些字符的查找函数
2010/06/03 PHP
PHP性能优化准备篇图解PEAR安装
2011/12/05 PHP
PHP代码保护--Zend Guard的使用详解
2013/06/03 PHP
Zend Framework教程之配置文件application.ini解析
2016/03/10 PHP
php脚本守护进程原理与实现方法详解
2017/07/20 PHP
jQuery(1.3.2) 7行代码搞定跟随屏幕滚动的层
2009/05/21 Javascript
jQuery删除节点的三个方法即remove()detach()和empty()
2013/12/27 Javascript
jquery实现点击消失的代码
2014/03/03 Javascript
JavaScript实现的经典文件树菜单效果
2015/09/08 Javascript
跟我学习javascript创建对象(类)的8种方法
2015/11/20 Javascript
jQuery+jsp实现省市县三级联动效果(附源码)
2015/12/03 Javascript
深入剖析JavaScript面向对象编程
2016/07/12 Javascript
完美解决jQuery 鼠标快速滑过后,会执行多次滑出的问题
2016/12/08 Javascript
轻松理解JavaScript闭包
2017/03/14 Javascript
小程序异步问题之多个网络请求依次执行并依次收集请求结果
2019/05/05 Javascript
通过vue写一个瀑布流插件代码实例
2019/09/07 Javascript
浅谈vue项目利用Hbuilder打包成APP流程,以及遇到的坑
2020/09/12 Javascript
讲解Python的Scrapy爬虫框架使用代理进行采集的方法
2016/02/18 Python
python实现微信定时每天和女友发送消息
2019/04/29 Python
详解python中自定义超时异常的几种方法
2019/07/29 Python
python写一个随机点名软件的实例
2019/11/28 Python
Python基本类型的连接组合和互相转换方式(13种)
2019/12/16 Python
Python利用多线程同步锁实现多窗口订票系统(推荐)
2019/12/22 Python
python中if及if-else如何使用
2020/06/02 Python
keras 读取多标签图像数据方式
2020/06/12 Python
python爬虫要用到的库总结
2020/07/28 Python
html特殊符号示例 html特殊字符编码对照表
2014/01/14 HTML / CSS
西班牙汉普顿小姐:购买帆布鞋和太阳镜
2016/10/23 全球购物
DJI全球:DJI Global
2021/03/15 全球购物
银行见习期自我鉴定
2014/01/29 职场文书
大学生精神文明先进个人事迹材料
2014/05/02 职场文书
抗洪救灾先进集体事迹材料
2014/05/26 职场文书
领导干部四风问题自我剖析材料
2014/09/25 职场文书
《我和小伙伴》教学反思
2016/02/20 职场文书
导游词之开封禹王台风景区
2019/12/02 职场文书
vue响应式原理与双向数据的深入解析
2021/06/04 Vue.js