Javascript多维数组更新特定元素

Question

我有一个字符串已在js中转换为2D数组.

board ="... | .X.| ... |"

它用于表示游戏板

每一个.代表一个空间

每个| 代表一排

每个X代表一堵墙

编辑:下面的代码为2d数组创建

var src= "...|.X.|...|";
board = src.split(/\|/g);

for (var i = 0; i < board.length; i++) {
var cells = board[i].split('');
for (var j = 0; j < cells.length; j++) {
    cells[j] = parseInt(cells[j]);
}
board[i][j] = cells;
console.log(board[1][1])
//returns 'X'

当我访问board [i] [j]时它会正确返回:

[0] [0] ="."

[1] [1] ="X"

[1] [2] ="."

等等

我想用表示一块的字符串更新特定元素.但是,当我插入这样的元素时:

board [0] [0] ="piece4"

数组返回firebug,如下所示:

board ="piece4 | .X.| ... |"

它看起来应该是这样的:

board =".piece4.| .X.| ... |"

为什么元素[0] [1]和[0] [2]被覆盖？我在js中没有正确理解数组索引访问的数组吗？

Answer 1

我只是有同样的问题,但它有一个更复杂的原因,我想添加它,以防有人发现这个页面搜索我有同样的问题:

我创建并填充了这样的二维数组:

var foo = Array(n).fill(Array(n).fill(0));

这会创建一个用零填充的二维n*n数组.

现在,当我试图覆盖这样的单元格时

foo[1][1] = 1;

我最终得到了这些价值观:

[[0,1,0],
 [0,1,0],
 [0,1,0]]

这真是令人惊讶的恕我直言.

这样做的原因是,有也不过才一个排,这已在内部被引用三次.因此,当我更改"第二"行中的第一个索引时,它有效地更改了所有行.

底线:不要Array.fill用来创建多维数组!

Answer 2

问题：

我打赌你有一个一维数组，每个数组中都存储有字符串。所以你的数组实际上看起来像：

array (
    [0] => '...',
    [1] => '.X.',
    [2] => '...'
)

当这是你想要的时：

array (
    [0] => array (
        [0] => '.',
        [1] => '.',
        [2] => '.'
    ),
    [1] => array (
        [0] => '.',
        [1] => 'X',
        [2] => '.'
    ),
    [2] => array (
        [0] => '.',
        [1] => '.',
        [2] => '.'
    )
)

解决方案：

构造二维数组时，请确保将每个条目显式声明board为数组。因此，要构建它，您的代码可能如下所示：

board = new Array();
rows = 3;
for (var i = 0; i < rows; i++)
    board[i] = new Array('.', '.', '.');