JS怎么解决Array.fill()参数为对象指向同一个引用地址的问题
本篇内容介绍了“JS怎么解决Array.fill()参数为对象指向同一个引用地址的问题”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!
JS解决 Array.fill()参数为对象指向同一个引用地址
最近写项目过程中总是想写出漂亮的代码,一行代码搞定绝不用两行,也是踩了fill这个坑了
例如一个数组中想填充一些指定的数据
Array(10).fill(1)
那么结果就会出现[1, 1, 1, 1, 1, 1, 1, 1, 1, 1] 十对应的1个
如果呢fill 这个方法接受的值是一个引用数据类型,那么他们会指向同一个地址。
let arr = Array(5).fill({}).map(it=>({}))
arr[0].a = 1
输出结果:[{a:1}, {a:1}, {a:1}, {a:1}, {a:1}]
解决方案:使用map返回出不同的引用的地址,fill参数可随意填写(不为空),主要是map函数中返回的数据。
类型为数组:
let arr = Array(5).fill([]).map(it=>[])
类型为对象:
Array(5).fill({}).map(it=>({}))
注意:对象要用 小括号包裹 否则函数会以为是函数体,默认不写return 返回undefined 。
补充:JS中用Array.fill() 初始化 二维数组 避坑
现在有个需求,创建一个 m*n 的二维数组 先填充为false
1.const P = new Array(3).fill(new Array(3).fill(false));
/*
[
[false, false, false],
[false, false, false],
[false, false, false]
]
*/
2.
const P = new Array(3)
const obj = {name: 'qqq'}
P.fill(obj)
/*
[
[false, false, false],
[false, false, false],
[false, false, false]
]
*/
1和2当我改变一个值:
P[0][0] = true;
结果都是
/*
[
[true, false, false],
[true, false, false],
[true, false, false]
]
*/
坑点:
如果value值为一个引用数据类型,则fill之后,数组里面的值指向的是同一个地址。如果改变了其中一个,则其它的都会改变。
解决:
1.利用双重for循环创建二维数组
for(var i = 0; i < 3; i++) {
arr[i] = new Array();
for(var j = 0; j < 3; j++) {
arr[i][j] = 0;
}
}
2.先用空数组填充,然后再 map 遍历空数组,添加元素。
const P = new Array(3).fill([]).map(() => new Array(3).fill(false));
相关内容
这些是最新的
热门排行
- THINKPHP5+GatewayWorker+Workerman 开发在线客服系统
- 在手机浏览器网页中点击链接跳转到微信界面的方法
- 尊云网站目录系统 ThinkPHP5网站分类目录程序 v2.2.221011
- CentOS 7安装shadowsock(一键安装脚本)
- AdminTemplate 基于LayUI 2.4.5实现的网站后台管理模板
- 用NW.js(node-webkit)开发多平台的桌面客户端
- PHP生成随机昵称/用户名
- THINKPHP5网站分类目录程序 尊云网站目录系统
- 织梦(DEDECMS)微信支付接口 微信插件
- 基于LayUI开发的 网站后台管理模板 BeginnerAdmin
- 响应式后台网站模板 - AMA.ADMIN
- layuiAdmin后台管理模板 Iframe版
- LayUI 1.0.9 升级 至 LayUI 2.1.4 方法
- 简洁清爽的会员中心模板
- jQuery幸运大转盘抽奖活动代码