JavaScript 踩坑 —— 使用 Array.fill( ) 填充对象导致的重大问题

JavaScript创建二维数组时尽量不要使用Array.fill( )的嵌套方式

当我们想使用 Array.fill( ) 来填充一个全是对象的数组时需要特别注意
Array(size).fill({ }) 这样填充创建的数组，里面每一项{ }是完全相同的

问题是这样发现的~

const row = 5, col = 3  // 5行3列

let arr1 = Array(row).fill(Array(col).fill(0))
let arr2 = Array.from(Array(row), item => new Array(col).fill(0))

arr1[1][1] = 1
arr2[1][1] = 1

console.log('arr1 修改后', arr1);
console.log('arr2 修改后', arr2);

执行上述代码时发现，用Array.fill()来向一个数组中填充若干个数组来创建二维数组，然后更改其中一个值时，那一列的所有值都发生了改变，于是引发了我的思考！！ 然后就有了下面的测试语句：

const size = 5
let arr = Array(size).fill({});
console.log(arr[1] === arr[2])    //true

//哪怕是使用 new Object() 来创建每一项，一旦使用fill(), 则每一项也全等
let other = Array(size).fill( new Object() )
console.log(other[1] === other[2])       //true 

//即使使用 Object.create({ }), 也是一样的效果
let arr_new = Array(size).fill( Object.create({}) )
console.log(arr_new[1] === arr_new[2])    //true

结论

JavaScript创建二维数组时尽量不要使用Array.fill( )的嵌套方式，可以选用其他的方式: JS一行代码实现二维数组的声明与初始化（3种方法）