JS中的二叉树遍历

JavaScript03

JS中的二叉树遍历,第1张

栈、队列、链表等数据结构,都是顺序数据结构。而树是非顺序数据结构。树型结构是一类非常重要的非线性结构。直观地,树型结构是以分支关系定义的层次结构。

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

遍历二叉树(Traversing Binary Tree):是指按指定的规律对二叉树中的每个结点访问一次且仅访问一次。

二叉树有深度遍历和广度遍历, 深度遍历有前序、 中序和后序三种遍历方法。二叉树的前序遍历可以用来显示目录结构等;中序遍历可以实现表达式树,在编译器底层很有用;后序遍历可以用来实现计算目录内的文件及其信息等。

上述二叉树(a+b*c)-d/e在js中可以用对象的形式表示出来:

先递归遍历左子树,从最左的一个左子树存入数组;然后回溯遍历双亲结点,再是右子树,这样递归循环。

将当前结点压入栈,然后将左子树当做当前结点,如果当前结点为空,将双亲结点取出来,将值保存进数组,然后将右子树当做当前结点,进行循环。

先走左子树,当左子树没有孩子结点时,将此结点的值放入数组中,然后回溯遍历双亲结点的右结点,递归遍历。

广度优先遍历二叉树(层序遍历)是用队列来实现的,广度遍历是从二叉树的根结点开始,自上而下逐层遍历;在同一层中,按照从左到右的顺序对结点逐一访问。

js 中二叉树的深度遍历与广度遍历(递归实现与非递归实现)

二叉树与JavaScript

Draft.js 使用EditorState来保存数据结构顶层,其中记录了用于展示数据的所有数据结构。本文将通过提供一系列的简单示例来简单介绍 Draft.js 的数据结构。

Draft.js 基于 immutable.js 实现了一种不可变的数据结构,基于这种数据结构, Draft.js 实现了单项数据流,即 event ->onChange ->EditorState

我在 CodePen 上面实现了一个简单的Demo用于展示EditorState,你可以在上面尝试一下。

上图展示了一个完整的EditorState,我们可以轻易的猜测出一些属性的含义,比如currentContent记录了当前编辑器中展示内容的状态,selection中标识当前的选区,redoStack和undoStack分别是撤销、重做栈,而EditorState则提供了操作这些属性的顶层方法。

Draft 将样式分为块级样式与内联样式,块级样式之间线性排列,不可嵌套,内联样式则用数组记录,可以重叠。

当我在 draft 中随意输入一些文字的时候,text将会记录下文字内容,而此时用于记录块级样式的type值为 unstyled

现在我们将H1(块级元素)应用于文本,我们可以发现用于标识块级样式的type值变为了 header-one ,当我们继续在该行输入的时候,将会同样被赋予H1样式。通过上述的数据结构我们可以发现,由于块级样式由type所规定,所以块级样式之间不可被嵌套,即不会出现无序列表嵌套有序列表的情况出现。

对于同一块级元素中的文本内容, draft 将其按照字符进行拆分,每一个字符的内联样式用数组进行展示,由此可以解决内联样式的嵌套问题。

Entity并不是一个难以理解的数据类型,Entity数据主要用于展示一些不可被分割的数据类型,例如图片、mention、超链接等。

典型场景就是mention类型,详细来说,我们在日常使用中会在富文本编辑器中提及一些人, @xxx 的数据类型要求是一个统一整体,一旦 @xxx 中有某一个字符被删除,就有可能会出现 @ 出的名字和 @ 的对象不一致的情况。

在上图中,我将插入的图片数据结构打印了出来,我们可以发现这是一个Entity,记录了data,mutability与type, Draft.js 向外暴露了一个顶层接口,当Entity数据被注入的时候,可以通过这个接口来设计数据对象的展现方式,如下图