javascript - 修改多数组中的所有数组

我正在尝试用矩形区域“绘制”一些网格。但是，当我尝试只修改一行时，数组会修改所有它们。我尝试了几种初始化数组的方法，但是问题似乎出在我尝试修改它而不是修改Array对象时。

var multiArray = Array(8).fill(Array(8).fill(false));

// Fill square 3x1 at (2, 4)
for (var i = 0; i < 3; i++) {
  for (var j = 0; j < 1; j++) {
    multiArray[2 + i][4 + j] = true;
  }
}

document.getElementById("content").innerHTML =
  multiArray.map(a => a.map(e => e ? 'X' : '0').join(''))
    .join('<br />');

<div id="content" />

在这一点上，除了提供解决方案之外，我只想了解为什么会这样。 [][]表达式有什么问题。

我正在Chrome版本51.0中尝试此操作

最佳答案

Array(8).fill(Array(8).fill(false))仅创建两个数组，其中一个包含对另一个的八个引用。如果将它分成两行，这会更加明显-以下是等效的：

var tempArray = Array(8).fill(false);
var multiArray = Array(8).fill(tempArray);

所以这不是您想要的。尝试这样的事情：

var multiArray = Array(8).fill(0).map(_=>Array(8).fill(false));

我已经用占位符将第一个数组填充为零，以便.map()将访问所有这些元素，然后对于每个元素，我的小地图回调返回一个新数组，其中填充了false。

在上下文中：

var multiArray = Array(8).fill(0).map(_=>Array(8).fill(false));

// fill square 3x1 at (2, 4)
for (var i = 0; i < 3; i++) {
  for (var j = 0; j < 1; j++) {
    multiArray[2 + i][4 + j] = true;
  }
}

document.getElementById("content").innerHTML =
  multiArray.map(a => a.map(e => e ? 'X' : '0').join(''))
  .join('<br />');

<div id="content" />

关于javascript - 修改多数组中的所有数组，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/38849896/