javascript - 设置二维数组(网格)中第一个数组的第一个元素设置每个内部数组中的第一个元素

Question

这个问题已经有答案了:

Array.prototype.fill() with object passes reference and not new instance (7 个回答)

已关闭 6 年前。

我正在 JavaScript 中创建一个 3x3 网格，所有值都初始化为 false像这样:

let myGrid = Array(3).fill(Array(3).fill(false));

初始化后网格值为:

[false, false, false],
[false, false, false],
[false, false, false]

如果我然后将元素 [0,0] 设置为 true，例如:

myGrid[0][0] = true;

我希望这些值为:

[true,  false, false],
[false, false, false],
[false, false, false]

但事实上，生成的二维数组变为:

[true, false, false],
[true, false, false],
[true, false, false]

当我只设置第一个数组的第一个元素时，为什么每个内部数组中的第一个元素都发生了变化？

Answer 1

fill()，当传递一个数组时，填充对该数组的引用。因此，您的第二维数组实际上是同一个数组。无论您对一个引用做什么，都会对其引用进行操作，这自然会反射(reflect)在指向该引用的所有其他引用中。

为了说明这一点，您在问题中所做的与执行的操作相同:

var $a = [false, false, false];
let myGrid = array(3);
myGrid[0] = $a;
myGrid[1] = $a;
myGrid[2] = $a;

每次更改 myGrid[0] 的值时，您实际上是在访问对 $a 的引用，并且由于该引用仍然是 >myGrid[1] 和 myGrid[2] 指向，您实际上也会修改它们。

为了避免这种情况，每次要为 myGrid 数组分配值时，您都必须定义一个新数组。