我正在尝试用矩形区域“绘制”一些网格。但是,当我尝试只修改一行时,数组会修改所有它们。我尝试了几种初始化数组的方法,但是问题似乎出在我尝试修改它而不是修改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/