如何经过Array.fill()的参数为对象类型的变量指向同一个引用

这篇文章主要讲解了“如何通过Array.fill()的参数为对象类型的变量指向同一个引用”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“如何通过Array.fill()的参数为对象类型的变量指向同一个引用”吧！

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));

这篇关于“如何通过Array.fill()的参数为对象类型的变量指向同一个引用”的文章就介绍到这了,更多相关的内容，小编将为大家输出更多高质量的实用文章！

（编辑：银川站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!