更新 Javascript 2D 数组中的元素会更新整列

Question

我在 Javascript 中创建了一个 2D 数组（4x4），如下所示：

let visited = new Array(4).fill(new Array(4).fill(false));
console.log(visited);

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

当我尝试更新单个元素时，它最终会更新整个列。 为什么会这样？

visited[0][0] = true;
console.log(visited);

你可以看到这个repl

预期的：

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

实际的：

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

Answer 1

Array.fill的文档在Array.fill是您的朋友：

请注意，数组中的所有元素都将是这个精确值。

这告诉您每个子数组实际上都是相同的数组。 因此，如果你改变一个，你就会改变它们。

查看下面的代码，您会看到第一个比较为false ，而第二个比较为true

 console.log([false,false,false,false] ===[false,false,false,false]) const arr = new Array(4).fill([false,false,false,false]); console.log(arr[0] === arr[1]);

Answer 2

用循环构建你的矩阵，而不是new Array().fill()

  let visited = [];

  for (let i = 0; i < 4; i++) {
    visited.push([]);
    for (let j = 0; j < 4; j++) {
      visited[i].push(false);
    }
  }

  visited[0][0] = true;
  console.log(visited);

Answer 3

我的朋友改变了你创建矩阵的方式，只需使用 .map() 签出这个变体：

 let visited = 
    (new Array(4)).fill().map(function(){ return new Array(4).fill(false);});
    visited[0][0] = true;
    console.log(visited)
    
    0: (4) [true, false, false, false]
    1: (4) [false, false, false, false]
    2: (4) [false, false, false, false]
    3: (4) [false, false, false, false]

和平 ：）