二维数组的意外结果 - 整列已更改

Question

给定一个 3x3 矩阵，我想将第一行第三列中的元素设置为 true。

我希望m[0][2] = true 会这样做，但事实并非如此。它将整列设置为 true！

我创建数组并设置值的代码如下。是什么导致了这种行为？

const size = 3;

const m = Array(size).fill(Array(size).fill(false))

console.log(m); 
/* [[false, false, false], 
    [false, false, false], 
    [false, false, false]]
*/

m[0][2] = true;

console.log(m);
/*
   [[false, false, true], 
    [false, false, true], 
    [false, false, true]]
*/

Answer 1

您在每个位置都用相同的数组填充第一个数组。

let array1 = [false, false, false];
let array2 = array1;
array1[2] = true;
console.log(array2);

使用 Array.from

let size = 3;
let m = Array.from({ length: size }, _ => Array.from({ length: size }, _ => false));
console.log(m);
m[0][2] = true;
console.log(m);

这样，您在*数组的每个插槽中都有一个不同的数组实例。

您可以在函数中使用 Array.fill，因为 false 是值对象而不是引用对象。

let size = 3;
let m = Array.from({ length: size }, _ => Array(size).fill(false));
console.log(m);
m[0][2] = true;
console.log(m);

Answer 2

在 JavaScript 中创建 2D 矩阵的 7 种方法：

一个衬垫：

const size = 3;
const val = null;

const m1 = Array(size).fill(Array(size).fill(val)); // issue: rows are all the same.
const m2 = Array(size).fill([...Array(size).fill(val)]); // issue: rows are the same;

const m3 = Array(size).fill().map(_ => Array(size).fill(val));
const m4 = Array.from(Array(size), _ => Array(size).fill(val));

const m5 = Array.from({length: size}, _ => Array.from({length: size}, _ => val))

所有这些都将创建大小 x 大小的矩阵。但是，直接使用Array.fill 将通过引用而不是值创建副本（例如m1 和m2）。您可以在映射器函数中使用Array.fill 来解决问题（例如m3、m4 和m7）。最后，您可以使用Array.from 两次创建矩阵。

还有另外 2 种创建矩阵的方法，但没有那么优雅。

使用 for 循环：

const m6 = [];
for(let i = 0; i < size; i++) {
    m6[i] = [];
    for(let j = 0; j < size; j++) {
        m6[i][j] = val;
    }
}

const m7 = Array(size);
for(let i = 0; i < m7.length; i++) {
    m7[i] = Array(size).fill(val);
}