深度优先遍历
例图
1
| 从启点出发,找到其一个子元素,然后继续找到子元素的一个子元素,直至没有子元素。然后这个没有子元素的父元素开始继续依次找到其子元素。直到全部。
|
1 2 3 4
| 1.从顶点A触发,找到其第一个子元素B然后再向下找到B的第一个子元素E,此时E已没有子元素。 (一层一层深入下去,顾算法名为深度遍历) 2.因E没有子元素,所以返回到E的父元素B,找至其领一个子元素F。发现F也无子元素 3.因F无子元素。所以返回F的父元素B,因B无其他元素。所以返回至B的父元素A 4.继续从A找寻未定位过的元素。C和D方法同
|
code
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30
| <div class="parent"> <div class="child-1"> <div class="child-1-1"> <div class="child-1-1-1"> a </div> </div> <div class="child-1-2"> <div class="child-1-2-1"> b </div> </div> <div class="child-1-3"> c </div> </div> <div class="child-2"> <div class="child-2-1"> d </div> <div class="child-2-2"> e </div> </div> <div class="child-3"> <div class="child-3-1"> f </div> </div> </div>
|
JS
1 2 3 4 5 6 7 8 9 10
| let deepTraversal1 = (node, nodeList = []) => { if (node !== null) { nodeList.push(node) let children = node.children for (let i = 0; i < children.length; i++) { deepTraversal1(children[i], nodeList) } } return nodeList }
|
广度优先遍历
与深度相反,广度优先匹配兄弟节点(元素)
code
jS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21
| let widthTraversal2 = (node) => { let nodes = [] let stack = [] if (node) { stack.push(node) while (stack.length) { let item = stack.shift() let children = item.children nodes.push(item) // 队列,先进先出 // nodes = [] stack = [parent] // nodes = [parent] stack = [child1,child2,child3] // nodes = [parent, child1] stack = [child2,child3,child1-1,child1-2] // nodes = [parent,child1,child2] for (let i = 0; i < children.length; i++) { stack.push(children[i]) } } } return nodes }
|
[scode type=”blue”]参考第 5 题:介绍下深度优先遍历和广度优先遍历,如何实现?[/scode]