TypeScript开发扫雷游戏时出现Cannot set properties of undefined (setting '0')错误的解决咨询

问题描述 #

我正在开发一款扫雷游戏，希望将每个格子周围的地雷数量存储在一个二维数字数组中。我尝试编写了以下代码：

let minesAround : number[][] = new Array<Array<number>>(config.fieldSize); 
for (let col : number = 0; col < playingField.length; col++) 
  for(let row : number = 0; row < playingField[0].length; col++){ 
    minesAround[col][row] = getNumOfMinesAround(playingField, col, row); 
  }

但在执行minesAround[col][row] = getNumOfMinesAround(playingField, col, row);这一行时，出现了TypeScript错误：TypeError: Cannot set properties of undefined (setting '0')。我已经调试过getNumOfMinesAround方法，确认它可以正常运行并返回数字。经过排查发现问题出在内层数组未初始化，请问该如何初始化二维数组的内层数组？

解决方案 #

你说得没错，问题的核心是外层数组创建后，每个元素都是undefined，并没有真正初始化内层的一维数组，所以当你尝试给minesAround[col][row]赋值时，相当于在给一个undefined对象设置属性，自然会抛出错误。另外还要注意你代码里的一个小bug：内层循环的增量写成了col++而不是row++，这会导致循环逻辑错误，甚至无限循环。

下面给你几种可行的修正方案：

方案1：在列循环中显式初始化内层数组

这是最直观的方式，在外层循环（遍历列）中，先为当前列创建一个空的一维数组，再填充数据：

let minesAround: number[][] = new Array(config.fieldSize); 
for (let col: number = 0; col < playingField.length; col++) {
  // 初始化当前列的内层数组，长度与游戏区域的行数一致
  minesAround[col] = new Array(playingField[0].length).fill(0);
  // 修正内层循环的增量为row++
  for(let row: number = 0; row < playingField[0].length; row++){ 
    minesAround[col][row] = getNumOfMinesAround(playingField, col, row); 
  }
}

这里用fill(0)先给内层数组填充默认值0，避免后续赋值时出现意外问题。

方案2：用Array.from简化初始化（推荐）

Array.from可以更简洁地创建并初始化二维数组，甚至可以直接把填充逻辑整合进去：

// 一步完成数组初始化和数值填充
const minesAround: number[][] = Array.from(
  { length: playingField.length }, // 外层数组长度=游戏区域的列数
  (_, colIndex) => Array.from(
    { length: playingField[0].length }, // 内层数组长度=游戏区域的行数
    (_, rowIndex) => getNumOfMinesAround(playingField, colIndex, rowIndex)
  )
);

这种写法不需要额外的循环，代码更紧凑，也避免了手动初始化内层数组的疏漏。

方案3：使用map方法（如果外层数组已创建）

如果你已经创建了外层数组，也可以用map来初始化内层数组：

let minesAround: number[][] = new Array(playingField.length)
  .fill(0)
  .map(() => new Array(playingField[0].length).fill(0));

// 再执行填充逻辑
for (let col = 0; col < playingField.length; col++) {
  for (let row = 0; row < playingField[0].length; row++) {
    minesAround[col][row] = getNumOfMinesAround(playingField, col, row);
  }
}

注意这里外层数组要先fill(0)，否则map会跳过undefined的元素。

内容的提问来源于stack exchange，提问作者Hans Peter