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 相关文章推荐
DOM相关内容速查手册
Feb 07 Javascript
利用Dojo和JSON建立无限级AJAX动态加载的功能模块树
Mar 24 Javascript
Angular.js与Bootstrap相结合实现表格分页代码
Apr 12 Javascript
微信小程序 Image API实例详解
Sep 30 Javascript
Bootstrap字体图标无法正常显示的解决方法
Oct 08 Javascript
原生ajax处理json格式数据的实例代码
Dec 25 Javascript
关于在mongoose中填充外键的方法详解
Aug 14 Javascript
angular2路由之routerLinkActive指令【推荐】
May 30 Javascript
jQuery实现的别踩白块小游戏完整示例
Jan 07 jQuery
JavaScript常用内置对象用法分析
Jul 09 Javascript
微信小程序实现传递多个参数与事件处理
Aug 12 Javascript
Vue实现简单计算器
Jan 20 Vue.js
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
探讨:array2xml和xml2array以及xml与array的互相转化
2013/06/24 PHP
phpmyadmin配置文件现在需要绝密的短密码(blowfish_secret)的2种解决方法
2014/05/07 PHP
详解PHP素材图片上传、下载功能
2019/04/12 PHP
php输出控制函数和输出函数生成静态页面
2019/06/27 PHP
php pdo连接数据库操作示例
2019/11/18 PHP
js利用div背景,做一个竖线的效果。
2008/11/22 Javascript
JQuery的ready函数与JS的onload的区别详解
2013/11/21 Javascript
JQUERY 设置SELECT选中项代码
2014/02/07 Javascript
js闭包实例汇总
2014/11/09 Javascript
jquery利用拖拽方式在图片上添加热链接
2015/11/24 Javascript
JQuery实现Ajax加载图片的方法
2015/12/24 Javascript
教你如何终止JQUERY的$.AJAX请求
2016/02/23 Javascript
javascript 网页进度条简单实例
2017/02/22 Javascript
微信小程序 转发功能的实现
2017/08/04 Javascript
JS实现DOM节点插入操作之子节点与兄弟节点插入操作示例
2018/07/30 Javascript
JavaScript 高性能数组去重的方法
2018/09/20 Javascript
详解mpvue中使用vant时需要注意的onChange事件的坑
2019/05/16 Javascript
Laravel 如何在blade文件中使用Vue组件的示例代码
2020/06/28 Javascript
vue监听浏览器原生返回按钮,进行路由转跳操作
2020/09/09 Javascript
[02:32]“虐狗”镜头慎点 2016国际邀请赛中国区预选赛现场玩家采访
2016/06/28 DOTA
[46:49]完美世界DOTA2联赛PWL S3 access vs Rebirth 第二场 12.19
2020/12/24 DOTA
Python实现的快速排序算法详解
2017/08/01 Python
简单了解Python中的几种函数
2017/11/03 Python
查看Django和flask版本的方法
2018/05/14 Python
详解django使用include无法跳转的解决方法
2020/03/19 Python
Django-simple-captcha验证码包使用方法详解
2020/11/28 Python
Champion官网:美国冠军运动服装
2017/01/25 全球购物
CHARLES & KEITH英国官网:新加坡时尚品牌
2018/07/04 全球购物
电子狗项圈:eDog Australia
2019/12/04 全球购物
工程安全生产协议书
2014/11/21 职场文书
2015年建筑工程工作总结
2015/05/13 职场文书
党小组意见范文
2015/06/08 职场文书
教师个人工作总结范文2015
2015/10/14 职场文书
《春酒》教学反思
2016/02/22 职场文书
python函数指定默认值的实例讲解
2021/03/29 Python
Win11快速关闭所有广告推荐
2022/04/19 数码科技