数组填充【fill】使用的坑

期望结果

因为项目需要，会根据一个数字生成指定长度的数组，并填充每一项为数组，从而得到一个二维数组

即：
当后台返回数据为： 3
需要得到的结果为：[ [ ], [ ], [ ] ]

实现与坑

实现

最开始想到的是使用数组的 fill 进行填充

const arr = new Array(3).fill([]) // 得到期望结果: [ [], [], [] ]

坑

当我需要向得到的二维数组内填充数据时却得到意外的结果

arr[0].push({key:1}) // 期望结果：[[{key:1}],[],[]]
console.log(arr) // 实际结果：[[{key:1}],[{key:1}],[{key:1}]]

总结

使用上述方法进行数据处理时，始终发现数据不正确。
通过排除发现无论是 push 任何数据进入数组的任何一项都会得到，数组每一项都是相同的结果。
从而判定使用fill方法填充非基础类型数据时是使用的引用数据类型

解决方案

因为使用fill是引用数据类型，从而只能使用传统的for循环实现

 const arr = []
 for (let i = 0; i < 6; i++) {
   arr.push([])
 }
 console.log(arr) // [ [], [], [] ]
 arr[0].push({key:1}) 
 console.log(arr) // [[{key:1}],[],[]]