如何更简洁地向网格及相邻单元格添加对象引用？

嘿，我懂你觉得原来的代码有点繁琐的点——嵌套循环加单独的边界判断函数，确实可以更清爽！咱们来把这段处理网格相邻单元格的逻辑简化一下，同时保持可读性：

优化后的代码 #

setNearby(grid) {
  // 解构尺寸属性，减少重复书写
  const { width, height } = grid.dimensions;
  const row = Math.floor(this.position.x / width);
  const col = Math.floor(this.position.y / height);
  const offsets = [-1, 0, 1];

  // 用取模实现简洁的循环边界处理，替代原来的getCell函数
  const wrapIndex = (pos, maxLength) => (pos % maxLength + maxLength) % maxLength;

  offsets.forEach(rowOff => {
    offsets.forEach(colOff => {
      const targetRow = wrapIndex(row + rowOff, grid.grid.length);
      const targetCol = wrapIndex(col + colOff, grid.grid[targetRow].length);
      grid.grid[targetRow][targetCol].push(this);
    });
  });
}

优化点说明 #

• 简化边界判断：原来的getCell函数可以用一行取模运算替代。(pos % maxLength + maxLength) % maxLength能自动处理正负索引的循环：比如-1会转为maxLength-1，maxLength会转为0，完美匹配你原来的边界逻辑。
• 解构赋值简化代码：把grid.dimensions.width和height解构出来，避免重复写长属性链，代码更清爽。
• 内联工具函数：把边界处理逻辑封装成内联的wrapIndex函数（如果其他地方不需要复用的话），减少类的方法数量，让相关逻辑更紧凑。
• 精简变量名：用rowOff替代rowOffset，在不损失可读性的前提下缩短代码。

额外说明：如果是非循环边界（不处理超出网格的单元格） #

如果你其实不需要循环边界，而是希望跳过网格外的单元格，那可以把边界判断改成范围检查，代码会更简单：

setNearby(grid) {
  const { width, height } = grid.dimensions;
  const row = Math.floor(this.position.x / width);
  const col = Math.floor(this.position.y / height);
  const offsets = [-1, 0, 1];

  offsets.forEach(rowOff => {
    offsets.forEach(colOff => {
      const targetRow = row + rowOff;
      const targetCol = col + colOff;
      // 检查目标单元格是否在网格范围内
      if (targetRow >= 0 && targetRow < grid.grid.length && 
          targetCol >= 0 && targetCol < grid.grid[targetRow].length) {
        grid.grid[targetRow][targetCol].push(this);
      }
    });
  });
}

这样调整后，代码既简洁又清晰，逻辑一目了然～

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