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

把意大利炮给我拉出来

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

最近写项目过程中总是想写出漂亮的代码，一行代码搞定绝不用两行，也是踩了fill这个坑了
例如一个数组中想填充一些指定的数据

1. Array(10).fill(1)

复制代码

那么结果就会出现[1, 1, 1, 1, 1, 1, 1, 1, 1, 1] 十对应的1个
如果呢fill 这个方法接受的值是一个引用数据类型，那么他们会指向同一个地址。

1. let arr = Array(5).fill({}).map(it=>({}))
   
2. arr[0].a = 1

复制代码

输出结果：[{a:1}, {a:1}, {a:1}, {a:1}, {a:1}]
解决方案：使用map返回出不同的引用的地址，fill参数可随意填写（不为空），主要是map函数中返回的数据。
类型为数组：

1. let arr = Array(5).fill([]).map(it=>[])

复制代码

类型为对象：

1. Array(5).fill({}).map(it=>({}))

复制代码

注意：对象要用 小括号包裹 否则函数会以为是函数体，默认不写return 返回undefined 。

补充：JS中用Array.fill() 初始化 二维数组 避坑

现在有个需求，创建一个 m*n 的二维数组 先填充为false

1. 1.const P = new Array(3).fill(new Array(3).fill(false));
   
2. 
   
3. /*
   
4. [
   
5.     [false, false, false],
   
6.     [false, false, false],
   
7.     [false, false, false]
   
8. ]
   
9. */

复制代码

1. 2.
   
2. 
   
3. const P = new Array(3)
   
4. 
   
5. const obj = {name: 'qqq'}
   
6. 
   
7. P.fill(obj)
   
8. 
   
9. /*
   
10. [
    
11.     [false, false, false],
    
12.     [false, false, false],
    
13.     [false, false, false]
    
14. ]
    
15. */

复制代码

1和2当我改变一个值:

1. P[0][0] = true;

复制代码

结果都是

1. /*
   
2. [
   
3.     [true, false, false],
   
4.     [true, false, false],
   
5.     [true, false, false]
   
6. ]
   
7. */

复制代码

坑点：
如果value值为一个引用数据类型，则fill之后，数组里面的值指向的是同一个地址。如果改变了其中一个，则其它的都会改变。
解决：
1.利用双重for循环创建二维数组

1. for(var i = 0; i < 3; i++) {
   
2.     arr[i] = new Array();
   
3.     for(var j = 0; j < 3; j++) {
   
4.        arr[i][j] = 0;
   
5.     }
   
6. }

复制代码

2.先用空数组填充，然后再 map 遍历空数组，添加元素。

1. const P = new Array(3).fill([]).map(() => new Array(3).fill(false));

复制代码

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

来源:https://www.jb51.net/article/276319.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！