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

原创已于 2022-10-17 22:38:54 修改 · 434 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#深度优先 #前端 #宽度优先

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

前端专栏收录该内容

23 篇文章

订阅专栏

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

学习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