使用 Array.prototype.map 将具有索引的对象插入二维数组

Posted 2023-03-15

【中文标题】使用 Array.prototype.map 将具有索引的对象插入二维数组

【英文标题】：using Array.prototype.map to insert object with index into 2D array

【发布时间】：2021-10-26 20:49:08

【问题描述】：

就上下文而言，这是经典的战舰游戏。

我有一个像这样的游戏板网格数组：

[[null, null, null, null, null],
[null, null, null, null, null],
[null, null, null, null, null],
[null, null, null, null, null],
[null, null, null, null, null]],

我试图在数组中放置一个ship 对象。该对象由一些属性组成，例如船的name、length和index（这样船被击中的位置就可以标记在船对象上）。例如，放置在第一排的船可能如下所示：

[null, name: 'boat' , index: 0 , name: 'boat' , index: 1 , null, null]

我想使用函数式编程原则来实现这一点，并避免改变数组，这是我目前正在做的事情（即使用 for 循环并设置 array[x][y] = ship）。

我了解实现此目的的最佳方法是使用map()。

由于数组是二维的，我将两个地图嵌套在一起。到目前为止，我的功能如下所示：

const placeShip = (ship, x, y) => 
    if (grid[x][y] !== null) return;
    const newGrid = grid.map((row, indexX) => row.map((element, indexY) => 
      if (indexX === x && indexY === y) 
        
          name: ship.name,
          index: XXX
         // how to insert the index position?
      
    
    return newGrid
  

我遇到的麻烦是双重的。首先，我不知道如何使用嵌套地图在对象中正确插入船的索引位置。这很容易使用for 循环，因为它们从0 开始并以ship.length 结束。

其次，我在某个地方出错了，我的函数没有返回包含任何对象的二维数组，我只是收到undefined。

我哪里错了？

谢谢

【问题讨论】：

return。就是这样。

您能详细说明一下吗？我想我已经盯着这个太久了

当您说how to insert the index position? 时，不清楚您指的是什么索引。这个值应该是多少？一个号码？ x, y 坐标的数组？

@LearningPython 你没有从你的内行.map 中返回任何东西，所以你最终会得到一个undefineds 的网格。这也会导致您在开始时的条件检查在后续调用中出现误报。

@Mark 我正在尝试包含船长的索引位置。也许在我在问题开始时给出的示例中并不清楚。基本上，当击中网格并击中一艘船时，我需要在船对象上记录被击中的船的位置。例如。如果它是 4 个单元格长，无论是在其长度的第 1、2、3 或 4 部分被击中。这有意义吗？

【参考方案1】：

如果你只考虑水平放置的船只，你可以像这样检查船只是否出现在瓷砖上：

ri === r &&    // The ship sails on the current row
ci >= c &&     // The start of the ship lies left of this column
ci < c + size  // The end of the ship lies right of this column

然后，0 和shipSize 之间的索引可以使用：ci - c

这是一个简化的例子：

const grid = Array.from(Array(4), () => Array(4).fill("~~"));

const placeShipH = (r, c, size, name, grid) => grid.map(
  (row, ri) => row.map(
    (col, ci) => ri === r && ci >= c && ci < c + size
      ? `$name$ci - c + 1`
      : col
  )
);

const placeShipV = (r, c, size, name, grid) => grid.map(
  (row, ri) => row.map(
    (col, ci) => ci === c && ri >= r && ri < r + size
      ? `$name$ri - r + 1`
      : col
  )
);

const gridToString = grid => grid.map(row => row.join(" ")).join("\n");

const afterShipA = placeShipH(1, 1, 2, "A", grid);
const afterShipB = placeShipH(3, 0, 3, "B", afterShipA);
const afterShipC = placeShipV(0, 3, 3, "C", afterShipB)

console.log(gridToString(afterShipC));

【讨论】：

谢谢，这正是我想要的。我也打算让它适应垂直布局，我想这应该不会太难。

我觉得我说得太早了。为了实现垂直放置，上述内容是否有任何重大变化？我正在使用(columnIndex === column && rowIndex >= row && rowIndex < row + ship.length)，但我似乎得到了无限长的列船。

您显示的代码对我来说看起来不错...我在上面的示例中添加了垂直示例，它似乎可以工作。也许.length 属性未定义？