文章小tips:
- 先看案例在看思路会更懂点
- 算法还是多需要练习,每个大点讲完都有LeetCode练习
测试 bfs 和 dfs html文件公共代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>bfs</title>
</head>
<body>
<div id="parent">
<div class="children1">
<div class="children1-1">
<div class="children1-1-1">a</div>
</div>
<div class="children1-2">
<div class="children1-2-1">b</div>
</div>
</div>
<div class="children2">
<div class="children2-1">
<div class="children2-1-1">c</div>
</div>
<div class="children2-2">
<div class="children2-2-1">d</div>
</div>
</div>
<div class="children3">
<div class="children3-1">e</div>
</div>
</div>
<script>
// js code here
</script>
</body>
</html>
前置知识点
- js模拟栈:数组的
push
方法进栈
,pop
方法出栈
- js模拟队列:数组的
push
方法进队列
,shift
方法出队列
深度优先遍历(dfs)
数据结构:栈
(先进后出)
遍历过程:
思路:
- 先判断根节点是否为空,如果为空直接返回空,则初始化stack
- stack中的父节点出栈,存入nodes中,之后找子节点
- 如果有子节点,子节点数组出栈children
- 循环执行第二第三步,直至stack栈为空结束循环
代码如下:
let node_parent = document.querySelector("#parent")
// DFS 深度优先遍历 栈
let dfs = (node) => {
let stack = [] // 栈
let nodes = [] // 存所有节点
if (node) {
stack.push(node)
while (stack.length) {
let item = stack.pop() // 出栈
nodes.push(item)
let children = Array.from(item.children) // 获取所有节点
while(children.length) {
stack.push(children.pop())
}
}
}
return nodes
}
console.log(dfs(node_parent));
打印结果:
练习:LeetCode DFS练习
广度优先遍历(bfs)
数据结构:队列
(先进先出)
遍历过程:
思路:
- 先判断根节点是否为空,如果为空直接返回空,则初始化stack
- stack中的父节点出栈,存入nodes中,之后找子节点
- 如果有子节点,子节点数组出队列children
- 循环执行第2第3步,stack队列为空结束循环
js代码如下:
let node_parent = document.querySelector("#parent")
// BFS 深度优先遍历 队列
let bfs = (node) => {
let stack = [] // 队列
let nodes = [] // 存所有节点
if (node) {
stack.push(node)
while(stack.length) {
let item = stack.shift()
nodes.push(item)
let children = Array.from(item.children)
while(children.length) {
stack.push(children.shift())
}
}
}
return nodes
}
console.log(bfs(node_parent));
测试结果:
练习:LeetCode BFS练习
LeetCode打卡群:260367472