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

  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值