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 相关文章推荐
js客户端快捷键管理类的较完整实现和应用
Jun 08 Javascript
jQuery中last()方法用法实例
Jan 06 Javascript
js实现表单检测及表单提示的方法
Aug 14 Javascript
KnockoutJS 3.X API 第四章之事件event绑定
Oct 10 Javascript
JAVA Web实时消息后台服务器推送技术---GoEasy
Nov 04 Javascript
深入浅出es6模板字符串
Aug 26 Javascript
bootstrap table实现双击可编辑、添加、删除行功能
Sep 27 Javascript
webpack搭建vue 项目的步骤
Dec 27 Javascript
jQuery实现ajax的嵌套请求案例分析
Feb 16 jQuery
微信小程序传值以及获取值方法的详解
Apr 29 Javascript
jQuery zTree插件使用简单教程
Aug 16 jQuery
node实现简单的增删改查接口实例代码
Aug 22 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中判断字符串是否全是中文或含有中文的实现代码
2011/09/16 PHP
php打印一个边长为N的实心和空心菱型的方法
2015/03/02 PHP
php计算整个目录大小的方法
2015/06/01 PHP
PHP面向对象详解(三)
2015/12/07 PHP
网页的标准,IMG不支持onload标签怎么办
2006/06/29 Javascript
JQuery模板插件 jquery.tmpl 动态ajax扩展
2011/11/10 Javascript
Firefox中使用outerHTML的2种解决方法
2014/06/07 Javascript
jquery图片切换插件
2015/03/16 Javascript
jquery控制页面部分刷新的方法
2015/06/24 Javascript
Bootstrap每天必学之模态框(Modal)插件
2016/04/26 Javascript
AngularJS基础 ng-src 指令简单示例
2016/08/03 Javascript
vue.js表格分页示例
2016/10/18 Javascript
利用ES6语法重构React组件详解
2017/03/02 Javascript
原生Aajax 和jQuery Ajax 写法个人总结
2017/03/24 jQuery
JS判断数组那点事
2017/10/10 Javascript
vue 使用vue-i18n做全局中英文切换的方法
2018/10/29 Javascript
JavaScript实现图片放大镜效果
2019/06/27 Javascript
jquery绑定事件 bind和on的用法与区别分析
2020/05/22 jQuery
python中文编码问题小结
2014/09/28 Python
Python检查和同步本地时间(北京时间)的实现方法
2018/12/03 Python
对pytorch网络层结构的数组化详解
2018/12/08 Python
对python 多个分隔符split 的实例详解
2018/12/20 Python
python3.6 tkinter实现屏保小程序
2019/07/30 Python
nginx搭建基于python的web环境的实现步骤
2020/01/03 Python
简单了解pytest测试框架setup和tearDown
2020/04/14 Python
HTML5 Plus 实现手机APP拍照或相册选择图片上传功能
2016/07/13 HTML / CSS
Lyle & Scott苏格兰金鹰官网:英国皇室御用品牌
2018/05/09 全球购物
安全生产演讲稿
2014/05/09 职场文书
文秘应届生求职信
2014/07/05 职场文书
法定代表人身份证明书
2014/09/10 职场文书
个人四风问题整改措施思想汇报
2014/10/04 职场文书
用人单位聘用意向书
2015/05/11 职场文书
公司董事任命书
2015/09/21 职场文书
创业计划书之小型广告公司
2019/10/22 职场文书
vue完美实现el-table列宽自适应
2021/05/08 Vue.js
一级电子管军用接收机测评
2022/04/05 无线电