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 相关文章推荐
多广告投放代码 推荐
Nov 13 Javascript
JavaScript 动态将数字金额转化为中文大写金额
May 14 Javascript
JavaScript 学习笔记(九)call和apply方法
Jan 11 Javascript
JavaScript高级程序设计(第3版)学习笔记5 js语句
Oct 11 Javascript
JavaScript实现同步于本地时间的动态时间显示方法
Feb 02 Javascript
jQuery实现鼠标双击Table单元格变成文本框及输入内容后更新到数据库的方法
Nov 25 Javascript
老生常谈JavaScript 正则表达式语法
Aug 20 Javascript
使用requirejs模块化开发多页面一个入口js的使用方式
Jun 14 Javascript
Vue.js组件高级特性实例详解
Dec 24 Javascript
vue中多个倒计时实现代码实例
Mar 27 Javascript
Node Express用法详解【安装、使用、路由、中间件、模板引擎等】
May 13 Javascript
原生js实现购物车
Sep 23 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
B2K与车机的中波PK
2021/03/02 无线电
php 分页原理详解
2009/08/21 PHP
php curl模拟post请求小实例
2013/11/13 PHP
php中session使用示例
2014/03/29 PHP
Joomla框架实现字符串截取的方法示例
2017/07/18 PHP
Laravel等框架模型关联的可用性浅析
2019/12/15 PHP
Mac系统下搭建Nginx+php-fpm实例讲解
2020/12/15 PHP
在JS中最常看到切最容易迷惑的语法(转)
2010/10/29 Javascript
js 获取坐标 通过JS得到当前焦点(鼠标)的坐标属性
2013/01/04 Javascript
javascript自动给文本url地址增加链接的方法分享
2014/01/20 Javascript
js 判断控件获得焦点的示例代码
2014/03/04 Javascript
javascript实现加载xml文件的方法
2015/11/24 Javascript
基于JavaScript实现动态添加删除表格的行
2016/02/01 Javascript
AngularJS向后端ASP.NET API控制器上传文件
2016/02/03 Javascript
JavaScript实现的鼠标响应颜色渐变效果完整实例
2017/02/18 Javascript
(模仿京东用户注册)用JQuery实现简单表单验证,初学者必看
2018/01/08 jQuery
Vue精简版风格概述
2018/01/30 Javascript
VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解
2018/11/30 Javascript
Bootstrap FileInput实现图片上传功能
2021/01/28 Javascript
Python实现文件信息进行合并实例代码
2018/01/17 Python
Python标准库笔记struct模块的使用
2018/02/22 Python
python远程连接服务器MySQL数据库
2018/07/02 Python
django做form表单的数据验证过程详解
2019/07/26 Python
Python实现串口通信(pyserial)过程解析
2019/09/25 Python
pycharm 使用anaconda为默认环境的操作
2021/02/05 Python
吃透移动端 Html5 响应式布局
2019/12/16 HTML / CSS
Vivo俄罗斯官方在线商店:中国智能手机品牌
2019/10/04 全球购物
培训班开班仪式主持词
2014/03/28 职场文书
一帮一活动总结
2014/05/08 职场文书
2014年国庆标语
2014/06/30 职场文书
商铺门前三包责任书
2014/07/25 职场文书
婚礼证婚人演讲稿
2014/09/13 职场文书
2014年办公室人员工作总结
2014/12/09 职场文书
幼儿园语言教学反思
2016/02/23 职场文书
python实现简单的聊天小程序
2021/07/07 Python
一级电子管军用接收机测评
2022/04/05 无线电