【经典回放】多种语言系列数据结构算法：二叉树（JavaScript版）

1 二叉树类的设计以及二叉树遍历

要完成二叉树的类设计，最好把链表下的Node.js复制过来，相比链表的结点，二叉树仅仅是多了一个结点指针而已。略加修改后，就是：

function TNODE(DATA)
{
this.Data=DATA;
this.lChild=null;
this.rChild=null;
this.SetLChild=function (LCHILD){this.lChild=LCHILD;}
this.GetLChild=function (){return this.lChild;}
this.SetRChild=function (RCHILD){this.rChild=RCHILD;}
this.GetRChild=function (){return this.rChild;}
this.GetData=function (){return this.Data;}
}

在这个类中，用：

SetLChild()、GetLChild()  两个方法来设置、读出该结点的左孩子；

SetRChild()、GetRChild()  两个方法来设置、读出该结点的右孩子；

SetData()、GetData()     两个方法来设置、读出该结点的数值。

要测试这个类，也很容易，注意再次复制二叉树下的a1.html，略加修改就是：

<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>二叉树测试程序</title><SCRIPT TYPE="TEXT/JAVASCRIPT" src="TNode0.js"></SCRIPT><script type="text/javascript">function Trav(T){var s;if(T==undefined||T==null) return;Trav(T.GetLChild());document.write(T.GetData()+'<br>');Trav(T.GetRChild());}function fun(){var A='AA';var B='BB';var C='CC';var D='DD';var TA=new TNODE(A);var TB=new TNODE(B);var TC=new TNODE(C);var TD=new TNODE(D);TA.SetLChild(TB);TA.SetRChild(TC);TB.SetRChild(TD);		Trav(TA);}</script></head><body bgcolor="#FFFFFF"><div><input type="button" id=BUTTON1 value="开始测试" onclick='fun()'/></div></body>
</html>

注意这个程序的第5行，一定要加载TNode0.js，否则无法构造二叉树。

第7到14行是一个典型的递归二叉树遍历，其中第12行打印遍历结果的语句，说明它是按中序遍历打印结果的。

第15开始的函数fun()，是构造一个简单的二叉树，然后在第27行进行遍历。

从程序本身而言，没有任何复杂的地方，直接点开T1.html就显示了结果。

2 IE8下JavaScript程序的调试

JavaScript编程，最大的麻烦是缺乏一个好的编程平台，往往这类简单的程序，都是在记事本这样的程序里编写的，但必要的调试手段还是需要的。目前，很多浏览器都自己带有JavaScrip程序调试工具，比较常用的有两种：IE8、Chrome两种浏览器。IE8是WINDOWS系统默认的浏览器，而谷歌的Chrome则非常小，并且功能异常强大，我们下面先看在IE8下如何调试JvaaScrip程序。

用IE8打开T1.HTML文件，然后点开菜单：工具->开发人员工具，就是：

图 1

则显示下面的界面：

图 2

注意按下选项卡：脚本，如图3，就会看到我们的程序。

 

图 3

注意看上面的按钮：启动调试，鼠标按下该按钮。然后看左边程序行号，选第17行的“17”位置处、鼠标点下，就是这样的结果：

图 4

这个功能是给该行上加上断点，所谓断点就是程序运行到这里要停止下来，做完这些工作后，回到浏览器界面里，按下网页上按钮：开始测试，让程序开始运行，此时程序会跳到上述加断点的位置处、并停下来，就是：

图 5

注意此时的界面，它分割成两个部分，按下右边界面的按钮：局部变量，有：

图 6

如果按下F10、F11（含义同VC一致），会逐个语句执行并看到结果，如：

图 7

从图7我们可以看到这些变量的结果确实是我们所要的。按F11逐步进Trav()函数，就会看到这个树的遍历情况。

谷歌浏览器chrome的调试过程和IE8差别不大，仅仅是界面有差异，由于谷歌浏览器并没有IE8浏览器的文件打开菜单，所以你可以用鼠标点中T1.HTML文件，直接拖进浏览器界面里即可，注意谷歌浏览器的调试功能是在：

图 8

  该功能隐藏很深，但功能确实不错。值得注意的是谷歌浏览器支持HTML5，而IE8则不支持。

学会浏览器下调试JavaScript的另一个好处是：你可以直接对一个网站的程序进行这样的调试，这在过去是不能想象的事情。由于有了这样的功能，一度让很多网站的安全防护遭到解破，但很快，相当数量的网站其安全体系也有了质的飞跃，所以一个工具本身的好坏是很难评价的，但总体说来：勤奋者手中有好的工具、那么好处是显而易见的事情。

3 复杂数据类型对象的二叉树构造以及遍历

