JS解決?Array.fill()參數(shù)為對象指向同一個引用地址的問題

更新時間：2023年02月24日 09:53:42 作者：奧特曼

這篇文章主要介紹了JS解決?Array.fill()參數(shù)為對象指向同一個引用地址問題，解決方案使用map返回出不同的引用的地址，fill參數(shù)可隨意填寫（不為空），主要是map函數(shù)中返回的數(shù)據(jù),需要的朋友可以參考下

JS解決 Array.fill()參數(shù)為對象指向同一個引用地址

最近寫項目過程中總是想寫出漂亮的代碼，一行代碼搞定絕不用兩行，也是踩了fill這個坑了

例如一個數(shù)組中想填充一些指定的數(shù)據(jù)

Array(10).fill(1)

那么結(jié)果就會出現(xiàn)[1, 1, 1, 1, 1, 1, 1, 1, 1, 1] 十對應的1個

如果呢fill 這個方法接受的值是一個引用數(shù)據(jù)類型，那么他們會指向同一個地址。

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

輸出結(jié)果：[{a:1}, {a:1}, {a:1}, {a:1}, {a:1}]

解決方案：使用map返回出不同的引用的地址，fill參數(shù)可隨意填寫（不為空），主要是map函數(shù)中返回的數(shù)據(jù)。

類型為數(shù)組：

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

類型為對象：

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

注意：對象要用小括號包裹否則函數(shù)會以為是函數(shù)體，默認不寫return 返回undefined 。

補充：JS中用Array.fill() 初始化二維數(shù)組避坑

現(xiàn)在有個需求，創(chuàng)建一個 m*n 的二維數(shù)組先填充為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;

結(jié)果都是

/* 
[ 
    [true, false, false],
    [true, false, false],
    [true, false, false]
]
*/

坑點：

如果value值為一個引用數(shù)據(jù)類型，則fill之后，數(shù)組里面的值指向的是同一個地址。如果改變了其中一個，則其它的都會改變。

解決：

1.利用雙重for循環(huán)創(chuàng)建二維數(shù)組

for(var i = 0; i < 3; i++) {
    arr[i] = new Array();
    for(var j = 0; j < 3; j++) {
       arr[i][j] = 0;
    }
}

2.先用空數(shù)組填充，然后再 map 遍歷空數(shù)組，添加元素。

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

到此這篇關(guān)于JS解決 Array.fill()參數(shù)為對象指向同一個引用地址的文章就介紹到這了,更多相關(guān)js Array.fill()參數(shù)為對象指向同一個引用地址內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: