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 相关文章推荐
如何在Mozilla Gecko 用Javascript加载XSL
Jan 09 Javascript
JQuery Tips(3) 关于$()包装集内元素的改变
Dec 14 Javascript
利用js制作html table分页示例(js实现分页)
Apr 25 Javascript
剖析Node.js异步编程中的回调与代码设计模式
Feb 16 Javascript
判断数组是否包含某个元素的js函数实现方法
May 19 Javascript
js实时获取窗口大小变化的实例代码
Nov 18 Javascript
JavaScript使用原型和原型链实现对象继承的方法详解
Apr 05 Javascript
深入理解Promise.all
Aug 08 Javascript
Vue中CSS动画原理的实现
Feb 13 Javascript
使用VueRouter的addRoutes方法实现动态添加用户的权限路由
Jun 03 Javascript
JS实现轮播图效果
Jan 11 Javascript
JavaScript碰撞检测原理及其实现代码
Mar 12 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/01/06 PHP
php自定义函数实现JS的escape的方法示例
2016/07/07 PHP
pjblog中的UBBCode.js
2007/04/25 Javascript
window.parent与window.openner区别介绍
2012/04/12 Javascript
html超链接打开窗口大小的方法
2013/03/05 Javascript
jQuery对象和Javascript对象之间转换的实例代码
2013/03/20 Javascript
jquery checkbox实现单选小例
2013/11/27 Javascript
jquery如何把数组变为字符串传到服务端并处理
2014/04/30 Javascript
JavaScript设置获取和设置属性的方法
2015/03/04 Javascript
基于vue 开发中出现警告问题去除方法
2018/01/25 Javascript
jquery获取select选中值的文本,并赋值给另一个输入框的方法
2018/08/21 jQuery
Vue.js上传图片到阿里云OSS存储的方法示例
2018/12/13 Javascript
JavaScript的级联函数用法简单示例【链式调用】
2019/03/26 Javascript
vue实现图片上传预览功能
2019/12/23 Javascript
vue+ElementUI 关闭对话框清空验证,清除form表单的操作
2020/08/06 Javascript
vue使用screenfull插件实现全屏功能
2020/09/17 Javascript
实例讲解Python中的私有属性
2014/08/21 Python
Python正则表达式如何进行字符串替换实例
2016/12/28 Python
Python Socket传输文件示例
2017/01/16 Python
Python数据结构与算法之图的广度优先与深度优先搜索算法示例
2017/12/14 Python
python 通过xml获取测试节点和属性的实例
2018/03/31 Python
Django如何将URL映射到视图
2019/07/29 Python
将python包发布到PyPI和制作whl文件方式
2019/12/25 Python
彻底弄明白CSS3的Media Queries(跨平台设计)
2010/07/27 HTML / CSS
YOOX台湾:意大利奢侈品电商
2018/10/13 全球购物
捷科时代的软件测试笔试题
2015/11/09 面试题
市场部规章制度
2014/01/24 职场文书
幼师自我鉴定
2014/02/01 职场文书
环保志愿者活动方案
2014/08/14 职场文书
实习指导老师意见
2015/06/04 职场文书
2015秋季开学典礼主持词
2015/07/16 职场文书
《青山不老》教学反思
2016/02/22 职场文书
学校运动会开幕词
2016/03/03 职场文书
SQL语句中JOIN的用法场景分析
2021/07/25 SQL Server
MySQL利用UNION连接2个查询排序失效详解
2021/11/20 MySQL
python数字图像处理数据类型及颜色空间转换
2022/06/28 Python