解释下深度优先遍历和广度优先遍历的区别及如何实现

深度优先遍历 (DFS) 和广度优先遍历 (BFS) 都是图和树数据结构的遍历算法，它们的主要区别在于访问节点的顺序。

深度优先遍历 (DFS)

• 概念: DFS 就像走迷宫一样，沿着一条路走到底，遇到死胡同再回溯到上一个岔路口，选择另一条路继续走，直到遍历完所有节点。它优先探索当前节点的分支，尽可能深入。

• 实现 (JavaScript):

// 递归实现
function dfsRecursive(node, visited = new Set()) {
  if (!node || visited.has(node)) {
    return;
  }

  visited.add(node);
  console.log(node.value); // 处理当前节点

  for (const neighbor of node.neighbors) {
    dfsRecursive(neighbor, visited);
  }
}


// 迭代实现 (使用栈)
function dfsIterative(node) {
  const stack = [];
  const visited = new Set();

  stack.push(node);

  while (stack.length > 0) {
    const currentNode = stack.pop();

    if (!currentNode || visited.has(currentNode)) {
      continue;
    }

    visited.add(currentNode);
    console.log(currentNode.value); // 处理当前节点

    // 注意：这里需要反向推入邻居节点，以保证先访问左子树/第一个邻居
    for (let i = currentNode.neighbors.length - 1; i >= 0; i--) {
      stack.push(currentNode.neighbors[i]);
    }
  }
}


// 示例用法 (假设 node 为树/图的根节点，且节点具有 value 和 neighbors 属性)
const node = { 
    value: 1, 
    neighbors: [
        { value: 2, neighbors: [{ value: 4, neighbors: [] }, { value: 5, neighbors: [] }] },
        { value: 3, neighbors: [{ value: 6, neighbors: [] }, { value: 7, neighbors: [] }] }
    ]
};

console.log("DFS (Recursive):");
dfsRecursive(node);

console.log("\nDFS (Iterative):");
dfsIterative(node);

广度优先遍历 (BFS)

• 概念: BFS 就像水波纹一样，从起始节点开始，一层一层地向外扩展，先访问所有距离起始节点为 1 的节点，然后是距离为 2 的节点，以此类推。它优先探索当前节点的所有邻居节点。

• 实现 (JavaScript):

function bfs(node) {
  const queue = [];
  const visited = new Set();

  queue.push(node);
  visited.add(node);

  while (queue.length > 0) {
    const currentNode = queue.shift();
    console.log(currentNode.value); // 处理当前节点

    for (const neighbor of currentNode.neighbors) {
      if (!neighbor || visited.has(neighbor)) {
        continue;
      }

      visited.add(neighbor);
      queue.push(neighbor);
    }
  }
}


// 示例用法 (使用与 DFS 相同的示例数据)
console.log("\nBFS:");
bfs(node);

区别总结:

特性	DFS	BFS
数据结构	栈 (迭代实现) 或 递归	队列
访问顺序	先深度后广度	先广度后深度
空间复杂度	最坏情况 O(h) (h 为树的高度)	最坏情况 O(w) (w 为树的最大宽度)
应用场景	查找路径、检测环、拓扑排序	查找最短路径、连通性问题

前端开发中的应用:

• DFS: DOM 树遍历、查找特定元素、依赖关系解析。
• BFS: 页面元素查找 (例如，查找距离某个元素最近的具有特定类的元素)、网络爬虫、游戏中的寻路算法。

希望这个解释对您有所帮助! 请根据您的具体需求选择合适的遍历算法。