JS解決 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));

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