Array.prototype.fill()生成二维数组问题

我打算使用Array.prototype.fill()快速生成二维数组，代码如下

1

let p = new Array(10).fill(new Array(5).fill(0))

预期生成10 * 5的二维数组
但是，当我们操作数组时，会发现出现了问题,以下代码使得所有p[i][0]都变为了10，这说明填充的数组都指向同一个引用。

1

p[0][0] = 10

查阅MDN，得知填充的是数组的引用。

If the first parameter is an object, each slot in the array will reference that object.

解决
为了解决以上问题，我们尝试使用Array.prototype.map()方法

1

let p = new Array(10).map(() => new Array(5).fill(0))

控制台打印p，发现他是一个包含了10个empty items的一维数组，说明map失败。

Array.map的callback只会针对已经赋值过的item进行调用（包括undefined）。
所以当有的元素被删除了，或者从来没有被赋值的时候，callback不会调用这个元素。

map calls a provided callbackFn function once for each element in an array, in order, and constructs a new array from the results. callbackFn is invoked only for indexes of the array which have assigned values (including undefined).

优化: 初始化时赋值为null

1

let p = new Array(10).fill(null).map(() => new Array(5).fill(0))

其它方法：使用索引迭代器Array.prototype.keys()，利用扩展运算符可以获取从没赋值的empty items。

1

let p = [...Array(10).keys()].map(() => new Array(5).fill(0))