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种方法)