JS怎么解决Array.fill()参数为对象指向同一个引用地址的问题

开发技术 作者:iii 2024-04-22 10:35:02
本篇内容介绍了“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));

“JS怎么解决Array.fill()参数为对象指向同一个引用地址的问题”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注捷杰建站网站,小编将为大家输出更多高质量的实用文章!

原创声明
本站部分文章基于互联网的整理,我们会把真正“有用/优质”的文章整理提供给各位开发者。本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
本文链接:http://www.jiecseo.com/news/show_15757.html
js