对JavaScrip这样的计算机语言而言，它的变量本身没有什么特定的类型概念，所以本身就是泛型的，但我们还是做一个结点数据类型复杂的二叉树来完成一个实验。

复制链表下的ElemType.js过来，这个类是：

function ElemType(SNO,SNAME,SAGE)
{this.sNo=SNO;this.sName=SNAME;this.sAge=SAGE;this.GetSNO=function(){return this.sNo;}this.GetSNAME=function(){return this.sName;}this.GetSAGE=function(){return this.sAge;}
}

这个类虽然简单但也有合适的数据类型。为此，我们就要修改T1.html中结点的数据，就是这样的：

                   var A=new ElemType(20102000,'A',19);

                   var B=new ElemType(20102001,'B',20);

                   var C=new ElemType(20102002,'C',21);

                   var D=new ElemType(20102003,'D',22);

然后和T1.HEML一样，完成一个简单的二叉树，就是：

<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>二叉树测试程序</title><SCRIPT TYPE="TEXT/JAVASCRIPT" src="ElemType.js"></SCRIPT><SCRIPT TYPE="TEXT/JAVASCRIPT" src="TNode0.js"></SCRIPT><script type="text/javascript">function Trav(T){var s;if(T==undefined||T==null) return;Trav(T.GetLChild());s=T.GetData();document.write(s.GetSNO()+'  '+s.GetSNAME()+'  '+s.GetSAGE()+'<br>');Trav(T.GetRChild());}function fun(){var A=new ElemType(20102000,'A',19);var B=new ElemType(20102001,'B',20);var C=new ElemType(20102002,'C',21);var D=new ElemType(20102003,'D',22);var TA=new TNODE(A);var TB=new TNODE(B);var TC=new TNODE(C);var TD=new TNODE(D);TA.SetLChild(TB);TA.SetRChild(TC);TB.SetRChild(TD);		Trav(TA);}</script></head><body bgcolor="#FFFFFF"><div><input type="button" id=BUTTON1 value="开始测试" onclick='fun()'/></div></body>
</html>

表4 复杂数据类型的二叉树遍历，见T2.html

注意上面程序的变更：

第5行：要引用ElemType.js，否则我们没办法构造学生类型数据；

由于JavaScript的数据类型本身就是泛型，所以二叉树类不需要任何修改。

第8行开始的遍历函数Trav()，由于每个结点类型成为ElemType这样的三列数据，所以要显示一行就必须把三列分开显示，如第14行。运行T2.html，会看到这个树的遍历结果。

4 回调模式传输遍历结果

在C#下dt.c已经显示了这个技术的全貌，这样的递归函数就是这样的；

function Trav(T,preTrav,inTrav,posTrav)
{if(T==undefined||T==null) return;if(!(preTrav==undefined||preTrav==null)) preTrav(T);Trav(T.GetLChild(),preTrav,inTrav,posTrav);if(!(inTrav==undefined||inTrav==null)) inTrav(T);Trav(T.GetRChild(),preTrav,inTrav,posTrav);if(!(posTrav==undefined||posTrav==null)) posTrav(T);
}

在这个函数里，参数:

T：      遍历中二叉树的结点对象；

preTrav：先序遍历处理函数；

inTrav： 中序遍历处理函数；

posTrav：后序遍历处理函数；

把这个函数写进二叉树类中，全部就是：

function TNODE(DATA)
{
this.Data=DATA;
this.lChild=null;
this.rChild=null;
this.SetLChild=function (LCHILD){this.lChild=LCHILD;}
this.GetLChild=function (){return this.lChild;}
this.SetRChild=function (RCHILD){this.rChild=RCHILD;}
this.GetRChild=function (){return this.rChild;}
this.GetData=function (){return this.Data;}
function Trav(T,preTrav,inTrav,posTrav)
{if(T==undefined||T==null) return;if(!(preTrav==undefined||preTrav==null)) preTrav(T);Trav(T.GetLChild(),preTrav,inTrav,posTrav);if(!(inTrav==undefined||inTrav==null)) inTrav(T);Trav(T.GetRChild(),preTrav,inTrav,posTrav);if(!(posTrav==undefined||posTrav==null)) posTrav(T);
}
this.Traverse=function(preTrav,inTrav,posTrav){Trav(this,preTrav,inTrav,posTrav);}
}

注意这个类是在文件TNode1.js中。为了测试这个类，编写网页程序如下：

<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>二叉树测试程序</title><SCRIPT TYPE="TEXT/JAVASCRIPT" src="TNode1.js"></SCRIPT><script type="text/javascript">function P1(T){document.write(T.GetData()+'<br>');}function fun(){var A='AA';var B='BB';var C='CC';var D='DD';var TA=new TNODE(A);var TB=new TNODE(B);var TC=new TNODE(C);var TD=new TNODE(D);TA.SetLChild(TB);TA.SetRChild(TC);TB.SetRChild(TD);		TA.Traverse(P1,null,null);}</script></head><body bgcolor="#FFFFFF"><div><input type="button" id=BUTTON1 value="开始测试" onclick='fun()'/></div></body>
</html>

