修改多阵列中的所有阵列

Question

我正在尝试用矩形区域"绘制"一些网格。但当我试图修改一行时，数组会修改所有一行。我尝试用几种方法初始化数组，但问题似乎是当我试图修改它时，而不是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版本中尝试这个

Answer 1

Array(8).fill(Array(8).fill(false))只创建两个数组，其中一个包含对另一个的8个引用。如果将它分成两行，这一点就更明显了——下面是等价的:

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

所以这不是你想要的。试试这样做:

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

我已经用0填充了第一个数组，就像占位符一样，这样.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" />

Answer 2

创建N维数组有点棘手，因为数组是引用类型。我以前做过如下的事情。arrayND函数将每个维度的大小作为参数，最后一个参数是初始值。我希望这对你有帮助。

Array.prototype.clone = function(){
  return this.map(e => Array.isArray(e) ? e.clone() : e);
};
function arrayND(...n){
  return n.reduceRight((p,c) => c = (new Array(c)).fill().map(e => Array.isArray(p) ? p.clone() : p ));
}
var arrND = arrayND(8,8,false);
console.log(arrND);