为什么对单元格所做的更改会传播到使用fill创建的这个二维数组中的其他单元格？

Question

我在JS中使用这个2维数组有问题.当我改变时a[1][0],随之a[0][0]改变.我初始化它的方式有什么问题吗？如果是,我该如何正确初始化它？

>var a = Array(100).fill(Array(100).fill(false));
>a[0][0]
>false
>a[1][0]
>false
>a[1][0] = true
>true
>a[1][0]
>true
>a[0][0]
>true

Answer 1

var a = Array(100).fill(Array(100).fill(false));

a包含一个数组,每个元素都引用一个数组.您正在使用包含所有错误值的数组填充外部数组.内部数组只进行一次,并且对同一数组的引用被传递给外部数组的每个元素,这就是为什么如果对一个元素执行操作,它也会反映在其他元素上.

这实际上相当于

var a1 = Array(100).fill(false);
var a = Array(100).fill(a1);

这里a有100个元素都引用了相同的数组a1.因此,如果更改一个元素a,则所有元素都会更改,因为它们是对同一个数组的引用.

您需要使用新数组填充外部数组中的每个元素.你可以这样做:

var a = [];
for(var i=0; i<100; i++)
  a.push(Array(100).fill(false));

Answer 2

您的整个数组将填充对相同(第二维)数组对象的引用.

要用不同的对象填充它,你必须做这样的事情:

const a = Array(100).fill(false).map(x => Array(100).fill(false));

a[0][0] = true;

console.log(a[0][0]);
console.log(a[0][1]);
console.log(a[1][1]);

需要注意的是初始数组中的值需要被明确设置的东西(在我的例子false,但也可以undefined),因为构造函数创建数组是稀疏和map()功能将只对实际存在的属性进行操作.

要解决这个问题,您可以使用Array.from():

const a = Array.from(Array(100), x => Array(100).fill(false));

a[0][0] = true;

console.log(a[0][0]);
console.log(a[0][1]);
console.log(a[1][1]);

Answer 3

这些看起来像是一个重复的问题，但我总是使用这样的东西

var x = new Array(10);
for (var i = 0; i < 10; i++) {
  x[i] = new Array(10).fill(false);
}
x[5][5] = true

图片来源：如何在 JavaScript 中创建二维数组？