注意第7行，这个函数P1()仅仅是打印结点的值，注意在第24行，TA结点的遍历用P1作为实参传递给遍历函数，这样，这个网页会打印出二叉树的先序遍历结果。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/287084.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Fiddler之解决https链接返回数据显示乱码问题

Fiddler之解决https链接返回数据显示乱码问题

1 、问题 我网页访问淘宝&#xff0c;然后F12查看关键链接&#xff0c;返回的数据里面有json各式的数据&#xff0c;然后我通过关键字在Fiddler里面找到链接&#xff0c;然后查看返回的内容是乱码。 2 、解决办法 然后这样设置&#xff0c;再去查看SyntaxView或者Raw都可以看到…
阅读更多...
android上传图片被旋转,input上传照片旋转解决办法

android上传图片被旋转,input上传照片旋转解决办法

需求很简单&#xff1a;h5拍照上传照片&#xff0c;然后显示出来问题在&#xff1a;上传之后的图片在PC&#xff0c;IOS端均能正常显示&#xff0c;Android端显示的则是被旋转90度的。直接上代码下面这个方法传入file对象&#xff0c;然后会去除掉照片中的exIf信息&#xff0c;…
阅读更多...
（12）python 的列表我从没想过会那么好用

（12）python 的列表我从没想过会那么好用

本系列文章将会以通俗易懂的对话方式进行教学&#xff0c;对话中将涵盖了新手在学习中的一般问题。此系列将会持续更新&#xff0c;包括别的语言以及实战都将使用对话的方式进行教学&#xff0c;基础编程语言教学适用于零基础小白&#xff0c;之后实战课程也将会逐步更新。 若…
阅读更多...
html5 语义化标签

html5 语义化标签

html5 语义化标签 在HTML 5出来之前&#xff0c;我们用div来表示页面章节&#xff0c;但是这些div都没有实际意义。&#xff08;即使我们用css样式的id和class形容这块内容的意义&#xff09;。这些标签只是我们提供给浏览器的指令&#xff0c;只是定义一个网页的某些部分。但…
阅读更多...
Android之实现首尾带圆角的多颜色水平条

Android之实现首尾带圆角的多颜色水平条

1 效果图 3 代码实现 这里我们采用PercentRelativeLayout布局，首尾我们用半圆shape实现，代码如下 color.xml <color name="progress_first">#1ebBd5</color><color name="progress_second">#f36f53</color><color name=&…
阅读更多...
（9）有一些人在学习编程的时候总以为代码是死板的

（9）有一些人在学习编程的时候总以为代码是死板的

本系列文章将会以通俗易懂的对话方式进行教学&#xff0c;对话中将涵盖了新手在学习中的一般问题。此系列将会持续更新&#xff0c;包括别的语言以及实战都将使用对话的方式进行教学&#xff0c;基础编程语言教学适用于零基础小白&#xff0c;之后实战课程也将会逐步更新。 若…
阅读更多...
.NET性能优化-推荐使用Collections.Pooled

.NET性能优化-推荐使用Collections.Pooled

简介性能优化就是如何在保证处理相同数量的请求情况下占用更少的资源&#xff0c;而这个资源一般就是CPU或者内存&#xff0c;当然还有操作系统IO句柄、网络流量、磁盘占用等等。但是绝大多数时候&#xff0c;我们就是在降低CPU和内存的占用率。之前分享的内容都有一些局限性&a…
阅读更多...
避免活跃性危险（第十章）

避免活跃性危险（第十章）

2019独角兽企业重金招聘Python工程师标准>>> 避免活跃性危险 在安全性与活跃性之间通常存在着某种制衡&#xff0c;我们使用加锁机制来确保线程安全&#xff0c;但如果过度地使用加锁&#xff0c;则可能导致“锁顺序死锁”。同样&#xff0c;我们使用线程池和信号量…
阅读更多...
（10）C#偷懒的开始永无止境的循环？

（10）C#偷懒的开始永无止境的循环？

本系列文章将会以通俗易懂的对话方式进行教学&#xff0c;对话中将涵盖了新手在学习中的一般问题。此系列将会持续更新&#xff0c;包括别的语言以及实战都将使用对话的方式进行教学&#xff0c;基础编程语言教学适用于零基础小白&#xff0c;之后实战课程也将会逐步更新。 若…
阅读更多...
活照片 android,活照片app安卓

活照片 android,活照片app安卓

