JS中用Array.fill() 初始化 二维数组 避坑！

现在有个需求，创建一个 m*n 的二维数组 先填充为false

1.const P = new Array(3).fill(new Array(3).fill(false));

/* 
[
    [false, false, false],
    [false, false, false],
    [false, false, false]
]
*/

2.

const P = new Array(3)

const obj = {name: 'qqq'}

P.fill(obj)

/*
[ 
    [false, false, false],
    [false, false, false],
    [false, false, false]
]
*/

1和2当我改变一个值:

P[0][0] = true;

结果都是

/* 
[ 
    [true, false, false],
    [true, false, false],
    [true, false, false]
]
*/

坑点：

如果value值为一个引用数据类型，则fill之后，数组里面的值指向的是同一个地址。如果改变了其中一个，则其它的都会改变。

解决：

1.利用双重for循环创建二维数组

for(var i = 0; i < 3; i++) {
    arr[i] = new Array();
    for(var j = 0; j < 3; j++) {
       arr[i][j] = 0;
    }
}

2.先用空数组填充，然后再 map 遍历空数组，添加元素。

 const P = new Array(3).fill([]).map(() => new Array(3).fill(false));