JavaScript深度优先遍历DFS和广度优先遍历BFS算法的示例 - 行业资讯

　　介绍

小编给大家分享一下JavaScript深度优先遍历DFS和广度优先遍历BFS算法的示例,希望大家阅读完这篇文章后大所收获、下面让我们一起去探讨吧!

背景:在开发页面的时候,我们有时候会遇到这种需求:在页面某个dom节点中遍历,找到目标dom节点,我们正常做法是利用选择器. getelementbyid (), document.getElementsByName()或者document.getElementsByTagName(),但在本文,我们从算法的角度去查找dom节点,同时理解一下深度优先遍历(DFS)和广度优先遍历(BFS)的原理。

准备

假设页面上的dom结构如下:

& lt; div id=皉oot"比; 　　& lt; ul> 　　& lt; li> 　　https://www.yisu.com/zixun/& lt; a href=" "> 　　

　　　　李　　<李> 　　%20 　　李　　<李> 　　李　　　　

%20

　　<按钮>%20 　　

%20%20

让我们来把这个dom结构转化成树的样子

%20

这样之后,dom结构似乎清楚了不少。

深度优先遍历(深度优先搜索)

该方法是以纵向的维度对dom树进行遍历,从一个dom节点开始,一直遍历其子节点,直到它的所有子节点都被遍历完毕之后在遍历它的兄弟节点。即如图所示(遍历顺序为红字锁标):

js实现该算法代码(递归版本):

函数deepFirstSearch(节点,节点列表){ 　　如果(节点){ 　　nodeList.push(节点); 　　var的孩子=node.children; 　　(var=0;我& lt;children.length;我+ +)//每次递归的时候将需要遍历的节点和节点所存储的数组传下去　　deepFirstSearch(孩子(我),节点列表); 　　} 　　返回节点列表; 　　}

非递归版本:

函数deepFirstSearch(节点){ 　　var节点=[]; 　　如果(节点!=null) { 　　var堆栈=[]; 　　stack.push(节点); 　　而(堆栈。长度!=0){ 　　var=stack.pop项(); 　　nodes.push(项); 　　var的孩子=item.children; 　　我(var=孩子。长度- 1;我在=0;我——) 　　stack.push(孩子[我]); 　　} 　　} 　　返回节点; 　　}

deepFirstSearch接受两个参数,第一个参数是需要遍历的节点,第二个是节点所存储的数组,并且返回遍历完之后的数组,该数组的元素顺序就是遍历顺序,调用方法:

让根=. getelementbyid(& # 39;根# 39;) 　　deepTraversal(根节点列表=[])

控制台输出结果

JavaScript深度优先遍历DFS和广度优先遍历BFS算法的示例

广度优先遍历(广度优先遍历)

该方法是以横向的维度对dom树进行遍历,从该节点的第一个子节点开始,遍历其所有的兄弟节点,再遍历第一个节点的子节点,完成该遍历之后,暂时不深入,开始遍历其兄弟节点的子节点。即如图所示(遍历顺序为红字锁标):

JavaScript深度优先遍历DFS和广度优先遍历BFS算法的示例

js实现算法代码(递归版本):

函数breadthFirstSearch(节点){ 　　var节点=[]; 　　var=0; 　　如果(!(节点==null) { 　　nodes.push(节点); 　　breadthFirstSearch (node.nextElementSibling); 　　节点=节点(+ +); 　　breadthFirstSearch (node.firstElementChild); 　　} 　　返回节点; 　　}

递归版本的BFS由于层级太深,会导致堆栈溢出:最大调用堆栈大小超过,但遍历的顺序依旧没有问题,可以在遍历过程中进行操作,不返回遍历数组即可。

非递归版本:

函数breadthFirstSearch(节点){ 　　var节点=[]; 　　如果(节点!=null) { 　　var队列=[]; 　　queue.unshift(节点); 　　而(队列。长度!=0){ 　　var=queue.shift项(); 　　nodes.push(项); 　　var的孩子=item.children; 　　(var=0;我& lt;children.length;我+ +) 　　queue.push(孩子[我]); 　　} 　　} 　　返回节点; 　　}

控制台输出结果:

JavaScript深度优先遍历DFS和广度优先遍历BFS算法的示例

总结:BFS和DFS都是图的算法之一,本文所阐述的版本较为简单,为无向且非连通图,在日后会更新更多基于JavaScript的算法。