前端高频面试题系列之第1题

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第1天，点击查看活动详情。

深度优先遍历(DFS) 和 广度优先遍历(BFS)

面试题:

给定一个二叉树，使用 DFS 和 BFS 遍历返回所有节点。

<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 class="children1-3">
                c
            </div>
        </div>
        <div class="children2">
            <div class="children2-1">
                <div class="children2-1-1">
                    d
                </div>
            </div>
            <div class="children2-2">
                <div class="children2-2-1">
                    e
                </div>
            </div>
            <div class="children2-3">
                f
            </div>
        </div>
        <div class="children3">
            <div class="children3-1">
                <div class="children3-1-1">
                    g
                </div>
            </div>
            <div class="children3-2">
                <div class="children3-2-1">
                    h
                </div>
            </div>
            <div class="children3-3">
                r
            </div>
        </div>
    </div>

深度优先遍历（DFS）

• DFS 的思想是从上至下，对每一个分支一直往下一层遍历直到这个分支结束，然后返回上一层，对上一层的右子树这个分支继续深搜，直到一整棵树完全遍历，因此符合栈后进先出的特点
• 深度优先遍历常用的数据结构是栈
• DFS 特性 : 不全部保留结点，占用空间少;有回溯操作(即有入栈、出栈操作)，运行速度慢。

// 需要全部资料可以加我vx:15910703937  视频B站搜【前端铁蛋儿】
 // DFS 深度优先遍历 栈
let node_prent = document.querySelector('#parent')
     let dfc = (node) => {
         let stack = [] // 栈
         let nodes = [] // 存所有节点
         if (node) {
             stack.push(node) // 假如有节点就存到栈中
             while (stack.length) {
                 let item = stack.pop() // 出栈
                 nodes.push(item)
                 let children = item.children // 拿到子节点
                 // 每层从右往左取 取到放进stack
                 for (let i = children.length - 1; i >= 0; i--) {
                     stack.push(children[i])
                 }
             }
         }

         return nodes // 所有节点返回

     }
console.log(dfc(node_prent))

广度优先遍历（BFS）

• BFS 的思想是从左至右，对树的每一层所有结点依次遍历，当一层的结点遍历完全后，对下一层开始遍历，而下一层结点又恰好是上一层的子结点。因此符合队列先进先出的特点
• 深度优先遍历常用的数据结构为队列
• 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 = item.children
         for (let i = 0; i < children.length; i++) {
             stack.push(children[i])
         }
     }
 }
 return nodes
}
console.log(bfs(node_prent))

本文视频对应 前端大厂高频面试题， 除此之外，如果你对技术有像一素的偏执，欢迎加我vx:15910703837一起学习一起进步。