【前端】深度优先与广度优先

少年歌行s

已于 2022-10-17 22:38:54 修改

阅读量368

点赞数

分类专栏：前端文章标签：深度优先前端宽度优先

于 2022-10-17 22:38:02 首次发布

本文链接：https://blog.csdn.net/MinfCONS/article/details/127378674

版权

前端专栏收录该内容

23 篇文章 1 订阅

订阅专栏

本文介绍了在学习DOM-DIFF和Fiber时经常遇到的深度优先搜索（DFS）与广度优先搜索（BFS）的概念。通过示例代码展示了两种搜索算法的实现过程，帮助理解它们在处理树形结构数据时的不同策略。DFS首先访问根节点，然后递归遍历子节点，最后输出ABB1B2CC1C2。而BFS则使用队列进行层次遍历，先访问所有父节点，再依次访问子节点，输出ABCB1B2C1C2。

摘要由CSDN通过智能技术生成

学习DOM-DIFF与Fiber时，常常听到深度优先与广度优先这两个名词，本文做下代码实现与总结

//示例
const root = {
    name: 'A1',
    children: [
        {
            name: 'B',
            children: [
                {
                    name: 'B1'
                },
                {
                    name: 'B2'
                }
            ]
        },
        {
            name: 'C',
            children: [
                {
                    name: 'C1'
                },
                {
                    name: 'C2'
                }
            ]
        }
    ]
}

//深度优先
function dfs(node) {
    console.log(node.name);
    node.children?.forEach(dfs);
}
dfs(root)  // A B B1 B2 C C1 C2

//广度优先
function bfs(node) {
    const stack = [];
    stack.push(node);
    let current;

    while((current = stack.shift())) {
        console.log(current.name);
        current.children?.forEach(child => {
            stack.push(child);
        })
    }
}
bfs(root)  // A B C B1 B2 C1 C2