JS解決?Array.fill()參數(shù)為對象指向同一個引用地址的問題
JS解決 Array.fill()參數(shù)為對象指向同一個引用地址
最近寫項目過程中總是想寫出漂亮的代碼,一行代碼搞定絕不用兩行,也是踩了fill這個坑了
例如一個數(shù)組中想填充一些指定的數(shù)據(jù)
Array(10).fill(1)
那么結果就會出現(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
輸出結果:[{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;
結果都是
/* [ [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));
到此這篇關于JS解決 Array.fill()參數(shù)為對象指向同一個引用地址的文章就介紹到這了,更多相關js Array.fill()參數(shù)為對象指向同一個引用地址內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
使用濾鏡設置透明導致 IE 6/7/8/9 解析異常的解決方法
使用濾鏡設置透明導致 IE 6/7/8/9 解析異常的解決方法,需要的朋友可以參考下。2011-04-04Javascript使用function創(chuàng)建類的兩種方法(推薦)
下面小編就為大家?guī)硪黄狫avascript使用function創(chuàng)建類的兩種方法(推薦)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-11-11JavaScript數(shù)組every方法的應用場景實例
every方法確定數(shù)組中的每一項的結果都滿足所寫的條件的時候,就會返回true,否則返回false,這篇文章主要給大家介紹了關于JavaScript數(shù)組every方法應用場景的相關資料,需要的朋友可以參考下2022-12-12JS中innerHTML和pasteHTML的區(qū)別實例分析
這篇文章主要介紹了JS中innerHTML和pasteHTML的區(qū)別,結合實例形式較為詳細的分析了innerHTML和pasteHTML的具體功能與使用區(qū)別,需要的朋友可以參考下2016-06-06