html5实现树形结构,JavaScript 实现树结构 (一)

JavaScript 实现树结构 (一)

JavaScript 实现树结构(一)

一, 树结构简介

1.1. 简单了解树结构

什么是树?

真实的树:

树的特点:

树一般都有一个根, 连接着根的是树干;

树干会发生分叉, 形成许多树枝, 树枝会继续分化成更小的树枝;

树枝的最后是叶子;

现实生活中很多结构都是树的抽象, 模拟的树结构相当于旋转 180° 的树.

树结构对比于数组 / 链表 / 哈希表有哪些优势呢:

数组:

优点: 可以通过下标值访问, 效率高;

缺点: 查找数据时需要先对数据进行排序, 生成有序数组, 才能提高查找效率; 并且在插入和删除元素时, 需要大量的位移操作;

链表:

优点: 数据的插入和删除操作效率都很高;

缺点: 查找效率低, 需要从头开始依次查找, 直到找到目标数据为止; 当需要在链表中间位置插入或删除数据时, 插入或删除的效率都不高.

哈希表:

优点: 哈希表的插入 / 查询 / 删除效率都非常高;

缺点: 空间利用率不高, 底层使用的数组中很多单元没有被利用; 并且哈希表中的元素是无序的, 不能按照固定顺序遍历哈希表中的元素; 而且不能快速找出哈希表中最大值或最小值这些特殊值.

树结构:

优点: 树结构综合了上述三种结构的优点, 同时也弥补了它们存在的缺点(虽然效率不一定都比它们高), 比如树结构中数据都是有序的, 查找效率高; 空间利用率高; 并且可以快速获取最大值和最小值等.

总的来说: 每种数据结构都有自己特定的应用场景

树结构:

树 (Tree): 由 n(n ≥ 0) 个节点构成的有限集合. 当 n = 0 时, 称为空树.

对于任一棵非空树(n> 0), 它具备以下性质:

数中有一个称为根 (Root) 的特殊节点, 用 r 表示;

其余节点可分为 m(m> 0)个互不相交的有限集合 T~1~,T~2~,...,T~m~, 其中每个集合本身又是一棵树, 称为原来树的子树(SubTree).

树的常用术语: