关于ES6中Array.fill方法的使用细节

Array.fill的具体定义请看这里

这个方法在平时的开发中有事提供了很大的便利,但是有一个细节容易被忽略,造成貌似看起来很诡异的bug
比如你生成了10个内容为{hasMore: false}

let states = Array.fill({hasmore: false})

你想去动态改变其中某一项的值,你会发现整个数组里面的值全都变化了,这是因为你忽略了这个方法的一个注意事项:

如果填充的类型为对象,那么被赋值的是同一个内存地址的对象,而不是深拷贝对象。

所以尽量的不要填充对象类型,因为生成的n个数组成员其实都是指向同一个对象的,这种情况下要么填充基本类型的值要么去做一个深拷贝的,但是如果必须考虑后者,那对于使用这个Array.fill这个方法去解决一个问题的决定就不那么明智了,所以这里还是推荐使用基本变量填充。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
回答: 在Vue使用`new Array().fill()`的方式来创建数组时需要注意一个bug。当使用`new Array().fill({})`来填充数组时,数组的每个元素都会引用同一个对象。这意味着,如果修改其一个元素的属性,其他元素的属性也会被修改。例如,当执行`let a = new Array(3).fill({});`后,`a`数组的每个元素都引用了同一个空对象。当我们修改其一个元素的属性时,例如`a\[0\].name = '张三';`,所有元素的属性都会被修改,结果为`\[{name: "张三"}, {name: "张三"}, {name: "张三"}\]`。\[3\]所以在使用`new Array().fill()`创建数组时,需要注意这个bug,如果需要每个元素都是独立的对象,可以使用其他方式来创建数组。 #### 引用[.reference_title] - *1* *2* [从Vue看ES6Array的fill方法](https://blog.csdn.net/fredricen/article/details/109842356)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [new Array(n).fill()创建数组](https://blog.csdn.net/zqlbanzhuan/article/details/127865785)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值