樹(shù)結(jié)構(gòu)之JavaScript
對(duì)于數(shù)據(jù)結(jié)構(gòu)“樹(shù)”,想必大家都熟悉,今兒,我們就再來(lái)回顧一下數(shù)據(jù)結(jié)構(gòu)中的二叉樹(shù)與樹(shù),并用JavaScript實(shí)現(xiàn)它們。
ps:樹(shù)結(jié)構(gòu)在前端中,很多地方體現(xiàn)得淋漓盡致,如Vue的虛擬DOM以及冒泡等等。
二叉樹(shù)
--概念--
二叉樹(shù)是一種樹(shù)形結(jié)構(gòu),它的特點(diǎn)是每個(gè)結(jié)點(diǎn)至多只有兩棵子樹(shù)(即二叉樹(shù)中不存在度大于2的結(jié)點(diǎn)),并且,二叉樹(shù)的子樹(shù)有左右之分,其次序不能任意顛倒。
如下,就是一棵二叉樹(shù)(注:下文二叉樹(shù)相關(guān)例子,都以該二叉樹(shù)為例):
且,遍歷二叉樹(shù)(traversing binary tree)有三種常用方式,如下:
1)、先序遍歷二叉樹(shù) (根左右)
若二叉樹(shù)為空,則空操作;否則
--訪問(wèn)根結(jié)點(diǎn);
--先序遍歷左子樹(shù);
--先序遍歷右子樹(shù)。
例如,上述例子中的二叉樹(shù),遍歷結(jié)果如下:
2)、中序遍歷二叉樹(shù)(左根右)
若二叉樹(shù)為空,則空操作;否則
--中序遍歷左子樹(shù);
--訪問(wèn)根結(jié)點(diǎn);
--中序遍歷右子樹(shù)。
例如,上述例子中的二叉樹(shù),遍歷結(jié)果如下:
3)、后序遍歷二叉樹(shù)(左右根)
若二叉樹(shù)為空,則空操作;否則
--后序遍歷左子樹(shù);
--后序遍歷右子樹(shù);
--訪問(wèn)根結(jié)點(diǎn)。
例如,上述例子中的二叉樹(shù),遍歷結(jié)果如下:
好了,了解了二叉樹(shù)以及遍歷方式,那么,接下來(lái)我們就一起用JavaScrip來(lái)實(shí)現(xiàn)下吧,當(dāng)然采用鏈?zhǔn)酱鎯?chǔ)結(jié)構(gòu)。
首先,利用JavaScript構(gòu)造函數(shù)建立二叉樹(shù)結(jié)點(diǎn),如下:
function TreeNode(){ this.data = null;//該節(jié)點(diǎn)數(shù)據(jù) this.lchild = null;//左子樹(shù) this.rchild = null;//右子樹(shù) };
然后,我們可以通過(guò)遍歷二叉樹(shù)的算法,構(gòu)建一棵二叉樹(shù),如下,采用先序序列建立一棵二叉樹(shù)方法:
/* *method:采用先序序列建立二叉樹(shù) *@params: nodeList(Array) --樹(shù)節(jié)點(diǎn),以先序序列存入數(shù)組中,null代表空節(jié)點(diǎn) */ TreeNode.createBiTree = function(nodeList){ var i = 0; return (function getNode(){ var node = null, val = nodeList[i++]; if(!val){ node = null; }else{ node = new TreeNode(); node.data = val; node.lchild = getNode(); node.rchild = getNode(); } return node; })(); };
最后,就是遍歷一棵二叉樹(shù)咯,分別為先序遍歷(PreOrderTraverse)、中序遍歷(InOrderTraverse)以及后序遍歷(PostOrderTraverse),如下:
TreeNode.prototype = { constructor: TreeNode, _PreOrderTraverse: function(node){ if(node){ console.log(node.data); this._PreOrderTraverse(node.lchild); this._PreOrderTraverse(node.rchild); } }, PreOrderTraverse: function(){ console.log('PreOrder:'); this._PreOrderTraverse(this); }, _InOrderTraverse: function(node){ if(node){ this._InOrderTraverse(node.lchild); console.log(node.data); this._InOrderTraverse(node.rchild); } }, InOrderTraverse: function(){ console.log('InOrder:'); this._InOrderTraverse(this); }, _PostOrderTraverse: function(node){ if(node){ this._PostOrderTraverse(node.lchild); this._PostOrderTraverse(node.rchild); console.log(node.data); } }, PostOrderTraverse: function(){ console.log('PostOrder:'); this._PostOrderTraverse(this); } };
好了,利用上述二叉樹(shù)例子,我們可以自行測(cè)試下:
var treeNode = null, nodeList = ['A', 'B', 'C', null, null, 'D', 'E', null, 'G', null, null, 'F', null, null, null]; //getting a binary tree from nodeList treeNode = TreeNode.createBiTree(nodeList); //traversing the tree of treeNode treeNode.PreOrderTraverse();//ABCDEGF treeNode.InOrderTraverse();//CBEGDFA treeNode.PostOrderTraverse();//CGEFDBA
樹(shù)
--概念--
樹(shù)是n(n>=0)個(gè)結(jié)點(diǎn)的有限集。在任意一棵非空樹(shù)中,有且僅有一個(gè)特定的稱為根(root)的結(jié)點(diǎn),當(dāng)n>1時(shí),其余結(jié)點(diǎn)可分為m(m>0)個(gè)互不相交的有限集,其中每個(gè)集合本身又是一棵樹(shù),稱為根的子樹(shù)。當(dāng)然,二叉樹(shù)肯定屬于樹(shù)咯。
如下,就是一棵樹(shù)(注:下文樹(shù)的相關(guān)例子,都以該樹(shù)為例):
且,遍歷一棵多孩子樹(shù),有兩種常用遍歷方式,如下:
1) 、先根遍歷,和深度優(yōu)先搜索(Depth_First Search)遍歷類似。都是利用棧來(lái)遍歷元素,如下:
2) 、按層次遍歷,和廣度優(yōu)先搜索(Breadth_First Search)遍歷類似。都是利用隊(duì)列來(lái)遍歷元素,如下:
好了,了解了樹(shù)以及遍歷方式,那么,接下來(lái)我們就一起用JavaScrip來(lái)實(shí)現(xiàn)下吧,當(dāng)然也是采用鏈?zhǔn)酱鎯?chǔ)結(jié)構(gòu)。
首先,利用JavaScript建立樹(shù)結(jié)點(diǎn),如下:
/* *@Params: data --節(jié)點(diǎn)數(shù)據(jù) children -- 所有孩子結(jié)點(diǎn) */ function TreeNode(data, children){ if(!(this instanceof TreeNode)){ return new TreeNode(data, children); } this.data = data || null; this.children = children || []; };
根據(jù)上述TreeNode構(gòu)造函數(shù),我們可以將例子中的樹(shù),表示如下:
var treeNode = TreeNode('A', [ TreeNode('B', [TreeNode('E')]), TreeNode('C'), TreeNode('D') ]);
接著,就是編寫(xiě)遍歷樹(shù)方法咯,分別為先根遍歷和按層次遍歷,如下:
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); } }); } } };
好了,利用上述二叉樹(shù)例子,我們可以自行測(cè)試下:
var treeNode = TreeNode('A', [ TreeNode('B', [TreeNode('E')]), TreeNode('C'), TreeNode('D') ]); treeNode.traverseAsDFS();//ABECD treeNode.traverseAsBFS();//ABCDE
關(guān)于上述全部代碼,見(jiàn)github。
以上就是本文的全部?jī)?nèi)容,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助,同時(shí)也希望多多支持腳本之家!
- JavaScript幾種形式的樹(shù)結(jié)構(gòu)菜單
- 詳解JavaScript樹(shù)結(jié)構(gòu)
- JAVA使用geotools讀取shape格式文件的方法
- java后端把數(shù)據(jù)轉(zhuǎn)換為樹(shù),map遞歸生成json樹(shù),返回給前端(后臺(tái)轉(zhuǎn)換)
- js中遞歸函數(shù)的使用介紹
- Vue.js 遞歸組件實(shí)現(xiàn)樹(shù)形菜單(實(shí)例分享)
- JavaScript的遞歸之遞歸與循環(huán)示例介紹
- JS遍歷數(shù)組和對(duì)象的區(qū)別及遞歸遍歷對(duì)象、數(shù)組、屬性的方法詳解
- JS中遞歸函數(shù)
- 優(yōu)雅的使用javascript遞歸畫(huà)一棵結(jié)構(gòu)樹(shù)示例代碼
相關(guān)文章
JavaScript實(shí)現(xiàn)移動(dòng)小精靈的案例代碼
這篇文章主要介紹了JavaScript實(shí)現(xiàn)移動(dòng)小精靈的案例代碼,本文分步驟給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-12-12JavaScript基于數(shù)組實(shí)現(xiàn)的棧與隊(duì)列操作示例
這篇文章主要介紹了JavaScript基于數(shù)組實(shí)現(xiàn)的棧與隊(duì)列操作,結(jié)合實(shí)例形式分析了棧與隊(duì)列的操作原理及javascript使用數(shù)組實(shí)現(xiàn)棧與隊(duì)列的相關(guān)技巧,需要的朋友可以參考下2018-12-12JS把字符串格式的時(shí)間轉(zhuǎn)換成幾秒前、幾分鐘前、幾小時(shí)前、幾天前等格式
最近在做項(xiàng)目的時(shí)候,需要把后臺(tái)返回的時(shí)間轉(zhuǎn)換成幾秒前、幾分鐘前、幾小時(shí)前、幾天前等的格式,接下來(lái)通過(guò)本文給大家分享JS把字符串格式的時(shí)間轉(zhuǎn)換成幾秒前、幾分鐘前、幾小時(shí)前、幾天前等格式 ,需要的朋友可以參考下2019-07-07《javascript設(shè)計(jì)模式》學(xué)習(xí)筆記一:Javascript面向?qū)ο蟪绦蛟O(shè)計(jì)對(duì)象成員的定義分析
這篇文章主要介紹了《javascript設(shè)計(jì)模式》學(xué)習(xí)筆記Javascript面向?qū)ο蟪绦蛟O(shè)計(jì)對(duì)象成員的定義,結(jié)合實(shí)例形式分析了《javascript設(shè)計(jì)模式》中JavaScript面向?qū)ο蟪绦蛟O(shè)計(jì)的原理、定義、用法及操作注意事項(xiàng),需要的朋友可以參考下2020-04-04JavaScript Canvas編寫(xiě)炫彩的網(wǎng)頁(yè)時(shí)鐘
這篇文章主要為大家詳細(xì)介紹了JavaScript Canvas編寫(xiě)炫彩的網(wǎng)頁(yè)時(shí)鐘,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-10-10