目錄

• JS解決 Array.fill()參數(shù)為對(duì)象指向同一個(gè)引用地址
• 補(bǔ)充：JS中用Array.fill() 初始化 二維數(shù)組 避坑

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

最近寫(xiě)項(xiàng)目過(guò)程中總是想寫(xiě)出漂亮的代碼，一行代碼搞定絕不用兩行，也是踩了fill這個(gè)坑了

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

Array(10).fill(1)

那么結(jié)果就會(huì)出現(xiàn)[1, 1, 1, 1, 1, 1, 1, 1, 1, 1] 十對(duì)應(yīng)的1個(gè)

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

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ù)可隨意填寫(xiě)（不為空），主要是map函數(shù)中返回的數(shù)據(jù)。

類型為數(shù)組：

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

類型為對(duì)象：

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

注意：對(duì)象要用 小括號(hào)包裹 否則函數(shù)會(huì)以為是函數(shù)體，默認(rèn)不寫(xiě)return 返回undefined 。

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

現(xiàn)在有個(gè)需求，創(chuàng)建一個(gè) 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當(dāng)我改變一個(gè)值:

P[0][0] = true;

結(jié)果都是

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

坑點(diǎn)：

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

解決：

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ù)為對(duì)象指向同一個(gè)引用地址的文章就介紹到這了,更多相關(guān)js  Array.fill()參數(shù)為對(duì)象指向同一個(gè)引用地址內(nèi)容請(qǐng)搜索以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持！