二维数组的意外结果--整列都被改变了。

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

7种在JavaScript中创建二维矩阵的方法。

单行本。

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

所有这些都会创建大小×大小的矩阵。然而，使用 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);
}