为什么多次调用 Array.fill 会影响未引用的数组？ [复制]

Question

尝试使用 Javascript 实例化数组的不同方法，我注意到一些有趣的行为：

matrix = Array(3).fill(Array(3).fill(0))

创建一个包含 0 个值的 NxN 矩阵

[
  [0,0,0],
  [0,0,0],
  [0,0,0]
]

然后我尝试将矩阵的第一行更改为全 1：

matrix[0].fill(1)

由于某种原因，将矩阵中的所有值都变为 1：

[
  [1,1,1],
  [1,1,1],
  [1,1,1]
]

这种行为对我来说没有意义。对 Array.fill 的最终调用不应该只影响第一行吗？这是怎么回事？

Answer 1

你的代码相当于

let row = [0,0,0]
let matrix = [row, row, row];
row.fill(1);

因为.fill(Array(3).fill(0)) 调用Array(3).fill(0) 一次以获取填充值 - 如果填充参数是回调，那么它将为矩阵中的每个项目调用它 - 但填充参数是一个值

在 javascript 中，数组被称为引用

var a = [1,2,3], b=a;
b[0] = 4

将导致a 和b 都引用具有值[4,2,3] 的数组

所以，由于每个row 都是同一个数组，所以你的结果就像你看到的那样

试试这个

const matrix = Array.from({length:3}, () => Array(3).fill(0))
matrix[0].fill(1);
console.log(matrix);

以上等价于

const matrix = [Array(3).fill(0), Array(3).fill(0), Array(3).fill(0)];
matrix[0].fill(1);

现在矩阵中的每个条目都是一个不同的数组，每次都不一样