JavaScript中的深度优先(dfs)和广度优先(bfs)

影风莫

已于 2023-06-21 18:14:28 修改

阅读量742

点赞数 1

分类专栏：面试每日一题文章标签：深度优先算法广度优先

于 2022-07-09 23:01:22 首次发布

本文链接：https://blog.csdn.net/weixin_50789156/article/details/125699539

版权

面试每日一题专栏收录该内容

3 篇文章 0 订阅

订阅专栏

文章小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));