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 相关文章推荐
JavaScript的变量作用域深入理解
Oct 25 Javascript
监控 url fragment变化的js代码
Apr 19 Javascript
浅析LigerUi开发中谨慎载入common.css文件
Jul 09 Javascript
让table变成exls的示例代码
Mar 24 Javascript
JavaScript中的Math.sin()方法使用详解
Jun 15 Javascript
AngularJS 面试题集锦
Sep 06 Javascript
原生JS:Date对象全面解析
Sep 06 Javascript
jQuery验证表单格式的使用方法
Jan 10 Javascript
用jQuery实现可输入多选下拉组合框实例代码
Jan 18 Javascript
微信小程序 自定义对话框实例详解
Jan 20 Javascript
详解Vue 2.0封装axios笔记
Jun 22 Javascript
JavaScript回调函数callback用法解析
Jan 14 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 cc攻击代码与防范方法
2012/10/18 PHP
详解PHP实现支付宝小程序用户授权的工具类
2018/12/25 PHP
PHP7匿名类的用法示例
2019/04/05 PHP
微信公众平台开发教程⑤ 微信扫码支付模式介绍
2019/04/10 PHP
javascript高亮效果的二种实现方法
2008/09/14 Javascript
IE和firefox浏览器的event事件兼容性汇总
2009/12/06 Javascript
angularJS结合canvas画图例子
2015/02/09 Javascript
jquery实现在网页指定区域显示自定义右键菜单效果
2015/08/25 Javascript
avalon js实现仿google plus图片多张拖动排序附源码下载
2015/09/24 Javascript
jQuery+AJAX实现遮罩层登录验证界面(附源码)
2020/09/13 Javascript
JavaScript进阶练习及简单实例分析
2016/06/03 Javascript
第一次接触神奇的前端框架vue.js
2016/12/01 Javascript
使用vue-cli打包过程中的步骤以及问题的解决
2018/05/08 Javascript
Vue使用NProgress进度条的方法
2019/09/21 Javascript
[01:51]历届DOTA2国际邀请赛举办地回顾 TI9落地上海
2018/08/26 DOTA
python网络编程学习笔记(八):XML生成与解析(DOM、ElementTree)
2014/06/09 Python
Python中使用dom模块生成XML文件示例
2015/04/05 Python
Python 遍历子文件和所有子文件夹的代码实例
2016/12/21 Python
深入理解Python中的super()方法
2017/11/20 Python
python 打印直角三角形,等边三角形,菱形,正方形的代码
2017/11/21 Python
Python字符串逆序输出的实例讲解
2019/02/16 Python
Python多版本开发环境管理工具介绍
2019/07/03 Python
python递归法解决棋盘分割问题
2019/07/17 Python
Python3之字节串bytes与字节数组bytearray的使用详解
2019/08/27 Python
python2与python3爬虫中get与post对比解析
2019/09/18 Python
美国家居装饰和豪华家具购物网站:One Kings Lane
2018/12/24 全球购物
实习自我鉴定模板
2013/09/28 职场文书
工程承包协议书
2014/04/22 职场文书
政风行风自查自纠报告
2014/10/21 职场文书
2014年银行柜员工作总结
2014/11/12 职场文书
爱岗敬业事迹材料
2019/06/20 职场文书
用Python写一个简易版弹球游戏
2021/04/13 Python
Python中的min及返回最小值索引的操作
2021/05/10 Python
vue-cli4.5.x快速搭建项目
2021/05/30 Vue.js
OpenCV-Python直方图均衡化实现图像去雾
2021/06/07 Python
Python Pandas模块实现数据的统计分析的方法
2021/06/24 Python