活照片app是当前国内一款最新的图片处理应用软件&#xff0c;能帮助大家快速进行最新的手机拍照、处理功能&#xff0c;当前活照片app已经推出了安卓、苹果版本&#xff0c;可以帮助大家一键修图&#xff0c;将你的图片变得更加有趣。活照片app功能&#xff1a;它可以让你的照片…
阅读更多...
Jwt隐藏大坑，通过源码揭秘

Jwt隐藏大坑，通过源码揭秘

前言JWT是目前最为流行的接口认证方案之一&#xff0c;有关JWT协议的详细内容&#xff0c;请参考&#xff1a;https://jwt.io/introduction今天分享一下在使用JWT在项目中遇到的一个问题&#xff0c;主要是一个协议的细节&#xff0c;非常容易被忽略&#xff0c;如果不是自己遇…
阅读更多...
文件传输基础——Java IO流

文件传输基础——Java IO流

一、文件的编码 1 package com.study.io;2 3 4 /**5 * 测试文件编码6 */7 public class EncodeDemo {8 9 /** 10 * param args 11 * throws Exception 12 */ 13 public static void main(String[] args) throws Exception { 14 String s&quo…
阅读更多...
keepalived实现nginx的高可用（双主模型）

keepalived实现nginx的高可用（双主模型）

实验环境&#xff1a;RS1&#xff1a;rip&#xff08;172.16.125.7&#xff09;&#xff0c;安装httpd软件包&#xff1b;RS2&#xff1a;rip&#xff08;172.16.125.8&#xff09;&#xff0c;安装httpd软件包&#xff1b;director1&#xff08;7-1.lcs.com&#xff09;&#…
阅读更多...
【必懂C++】第一个程序当然是HelloWorld呀 01

【必懂C++】第一个程序当然是HelloWorld呀 01

作者简介 作者名&#xff1a;1_bit 简介&#xff1a;CSDN博客专家&#xff0c;2020年博客之星TOP5&#xff0c;蓝桥签约作者。15-16年曾在网上直播&#xff0c;带领一批程序小白走上程序员之路。欢迎各位小白加我咨询我相关信息&#xff0c;迷茫的你会找到答案。系列教程将会…
阅读更多...
打造操作系统根社区 统信Deepin屹立于浪潮之颠

打造操作系统根社区 统信Deepin屹立于浪潮之颠

如果把芯片比作信息系统的大脑的话&#xff0c;那么操作系统毫无疑问就是信息系统的灵魂。在过去几十年里&#xff0c;我国信息产业饱受“缺芯少魂”的困扰&#xff0c;国内市场基本被微软、谷歌、苹果、IBM、红帽等外商垄断。诚然&#xff0c;一些国内厂商推出过基于Fedora、u…
阅读更多...
Androd之在图片右上角显示红色圆圈里面数字提醒

Androd之在图片右上角显示红色圆圈里面数字提醒

1 需求 在图片右上角显示红色圆圈里面数字提醒 2 效果如图 3 关键代码 item_loca.xml <?xml version="1.0" encoding="utf-8"?> <RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android"android:layout_wid…
阅读更多...
Bean

Bean

Bean spring中把一切配置到IOC容器(其实就是那个xml文件)里面的对象都称之为bean。 转载于:https://www.cnblogs.com/Renyi-Fan/p/7780935.html
阅读更多...
【必懂C++】C++可真是个“固执”的小可爱 02

【必懂C++】C++可真是个“固执”的小可爱 02

作者简介 作者名&#xff1a;1_bit 简介&#xff1a;CSDN博客专家&#xff0c;2020年博客之星TOP5&#xff0c;蓝桥签约作者。15-16年曾在网上直播&#xff0c;带领一批程序小白走上程序员之路。欢迎各位小白加我咨询我相关信息&#xff0c;迷茫的你会找到答案。系列教程将会…
阅读更多...
Flutter之window系统下配置开发环境以及在Android Studio里面运行hello word

Flutter之window系统下配置开发环境以及在Android Studio里面运行hello word

1 、window系统配置Flutter开发环境 1&#xff09;下载Flutter的SDK 如果电脑安装了Git&#xff0c;直接到https://github.com/flutter/flutter/这里下载&#xff0c;但是需要翻墙 git clone https://github.com/flutter/flutter.git 或者到lutter官网下载 https://flutter.d…
阅读更多...
WPF效果第一百八十五篇之又玩TreeView

WPF效果第一百八十五篇之又玩TreeView

最近又有新的开发任务了,然后我提前瞄了一眼需要实现的效果;发现其中一个和我去年玩耍的有点类似;正好好久也没玩了,那就趁着这个机会再次学习一下;闲话也不多扯了,上效果:2、来看看我的实现方式:3、①是一个分组的数据模板<HierarchicalDataTemplate x:Key"GroupDataT…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023