当前位置:首页 > JavaScript

js实现bfs

2026-02-01 00:32:00JavaScript

JavaScript 实现广度优先搜索(BFS)

广度优先搜索(BFS)是一种用于遍历或搜索树或图的算法,它从根节点开始,逐层访问所有相邻节点。以下是 JavaScript 实现 BFS 的几种常见方法。

基于队列的 BFS 实现

BFS 通常使用队列数据结构来实现,以下是针对树或图的通用实现方式。

树的 BFS 实现

假设树的节点结构如下:

js实现bfs

class TreeNode {
  constructor(val) {
    this.val = val;
    this.children = [];
  }
}

BFS 实现代码:

function bfsTree(root) {
  if (!root) return [];
  const queue = [root];
  const result = [];
  while (queue.length > 0) {
    const node = queue.shift();
    result.push(node.val);
    for (const child of node.children) {
      queue.push(child);
    }
  }
  return result;
}

图的 BFS 实现

对于图结构,需要使用一个 visited 集合来避免重复访问。

js实现bfs

function bfsGraph(startNode) {
  const queue = [startNode];
  const visited = new Set();
  visited.add(startNode);
  const result = [];
  while (queue.length > 0) {
    const node = queue.shift();
    result.push(node.val);
    for (const neighbor of node.neighbors) {
      if (!visited.has(neighbor)) {
        visited.add(neighbor);
        queue.push(neighbor);
      }
    }
  }
  return result;
}

处理层级信息

如果需要记录每一层的节点,可以通过以下方式实现:

function bfsWithLevels(root) {
  if (!root) return [];
  const queue = [root];
  const result = [];
  while (queue.length > 0) {
    const levelSize = queue.length;
    const currentLevel = [];
    for (let i = 0; i < levelSize; i++) {
      const node = queue.shift();
      currentLevel.push(node.val);
      for (const child of node.children) {
        queue.push(child);
      }
    }
    result.push(currentLevel);
  }
  return result;
}

应用场景示例

  1. 二叉树层级遍历
    对于二叉树,BFS 可以用于按层输出节点值:

    function levelOrder(root) {
      if (!root) return [];
      const queue = [root];
      const result = [];
      while (queue.length > 0) {
        const levelSize = queue.length;
        const level = [];
        for (let i = 0; i < levelSize; i++) {
          const node = queue.shift();
          level.push(node.val);
          if (node.left) queue.push(node.left);
          if (node.right) queue.push(node.right);
        }
        result.push(level);
      }
      return result;
    }
  2. 最短路径问题
    BFS 可以用于无权图的最短路径查找,例如网格中的最短路径:

    function shortestPath(grid, start, end) {
      const queue = [[start, 0]];
      const visited = new Set([start.toString()]);
      const directions = [[1, 0], [-1, 0], [0, 1], [0, -1]];
      while (queue.length > 0) {
        const [[x, y], dist] = queue.shift();
        if (x === end[0] && y === end[1]) return dist;
        for (const [dx, dy] of directions) {
          const nx = x + dx, ny = y + dy;
          if (isValid(nx, ny, grid) && !visited.has([nx, ny].toString())) {
            visited.add([nx, ny].toString());
            queue.push([[nx, ny], dist + 1]);
          }
        }
      }
      return -1;
    }

注意事项

  • 对于图结构的 BFS,必须使用 visited 集合避免循环访问。
  • 队列操作的时间复杂度为 O(1),但 shift 方法在 JavaScript 中可能导致 O(n) 时间,可以使用索引优化。
  • 如果节点值需要特殊处理(如对象),需自定义比较逻辑或使用 Map 替代 Set

标签: jsbfs
分享给朋友:

相关文章

js实现轮播图

js实现轮播图

轮播图实现方法 基础HTML结构 <div class="slider"> <div class="slides"> <img src="image1.jpg…

js实现验证码

js实现验证码

使用Canvas生成图形验证码 在HTML中创建一个Canvas元素用于绘制验证码。通过JavaScript随机生成数字或字母组合,并添加干扰线、噪点等干扰元素增强安全性。 <canvas i…

js实现选项卡

js实现选项卡

实现选项卡的基本思路 选项卡通常由一组标签和对应的内容面板组成。点击标签时,显示对应的内容面板,隐藏其他面板。实现这一效果需要结合HTML结构、CSS样式和JavaScript交互逻辑。 HTML…

js如何实现继承

js如何实现继承

原型链继承 通过将子类的原型指向父类的实例实现继承。子类实例能够访问父类原型上的属性和方法。 function Parent() { this.name = 'parent'; } Paren…

js防抖和节流实现

js防抖和节流实现

防抖(Debounce)的实现 防抖的核心思想是在事件被触发后,延迟执行回调函数。如果在延迟时间内再次触发事件,则重新计时。适用于输入框搜索、窗口大小调整等场景。 function debounc…

js实现延迟

js实现延迟

实现延迟的方法 在JavaScript中,实现延迟操作有多种方式,以下是几种常见的方法: 使用setTimeout函数 setTimeout是JavaScript中最常用的延迟执行方法。它接受一个…