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 相关文章推荐
关于火狐(firefox)及ie下event获取的两种方法
Dec 27 Javascript
页面载入结束自动调用js函数示例
Sep 23 Javascript
JS实现的鼠标跟随代码(卡通手型点击效果)
Oct 26 Javascript
浅谈angularjs中响应回车事件
Apr 24 Javascript
详解vue2.0脚手架的webpack 配置文件分析
May 27 Javascript
关于Vue单页面骨架屏实践记录
Dec 13 Javascript
详解Vue SSR( Vue2 + Koa2 + Webpack4)配置指南
Nov 13 Javascript
微信小程序如何获取用户收货地址
Nov 27 Javascript
Vue实现导航栏点击当前标签变色功能
Aug 19 Javascript
vue项目使用$router.go(-1)返回时刷新原来的界面操作
Jul 26 Javascript
微信小程序选择图片控件
Jan 19 Javascript
vue+element ui实现锚点定位
Jun 29 Vue.js
微信小程序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
如何将一个表单同时提交到两个地方处理
2006/10/09 PHP
JavaScript实现Sleep函数的代码
2007/03/04 Javascript
让 JavaScript 轻松支持函数重载 (Part 2 - 实现)
2009/08/04 Javascript
javascript 自定义事件初探
2009/08/21 Javascript
IE 上下滚动展示模仿Marquee机制
2009/12/20 Javascript
jquery 图片Silhouette Fadeins渐显效果
2010/02/07 Javascript
基于JQuery的一个简单的鼠标跟随提示效果
2010/09/23 Javascript
jquery.pagination.js 无刷新分页实现步骤分享
2012/05/23 Javascript
Javascript实现动态菜单添加的实例代码
2013/07/05 Javascript
javascript读写XML实现广告轮换(兼容IE、FF)
2013/08/09 Javascript
JavaScript实现向OL列表内动态添加LI元素的方法
2015/03/21 Javascript
jQuery Validate表单验证深入学习
2015/12/18 Javascript
需灵活掌握的Bootstrap预定义排版类 你精通吗?
2016/06/20 Javascript
基于JS实现限时抢购倒计时间表代码
2017/05/09 Javascript
React路由管理之React Router总结
2018/05/10 Javascript
微信小程序实现复选框效果
2018/12/28 Javascript
Vue实现类似Spring官网图片滑动效果方法
2019/03/01 Javascript
20多个小事例带你重温ES10新特性(小结)
2019/09/29 Javascript
王纯业的Python学习笔记 下载
2007/02/10 Python
Python HTML解析模块HTMLParser用法分析【爬虫工具】
2019/04/05 Python
Python Django基础二之URL路由系统
2019/07/18 Python
tensorflow生成多个tfrecord文件实例
2020/02/17 Python
PyQt5 如何让界面和逻辑分离的方法
2020/03/24 Python
Python下载网易云歌单歌曲的示例代码
2020/08/12 Python
英国精品买手店:Browns Fashion
2016/09/29 全球购物
澳大利亚新奇小玩意网站:Yellow Octopus
2017/12/28 全球购物
德国机场停车位比较和预订网站:Ich-parke-billiger
2018/01/08 全球购物
高尔夫球鞋、服装、手套和装备:FootJoy
2018/12/15 全球购物
Hotels.com拉丁美洲:从豪华酒店到经济型酒店的预定优惠和折扣
2019/12/09 全球购物
几个Linux面试题笔试题
2012/12/01 面试题
2014学年自我鉴定
2014/02/23 职场文书
信用卡结清证明怎么写
2014/09/13 职场文书
组织生活会表态发言材料
2014/10/17 职场文书
2019年关于小学生课外阅读情况的分析报告
2019/12/02 职场文书
SpringBoot快速入门详解
2021/07/21 Java/Android
yyds什么意思?90后已经听不懂00后讲话了……
2022/02/03 杂记