javascript实现二叉树遍历的代码


Posted in Javascript onJune 08, 2017

前言:

紧接着上篇 二叉树的javascript实现 ,来说一下二叉树的遍历。

本次一本正经的胡说八道,以以下这个二叉树为例子进行遍历:

javascript实现二叉树遍历的代码

接着是要引入二叉树实现的代码:

function Node(data, left, right) {
  this.data = data;
  this.left = left;
  this.right = right;
  this.show = show;
}
function show() {
  return this.data;
}

function BST() {
  this.root = null;
  this.insert = insert;
}
function insert(data) {
  var n = new Node(data, null, null);
  if (this.root == null) {
   this.root = n;
  }
  else {
   var current = this.root;
   var parent;
   while (true) {
     parent = current;
     if (data < current.data) {
      current = current.left;
      if (current == null) {
        parent.left = n;
        break;
      }
     }
     else {
      current = current.right;
      if (current == null) {
        parent.right = n;
        break;
      }
     }
   }
  }
}

二叉树遍历的分类

二叉树的遍历分为先序、中序、后序遍历。这里说到的先序、中序、后序是相对于父节点来说。父节点的值先输出就是先序,三者间它在中间输出就是中序,最后输出就是后序。至于那个是父节点是相对而言的,因为除了叶子节点(最底下一层节点),其他每个节点都可以是父节点。

javascript实现二叉树遍历的代码

先序遍历

先序遍历就是,先打印父节点,然后是左子节点(左子树),然后再打印右子节点(子树)。

function preOrder(node) {
  if (!(node == null)) {
   console.log(node.show() + " ");
   preOrder(node.left);
   preOrder(node.right);
  }
}

// 给BST类添加先序遍历的成员方法
function BST() {
  this.root = null;
  this.insert = insert;
  this.preOrder = preOrder;
}

preOrder函数是递归实现的,应该说二叉树的遍历都是递归实现的。可能有些人会因为先序遍历的特征:“先打印父节点,然后是左子节点(左子树),然后再打印右子节点(子树)” 而陷入一个错误的想法,这想法是什么请看下图:

javascript实现二叉树遍历的代码

注意红框部分,父节点是10,左子节点是3,右子节点是18,因为上面的结论,可能会错误地认为打印的顺序是10 → 3 → 18,然而事实并非如此[捂脸],真是的顺序是:先打印10,然后是打印左子树,打印完左子树的全部节点后,才开始打印以10位父节点的右子树:

javascript实现二叉树遍历的代码

这个时候,你的脑海就该这样想:

javascript实现二叉树遍历的代码

然后是这样想:

javascript实现二叉树遍历的代码

如此类推打印完以10为父节点的左子树,然后也是以这样的方式打印以10为父节点的右子树,按着这种 拆分代替的思想 来理解会更好明白二叉树的遍历。

然后最终,先序遍历改二叉树的顺序是:

javascript实现二叉树遍历的代码

按图的输出顺序是:10 -> 3 -> 2 -> 4 -> 9 -> 8 -> 9 -> 18 -> 13 -> 21

最后来实践一下,先序遍历:

var bst = new BST();
var nums = [10, 3, 18, 2, 4, 13, 21, 9, 8, 9];
for(var i = 0; i < nums.length; i++) {
  bst.insert(nums[i]);
}
bst.preOrder(bst.root);

javascript实现二叉树遍历的代码

这里强调一下,输出顺序和插入顺序有关的,因为你插入顺序不同生成的二叉树也是不同的。有疑问的可以去 二叉树的javascript实现 细看一下,有比较明白的说明了二叉树,也可以实验一下:

javascript实现二叉树遍历的代码

中序遍历

看完先序遍历,已经可以类推到很多和中序、后序遍历相关的知识点。中序遍历的特征是:先打印左子树(左子节点),接着打印父节点,最后打印右子树(右子节点)。

function inOrder(node) {
  if (!(node == null)) {
   inOrder(node.left);
   console.log(node.show() + " ");
   inOrder(node.right);
  }
}

// 给BST类添加该成员方法
function BST() {
  this.root = null;
  this.insert = insert;
  this.preOrder = preOrder;
  this.inOrder = inOrder;
}

中序遍历的打印顺序:

javascript实现二叉树遍历的代码

按上图的输出顺序是:2 -> 3 -> 4 -> 8 -> 9 -> 9 -> 10 -> 13 -> 18 -> 21

接着是,实践一下中序遍历:

javascript实现二叉树遍历的代码

后序遍历

function postOrder(node) {
  if (!(node == null)) {
   postOrder(node.left);
   postOrder(node.right);
   console.log(node.show() + " ");
  }
}

