计算 TypeScript 二维数组中指定位置周围数字 2 的个数

首页

前端开发

热心网友

转载

2026-04-23

计算 TypeScript 二维数组中指定位置周围数字 2 的个数

免费影视、动漫、音乐、游戏、小说资源长期稳定更新！ 👉 点此立即查看 👈

本文介绍如何在 10×10 的数字网格中，健壮、简洁、边界安全地统计某单元格周围（8邻域）值为 2 的邻居数量，彻底解决边缘越界导致计数错误的问题，并提供可复用的泛型工具函数与优化实现。

在开发扫雷这类网格游戏时，一个经典且高频的需求是：给定一个10×10的数字网格，如何准确、安全地统计某个格子周围八个方向上，值为2（代表冲击波）的邻居数量？

新手常见的做法是手动罗列八个方向：上、下、左、右、左上、右上、左下、右下。代码写出来，往往是长长一串 grid[row-1][col]、grid[row+1][col-1] 这样的判断。问题随之而来——你需要在每个访问前都小心翼翼地加上边界检查，比如 colIndex - 1 >= 0 && colIndex + 1 <= 9。逻辑一复杂，就很容易遗漏某个组合，导致边缘格子要么漏算，要么直接抛出“Cannot read property 'x' of undefined”这样的运行时错误。

有没有更优雅、更可靠的办法？当然有。核心思路其实很简单：先把“获取所有有效邻居”这个通用行为抽象出来，然后再针对性地过滤出目标值。 这样一来，边界处理的复杂性就被封装在了一个地方，主逻辑会变得异常清晰。

✅ 推荐方案：泛型 getNeighbors 工具函数

下面这个工具函数，可以说是解决此类问题的“瑞士军刀”。它类型安全、边界鲁棒，并且具备良好的可复用性：

function getNeighbors(
  rowIndex: number,
  colIndex: number,
  source: Array[],
  radius: number = 1,
): Array {
  const neighbors: T[] = [];
  if (!source?.length) return neighbors;

  const numRows = source.length;
  const numCols = source[0].length;

  // 预计算合法行列范围，避免重复条件判断
  const minRow = Math.max(0, rowIndex - radius);
  const maxRow = Math.min(numRows - 1, rowIndex + radius);
  const minCol = Math.max(0, colIndex - radius);
  const maxCol = Math.min(numCols - 1, colIndex + radius);

  for (let r = minRow; r <= maxRow; r++) {
    for (let c = minCol; c <= maxCol; c++) {
      // 跳过中心自身
      if (r !== rowIndex || c !== colIndex) {
        neighbors.push(source[r][c]);
      }
    }
  }
  return neighbors;
}

这个函数的巧妙之处在于几点：它支持任意搜索半径（默认是1，即3×3的邻域）；通过 Math.max 和 Math.min 提前约束了循环的起止范围，自动裁剪掉所有越界的索引。相比在循环内部嵌套一堆 if 判断，这种做法不仅性能更优，代码意图也清晰得多，从根本上杜绝了遗漏边界检查的可能。

? 使用示例：统计周围 2 的数量

假设你已经通过 React 的 useState 初始化了一个 10×10 的网格：

const [grid, setGrid] = useState(() =>
  Array.from({ length: 10 }, () => Array(10).fill(0)));

那么，统计任意位置 (rowIndex, colIndex) 周围数字2的个数，就变得异常简单：

const countBombsNearBy = (rowIndex: number, colIndex: number): number => {
  return getNeighbors(rowIndex, colIndex, grid)
    .filter(value => value === 2)
    .length;
};

来，我们逐一验证一下它的优势：

✅ 边缘安全：对于左上角(0, 0)，它只会返回 [grid[0][1], grid[1][0], grid[1][1]] 这三个有效邻居，绝不会越界。
✅ 中心排除：函数内部明确跳过了中心格子自身，完全符合“周围邻居”的语义。
✅ 类型安全：泛型的设计让它不仅能处理数字，还能处理字符串、对象等任何类型的二维数组。
✅ 易于扩展：如果未来需要统计值为2或3的格子，只需将过滤条件改为 .filter(v => v === 2 || v === 3) 即可。

⚡ 进阶优化：极致性能（O(1) 固定邻域）

如果你的场景非常明确，永远只查询周围的8个直接邻居（即半径固定为1），那么可以追求极致的性能。下面这个版本利用TypeScript的可选链操作符（?.），完全消除了循环和数学计算的开销：

function get8Neighbors(rowIndex: number, colIndex: number, source: Array[]): T[] {
  return [
    source[rowIndex - 1]?.[colIndex - 1],
    source[rowIndex - 1]?.[colIndex],
    source[rowIndex - 1]?.[colIndex + 1],
    source[rowIndex]?.[colIndex - 1],
    source[rowIndex]?.[colIndex + 1],
    source[rowIndex + 1]?.[colIndex - 1],
    source[rowIndex + 1]?.[colIndex],
    source[rowIndex + 1]?.[colIndex + 1],
  ].filter((v): v is T => v !== undefined); // 类型守卫，剔除 undefined
}

// 使用
const bombCount = get8Neighbors(rowIndex, colIndex, grid).filter(v => v === 2).length;

这个方案的访问路径在编译期就已经确定，运行时没有循环，也没有 Math 函数调用，非常适合在需要高频计算、实时渲染的游戏循环中使用。

? 注意事项与最佳实践

方案虽好，用的时候也得讲究方法，避开一些常见的“坑”：

避免在组件渲染中直接调用：如果 grid 是由 useState 管理的状态，请务必将 countBombsNearBy 这类函数用 useCallback 包裹起来，并把 grid 放入依赖数组，以防止闭包问题导致读取到过时的状态。
警惕不必要的内存分配：getNeighbors 每次都会返回一个新数组。如果只是计数，可以考虑改写成累加器模式，直接遍历并计数，减少临时数组的创建。
充分测试边界用例：别忘了覆盖 (0,0)、(0,9)、(9,0)、(9,9) 这四个角落，以及 (5,5) 这样的中心位置，确保逻辑万无一失。
坚持语义化命名：强烈建议将魔法数字“2”定义为常量，例如 const BOMB = 2。这能极大提升代码的可读性和后续维护的便利性。