详解JavaScript树结构

前端之家收集整理的这篇文章主要介绍了详解JavaScript树结构前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

对于数据结构“树”,想必大家都熟悉,今儿,我们就再来回顾一下数据结构中的二叉树与树,并用JavaScript实现它们。

ps:树结构在前端中,很多地方体现得淋漓尽致,如Vue的虚拟DOM以及冒泡等等。

二叉树

--概念--

二叉树是一种树形结构,它的特点是每个结点至多只有两棵子树(即二叉树中不存在度大于2的结点),并且,二叉树的子树有左右之分,其次序不能任意颠倒。

如下,就是一棵二叉树(注:下文二叉树相关例子,都以该二叉树为例):

且,遍历二叉树(traversing binary tree)有三种常用方式,如下:

1)、先序遍历二叉树 (根左右)

若二叉树为空,则空操作;否则

--访问根结点;

--先序遍历左子树;

--先序遍历右子树。

2)、中序遍历二叉树(左根右)

若二叉树为空,则空操作;否则

--中序遍历左子树;

--访问根结点;

--中序遍历右子树。

3)、后序遍历二叉树(左右根)

若二叉树为空,则空操作;否则

--后序遍历左子树;

--后序遍历右子树;

--访问根结点。

好了,了解了二叉树以及遍历方式,那么,接下来我们就一起用JavaScrip来实现下吧,当然采用链式存储结构。

首先

,利用JavaScript构造函数建立二叉树结点,如下:

然后

,我们可以通过遍历二叉树的算法,构建一棵二叉树,如下,采用先序序列建立一棵二叉树方法

最后

,就是遍历一棵二叉树咯,分别为先序遍历(PreOrderTraverse)、中序遍历(InOrderTraverse)以及后序遍历(PostOrderTraverse),如下:

好了,利用上述二叉树例子,我们可以自行测试下:

--概念--

树是n(n>=0)个结点的有限集。在任意一棵非空树中,有且仅有一个特定的称为根(root)的结点,当n>1时,其余结点可分为m(m>0)个互不相交的有限集,其中每个集合本身又是一棵树,称为根的子树。当然,二叉树肯定属于树咯。

如下,就是一棵树(注:下文树的相关例子,都以该树为例):

且,遍历一棵多孩子树,有两种常用遍历方式,如下:

1) 、先根遍历

,和深度优先搜索(Depth_First Search)遍历类似。都是利用栈来遍历元素,如下:

2) 、按层次遍历

,和广度优先搜索(Breadth_First Search)遍历类似。都是利用队列来遍历元素,如下:

好了,了解了树以及遍历方式,那么,接下来我们就一起用JavaScrip来实现下吧,当然也是采用链式存储结构。

首先,利用JavaScript建立树结点,如下:

根据上述TreeNode构造函数,我们可以将例子中的树,表示如下:

接着,就是编写遍历树方法咯,分别为先根遍历和按层次遍历,如下:

好了,利用上述二叉树例子,我们可以自行测试下:

关于上述全部代码,见

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持编程之家!

原文链接:https://www.f2er.com/js/42759.html

猜你在找的JavaScript相关文章