在填充（）之后在矩阵中设置值返回不正确的矩阵[重复]答案

【问题标题】：Setting the value in a matrix after fill() returns incorrect matrix [duplicate]在填充（）之后在矩阵中设置值返回不正确的矩阵[重复]
【发布时间】：2019-12-22 04:05:47
【问题描述】：

如果我像这样初始化矩阵

x = [["O", "O", "O"], ["O", "O", "O"], ["O", "O", "O"]];

然后设置 x[0][1] = "X" 它返回

[ [ 'O', 'X', 'O' ], [ 'O', 'O', 'O' ], [ 'O', 'O', 'O' ] ]

如预期的那样

但是，如果我将矩阵初始化如下：

x = new Array(3).fill(new Array(3).fill('O'))

然后 x[0][1] = "X" 它给了我回报

[ [ 'O', 'X', 'O' ], [ 'O', 'X', 'O' ], [ 'O', 'X', 'O' ] ]

这是怎么回事？

【问题讨论】：

您正在用一个位于所有三个“外部”数组位置的数组来初始化“外部”数组。
而不是用 undefined 填充它，然后使用 map 填充它：x = new Array(3).fill().map(a=>new Array(3).fill('O'));

标签： javascript

【解决方案1】：

当你这样做时：

x = [["O", "O", "O"], ["O", "O", "O"], ["O", "O", "O"]];

Javascript 正在内存中创建 3 个不同的数组，因此当您访问 x[0][1] 时，您只是在访问该数组。

当您使用时：

x = new Array(3).fill(new Array(3).fill('O'))

您基本上是用相同的数组填充数组 3 次，因此当您访问 x[0][1] 时，您访问的内存中的同一个数组也连接到 x[1] 和 x[2]。

正如@Shidersz 评论的那样，可能的迭代解决方案是：

// one liner:
Array.from({length: 3}, x => new Array(3).fill("0"));

这是创建一个数组并使用从输入函数返回的值填充它。这是一个细分：

// same as previous only longer with comments
// Create an Array from the first argument,
//as modified by the mapping function in the 2nd argument
Array.from(
  // This could be any array like object. 
  // In the case of length it just reads the length property
  // and iterates that number of times,
  // so it could be useful if you want to 
  // fill the top array with 100000 arrays.
  {length: 3},
  // x argument for the mapping is irrelevant
  x => {
    // returning the array with 3 "0" strings in it.
    return  new Array(3).fill("0")
  });

docs here 更多参考。

【讨论】：

您可以改进此答案，显示满足 OP 目标的替代方法，使用：Array.from({length: 3}, _ => new Array(3).fill("0"))
@Shidersz 这是一个非常好的解决方案，我会将其添加到答案中

【解决方案2】：

问题在于这行代码构建了一个包含三个元素的数组，其中每个元素都指向同一个数组：

x = new Array(3).fill(new Array(3).fill('O'))

为了帮助解释，请考虑这个例子。您的代码与此基本相同：

innerArray = new Array(3).fill('O');
x = [innerArray, innerArray, innerArray];

请注意，每个元素都指向同一个确切的数组。如果您将代码更改为此，数组将按照您期望的方式运行，因为每个元素都是一个单独的数组：

x = [new Array(3).fill('O'), new Array(3).fill('O'), new Array(3).fill('O')];

【讨论】：