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

Question

我正在尝试用矩形区域“绘制”一些网格。但是，当我尝试仅修改一行时，数组会修改所有行。我尝试以多种方式初始化数组，但问题似乎是当我尝试修改它时，而不是数组对象。

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 中尝试此操作

Answer 1

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() 将访问所有这些元素，然后对于每个元素，我的小 map 回调返回一个 new 数组填充 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" />