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

更新时间：2023年02月24日 09:53:42 作者：奥特曼

这篇文章主要介绍了JS解决 Array.fill()参数为对象指向同一个引用地址问题，解决方案使用map返回出不同的引用的地址，fill参数可随意填写（不为空），主要是map函数中返回的数据,需要的朋友可以参考下

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()参数为对象指向同一个引用地址的文章就介绍到这了,更多相关js Array.fill()参数为对象指向同一个引用地址内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

JavaScript File API文件上传预览
这篇文章主要为大家详细介绍了JavaScript File API实现文件上传预览的详细代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-02-02
让IE8支持DOM 2（不用框架！）
众所周知，IE8开放了对DOM原型的支持以及ECMA v5的两个新方法——Object.defineProperty和Object.getOwnPropertyDexcriptor（单词好长……），并且这两个新方法居然只能用于DOM。
2009-12-12
使用滤镜设置透明导致 IE 6/7/8/9 解析异常的解决方法
使用滤镜设置透明导致 IE 6/7/8/9 解析异常的解决方法，需要的朋友可以参考下。
2011-04-04
通过js给网页加上水印背景实例
这篇文章主要介绍了通过js给网页加上水印背景实例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，,需要的朋友可以参考下
2019-06-06
js简易版购物车功能
这篇文章主要为大家分享了js简易版的购物车，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-06-06
Javascript使用function创建类的两种方法(推荐)
下面小编就为大家带来一篇Javascript使用function创建类的两种方法(推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-11-11
JavaScript数组every方法的应用场景实例
every方法确定数组中的每一项的结果都满足所写的条件的时候,就会返回true,否则返回false,这篇文章主要给大家介绍了关于JavaScript数组every方法应用场景的相关资料,需要的朋友可以参考下
2022-12-12
ScrollDown的基本操作示例
本文将涉及到scroll方法的应用，判断当滚动条滚到底部时触发scrollTop执行函数,具体代码如下，感兴趣的朋友可以了解下哈
2013-06-06
JS中innerHTML和pasteHTML的区别实例分析
这篇文章主要介绍了JS中innerHTML和pasteHTML的区别,结合实例形式较为详细的分析了innerHTML和pasteHTML的具体功能与使用区别,需要的朋友可以参考下
2016-06-06
详解Matlab中 sort 函数用法
这篇文章主要介绍了matlab中 sort 函数用法的相关资料,需要的朋友可以参考下
2016-03-03