更新 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);你可以看看这个回复预期的：[  [ 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

用循环构建矩阵，而不是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 2

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 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]

和平 ：）