树结构之JavaScript
2017-01-09 00:07
302 查看
对于数据结构“树”,想必大家都熟悉,今儿,我们就再来回顾一下数据结构中的二叉树与树,并用JavaScript实现它们。
ps:树结构在前端中,很多地方体现得淋漓尽致,如Vue的虚拟DOM以及冒泡等等。
--概念--
二叉树是一种树形结构,它的特点是每个结点至多只有两棵子树(即二叉树中不存在度大于2的结点),并且,二叉树的子树有左右之分,其次序不能任意颠倒。
如下,就是一棵二叉树(注:下文二叉树相关例子,都以该二叉树为例):
代码稍长,请自行打开
好了,利用上述二叉树例子,我们可以自行测试下:
关于上述全部代码,见github。
ps:树结构在前端中,很多地方体现得淋漓尽致,如Vue的虚拟DOM以及冒泡等等。
二叉树 |
二叉树是一种树形结构,它的特点是每个结点至多只有两棵子树(即二叉树中不存在度大于2的结点),并且,二叉树的子树有左右之分,其次序不能任意颠倒。
如下,就是一棵二叉树(注:下文二叉树相关例子,都以该二叉树为例):
TreeNode.prototype = { constructor: TreeNode, _traverseAsDFS: function(node){//先根遍历 var self = this; if(node){ console.log(node.data); node.children.forEach(function(child){ if(child.children.length){ self._traverseAsDFS(child); }else{ console.log(child.data); } }); } }, traverseAsDFS: function(){ console.log('Depth_First Search'); this._traverseAsDFS(this); }, traverseAsBFS: function(){//按层次遍历 var queue = []; console.log('Breadth_First Search'); console.log(this.data); if(this.children.length){ queue.push(this); } while(queue.length){ let tempNode = queue.shift(); tempNode.children.forEach(function(child){ console.log(child.data); if(child.children.length){ queue.push(child); } }); } } };
代码稍长,请自行打开
好了,利用上述二叉树例子,我们可以自行测试下:
var treeNode = TreeNode('A', [ TreeNode('B', [TreeNode('E')]), TreeNode('C'), TreeNode('D') ]); treeNode.traverseAsDFS();//ABECD treeNode.traverseAsBFS();//ABCDE
关于上述全部代码,见github。
相关文章推荐
- 利用JavaScript 动态生成 树形结构
- JavaScript构造XML树结构
- 无限级菜单结构 与 Javascript 实现算法, 类 XMenu by shawl.qiu
- javascript之JSON结构
- 纯JavaScript树型目录结构
- javascript 浏览器对象结构
- javascript语言结构小记(一)
- Javascript利用递归生成企业部门树结构
- javascript动态树形结构的实现
- JavaScript DOM对象结构图
- javascript+css简单实现树形结构列表
- Javascript学习笔记(二)Javascript核心之语法结构
- 利用JavaScript实现树型结构的TreeView类
- javascript实现表现、结构、行为分离的选项卡效果!
- 利用JavaScript实现树型结构的TreeView类!(源代码,欢迎大家指教
- JavaScript构造XML树结构
- JavaScript 词法结构
- [转]PHP与Javascript之间复杂结构数据的传递
- javascript与jquery混合而成的动态无限树形结构的菜单
- javascript table排序 这个更简单了,不用改变现在的表格结构