// 给BST类添加该成员方法
function BST() {
  this.root = null;
  this.insert = insert;
  this.preOrder = preOrder;
  this.inOrder = inOrder;
  this.postOrder = postOrder;
}

后序遍历的打印顺序

javascript实现二叉树遍历的代码

按上图的输出顺序是:2 -> 8 -> 9 -> 9 -> 4 -> 3 -> 13 -> 21 -> 18  -> 10

javascript实现二叉树遍历的代码

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery 简单图片导航插件jquery.imgNav.js
Mar 17 Javascript
Js 时间函数getYear()的使用问题探讨
Apr 01 Javascript
深入浅出分析javaScript中this用法
May 09 Javascript
简单谈谈node.js 版本控制 nvm和 n
Oct 15 Javascript
基于JavaScript实现高德地图和百度地图提取行政区边界经纬度坐标
Jan 22 Javascript
动态生成的DOM不会触发onclick事件的原因及解决方法
Aug 06 Javascript
input输入框内容实时监测(附代码)
Aug 15 Javascript
Vue实现侧边菜单栏手风琴效果实例代码
May 31 Javascript
微信小程序 image组件遇到的问题
May 28 Javascript
vue实现页面滚动到底部刷新
Aug 16 Javascript
JS随机密码生成算法
Sep 23 Javascript
一看就会的vuex实现登录验证(附案例)
Jan 09 Javascript
微信小程序tabbar不显示解决办法
Jun 08 #Javascript
javascript实现二叉树的代码
Jun 08 #Javascript
微信小程序搜索组件wxSearch实例详解
Jun 08 #Javascript
JS去掉字符串前后空格、阻止表单提交的实现代码
Jun 08 #Javascript
angular实现图片懒加载实例代码
Jun 08 #Javascript
微信小程序日历组件calendar详解及实例
Jun 08 #Javascript
php简单数据库操作类的封装
Jun 08 #Javascript
You might like
简单实用的网站PHP缓存类实例
2014/07/18 PHP
sina的lightbox效果。
2007/01/09 Javascript
学习从实践开始之jQuery插件开发 菜单插件开发
2012/05/03 Javascript
javascript在网页中实现读取剪贴板粘贴截图功能
2014/06/07 Javascript
JS实现简洁、全兼容的拖动层实例
2015/05/13 Javascript
JavaScript函数中关于valueOf和toString的理解
2016/06/14 Javascript
AngularJS  自定义指令详解及实例代码
2016/09/14 Javascript
JS短信验证码倒计时功能的实现(没有验证码,只有倒计时)
2016/10/27 Javascript
利用jQuery来动态为属性添加或者删除属性的简单方法
2016/12/02 Javascript
JS实现控制图片显示大小的方法【图片等比例缩放功能】
2017/02/18 Javascript
socket.io学习教程之深入学习篇(三)
2017/04/29 Javascript
node.js学习之断言assert的使用示例
2017/09/28 Javascript
Angular4实现鼠标悬停3d倾斜效果
2017/10/25 Javascript
vue.js 底部导航栏 一级路由显示 子路由不显示的解决方法
2018/03/09 Javascript
Javascript格式化并高亮xml字符串的方法及注意事项
2018/08/13 Javascript
解决vue keep-alive 数据更新的问题
2018/09/21 Javascript
JavaScript栈和队列相关操作与实现方法详解
2018/12/07 Javascript
详解Next.js页面渲染的优化方案
2019/01/27 Javascript
使用Node.js在深度学习中做图片预处理的方法
2019/09/18 Javascript
vue样式穿透 ::v-deep的具体使用
2020/06/04 Javascript
node.js如何根据URL返回指定的图片详解
2020/10/21 Javascript
采用python实现简单QQ单用户机器人的方法
2014/07/03 Python
python中lambda函数 list comprehension 和 zip函数使用指南
2014/09/28 Python
python爬虫 正则表达式使用技巧及爬取个人博客的实例讲解
2017/10/20 Python
Python使用googletrans报错的解决方法
2018/09/25 Python
深入解析Python小白学习【操作列表】
2019/03/23 Python
python自动下载图片的方法示例
2020/03/25 Python
Css3新特性应用之视觉效果实例
2016/12/12 HTML / CSS
使用phonegap获取设备的一些信息方法
2017/03/31 HTML / CSS
使用SVG实现提示框功能的示例代码
2020/06/05 HTML / CSS
社会实践心得体会
2014/01/03 职场文书
月度优秀员工获奖感言
2014/08/16 职场文书
2014年食品安全工作总结
2014/12/04 职场文书
2015年售票员工作总结
2015/04/29 职场文书
2016年学校十一国庆节活动总结
2016/04/01 职场文书
几款流行的HTML5 UI框架比较(小结)
2021/04/08 HTML / CSS