更改嵌套JS数组中的值

Question

以下代码应该创建一个包含7个空数组的空数组，实际上是一个7x7网格。

访问嵌套数组中的元素工作正常，但尝试更改其值会更改同一列中所有元素的值（因此更改[1] [1]也会更改[0] [1]，[2] [1 ]等）。我无法理解为什么。

var usage = new Array(7).fill(new Array(7).fill(0));

usage[1][1] += 1;

https://jsfiddle.net/v3o4rwsz/

Answer 1

这是一个容易陷入的陷阱。您的代码相当于：

var innerArray = [0,0,0,0,0,0,0]; // .fill(0)
var usage = [innerArray, innerArray, innerArray, innerArray,
             innerArray, innerArray, innerArray]; // .fill(innerArray)

console.log(usage[0]==innerArray); // true
console.log(usage[1]==innerArray); // true

要获得所需的结果，您需要为使用中的每个元素创建一个新数组，例如：

var usage = [];
for (var i=0; i<7; i++) {
    usage.push(new Array(7).fill(0));
}

Answer 2

第一个fill的内容只评估一次 - 创建第二个数组，然后它复制该数组7次，因此它们都是连接的。

相当于：

var t1 = new Array(7).fill(0);

var t2 = t1;
var t3 = t1;
var t4 = t1;
var t5 = t1;
var t6 = t1;
var t7 = t1;

t2[3] = "duplicate"

console.log(t1);
console.log(t2);
console.log(t3);

在t1到t7中会显示相同的值。

Answer 3

我认为这种行为是由您使用.fill()引起的。如果您查看function here的定义，您会看到它使用静态值填充数组

这意味着当您引用usage[1][1]时，您引用了usage[0][1]，usage[2][1]中存在的相同数组，依此类推。

您可以使用for循环填充数组，如下所示。

var usage2 = new Array();

for(var i=0;i<7;i++) { 
    usage2.push(new Array(7).fill(0));
}

现在，当您检查自己的值时，您会看到只有一个数组被更改的预期结果，例如我Chrome控制台的下方屏幕截图。