这是游戏开发里挺常见的坑——不小心访问了不存在的数组元素，轻则拿到undefined导致逻辑异常，重则触发报错打断游戏流程。结合你给出的gameMap二维数组示例，我整理了几个靠谱的解决办法：

1. 手动做索引合法性校验（最通用兼容） #

在访问元素前，先确认行、列索引都在有效范围内。你的gameMap有18行（索引0_{17），每行20个元素（索引0}19），可以写个工具函数统一处理：

function safeGetMapValue(map, row, col) {
  // 先检查行是否合法
  if (row < 0 || row >= map.length) {
    console.warn(`行索引${row}越界啦！`);
    return -1; // 返回一个代表无效值的默认值，比如用-1表示墙外
  }
  const targetRow = map[row];
  // 再检查列是否合法
  if (col < 0 || col >= targetRow.length) {
    console.warn(`列索引${col}越界啦！`);
    return -1;
  }
  return targetRow[col];
}

// 使用示例
const tileValue = safeGetMapValue(gameMap, 5, 20); // 触发列越界警告，返回-1

2. 用可选链+空值合并简化判断（ES2020+） #

如果你的项目环境支持ES2020及以上，可选链?.能帮你省去一堆if判断，直接安全访问：

// 越界时自动返回undefined，再用??指定默认值
const tileValue = gameMap?.[row]?.[col] ?? -1;

简单解释：gameMap?.[row]会先检查行是否存在，不存在直接返回undefined；?.[col]同理检查列。最后??会在左边是undefined或null时，返回右边的默认值-1。

3. 封装地图访问模块（游戏项目推荐） #

把地图的访问逻辑封装成类，所有操作都经过统一校验，避免重复代码，后期维护也方便：

class GameMapManager {
  constructor(mapData) {
    this.map = mapData;
    this.maxRow = mapData.length;
    this.maxCol = mapData[0]?.length || 0;
  }

  // 安全获取地图格子值
  getTile(row, col) {
    if (this.isValidPosition(row, col)) {
      return this.map[row][col];
    }
    console.warn(`无效坐标：(${row}, ${col})，已返回默认值`);
    return -1;
  }

  // 校验坐标是否合法
  isValidPosition(row, col) {
    return row >= 0 && row < this.maxRow && col >= 0 && col < this.maxCol;
  }
}

// 使用方式
const mapManager = new GameMapManager(gameMap);
const tileValue = mapManager.getTile(18, 5); // 行越界，返回-1并输出警告

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