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

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

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

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)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

Kettle中使用JavaScrip調(diào)用jar包對(duì)文件內(nèi)容進(jìn)行MD5加密的操作方法
這篇文章主要介紹了Kettle中使用JavaScrip調(diào)用jar包對(duì)文件內(nèi)容進(jìn)行MD5加密的方法，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2020-09-09
廣告代碼靜態(tài)化js通用函數(shù)
廣告代碼靜態(tài)化js通用函數(shù)...
2007-05-05
深入剖析JavaScript中Geolocation?API的使用
這篇文章主要來(lái)和大家一起深入探討?JavaScript?的?Geolocation?API,看看它的強(qiáng)大之處以及如何在你的項(xiàng)目中應(yīng)用它,感興趣的可以了解下
2024-03-03
微信小程序開(kāi)發(fā)之實(shí)現(xiàn)記賬本
這篇文章主要為大家詳細(xì)介紹了如何通過(guò)微信小程序開(kāi)發(fā)一個(gè)簡(jiǎn)單的記賬本，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以和小編一起學(xué)習(xí)一下
2023-01-01
js實(shí)現(xiàn)精確到秒的日期選擇器完整實(shí)例
這篇文章主要介紹了js實(shí)現(xiàn)精確到秒的日期選擇器,以完整實(shí)例形式分析了JavaScript日期選擇器的實(shí)現(xiàn)步驟與相關(guān)技巧,涉及JavaScript針對(duì)時(shí)間與日期的相關(guān)運(yùn)算,需要的朋友可以參考下
2016-04-04
JS生態(tài)系統(tǒng)加速一次一庫(kù)PostCSS SVGO的重構(gòu)源碼和性能優(yōu)化探索
這篇文章主要介紹了JS生態(tài)系統(tǒng)加速一次一庫(kù)PostCSS SVGO的重構(gòu)源碼和性能優(yōu)化探索,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
2024-01-01
微信小程序?qū)崿F(xiàn)星級(jí)評(píng)分和展示
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)星級(jí)評(píng)分和展示效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2018-07-07
一個(gè)JavaScript獲取元素當(dāng)前高度的實(shí)例
這篇文章主要為大家介紹了一個(gè)JavaScript獲取元素當(dāng)前高度的實(shí)例，比較實(shí)用，建議新手朋友們可以看看
2014-10-10
Fullpage.js固定導(dǎo)航欄-實(shí)現(xiàn)定位導(dǎo)航欄
FullPage.js 是一個(gè)簡(jiǎn)單而易于使用的插件，用來(lái)創(chuàng)建全屏滾動(dòng)網(wǎng)站（也被稱為單頁(yè)網(wǎng)站）。接下來(lái)通過(guò)本文給大家介紹Fullpage.js固定導(dǎo)航欄-實(shí)現(xiàn)定位導(dǎo)航欄，對(duì)fullpage.js導(dǎo)航欄相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧
2016-03-03
微信小程序使用wx.navigateTo路由跳轉(zhuǎn)層級(jí)限制問(wèn)題小結(jié)
在微信小程序開(kāi)發(fā)中,wx.navigateTo和wx.redirectTo是兩種頁(yè)面跳轉(zhuǎn)方式,wx.navigateTo允許跳轉(zhuǎn)到新頁(yè)面并保留當(dāng)前頁(yè)面,適合需要返回的場(chǎng)景,但受頁(yè)面棧10層限制,wx.redirectTo則關(guān)閉當(dāng)前頁(yè)面后跳轉(zhuǎn),本文介紹微信小程序使用wx.navigateTo路由跳轉(zhuǎn)層級(jí)限制問(wèn)題
2024-10-10