vue使用map代替Aarry數(shù)組循環(huán)遍歷的方法
需求：根據(jù)主鍵id來找到對(duì)應(yīng)的數(shù)組下標(biāo)
原本的方法是使用for循環(huán)遍歷該數(shù)組，變量 i 就是下標(biāo)，問題在于，如果有多重for循環(huán)，就會(huì)導(dǎo)致性能大大下降，數(shù)據(jù)也容易出錯(cuò)
因此使用map，讓數(shù)組（原本是list）變成一個(gè)map集合（key-value形式），把主鍵id當(dāng)做key，下標(biāo)當(dāng)做value，一一對(duì)應(yīng)，需要的時(shí)候直接使用map.get(key)就可以獲取到對(duì)應(yīng)的value
1.在data{}中先定義一個(gè)map全局變量
2.在數(shù)據(jù)回顯或有全部數(shù)據(jù)的地方把數(shù)組list變成map
該例子數(shù)據(jù)結(jié)構(gòu)是[｛｝]，所以有2個(gè)for循環(huán) item也是[｛｝]結(jié)構(gòu)
這里的item[j].componentId就是一個(gè)數(shù)組，類似[1,2,3]，下標(biāo)分別為0，1，2
i 是外部循環(huán)的變量，在這里相當(dāng)于該數(shù)組的下標(biāo)
3.在需要獲取下標(biāo)地方直接使用map.get(key)
所以key就是item[j].componentId，就可以獲取到該id所對(duì)應(yīng)的數(shù)組下標(biāo)了
到此這篇關(guān)于vue使用map代替Aarry數(shù)組循環(huán)遍歷的方法的文章就介紹到這了,更多相關(guān)vue map代替Aarry數(shù)組循環(huán)遍歷內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue3使用useDialog實(shí)現(xiàn)對(duì)話框的示例代碼
在日常開發(fā)中,彈窗是常見的一個(gè)功能,本文主要介紹了vue3使用useDialog實(shí)現(xiàn)對(duì)話框的示例代碼,具有一定的參考價(jià)值,感興趣的可以了解一下2024-01-01
Vue el-table復(fù)選框全部勾選及勾選回顯功能實(shí)現(xiàn)
這篇文章主要介紹了Vue el-table復(fù)選框全部勾選及勾選回顯功能實(shí)現(xiàn),本文通過示例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-05-05
vue3組件的v-model:value與v-model的區(qū)別解析
在Vue3中,v-model和v-model:value都是用于實(shí)現(xiàn)雙向數(shù)據(jù)綁定的語法糖,但v-model:value提供了更顯式和靈活的綁定方式,允許你明確指定綁定的屬性名和事件名,它們的主要區(qū)別在于默認(rèn)行為、靈活性、多模型綁定和使用場(chǎng)景,感興趣的朋友一起看看吧2025-02-02
Vue2中使用自定義指令實(shí)現(xiàn)el-table虛擬列表的代碼示例
在實(shí)際開發(fā)中,我們可能會(huì)面臨其他需求,例如在 el-table 中無法使用分頁技術(shù)的情況下展示海量數(shù)據(jù),這種情況下,頁面可能會(huì)出現(xiàn)卡頓,嚴(yán)重時(shí)甚至可能引發(fā)瀏覽器崩潰,所以針對(duì)這個(gè)問題本文給大家介紹了vue2中使用自定義指令實(shí)現(xiàn)el-table虛擬列表,需要的朋友可以參考下2025-01-01
在Vue中使用deep深度選擇器修改element UI組件的樣式
這篇文章主要介紹了在Vue中使用deep深度選擇器修改element UI組件的樣式，本文分為兩種方法給大家介紹，在這小編比較推薦使用第二種使用 deep 深度選擇器，感興趣的朋友跟隨小編一起看看吧2022-12-12
這篇文章主要介紹了Vue3中其他的Composition?API,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-03-03
Vue報(bào)錯(cuò)ERR_OSSL_EVP_UNSUPPORTED解決方法
Vue項(xiàng)目啟動(dòng)時(shí)報(bào)錯(cuò)ERR_OSSL_EVP_UNSUPPORTED,本文主要介紹了Vue報(bào)錯(cuò)ERR_OSSL_EVP_UNSUPPORTED解決方法,具有一定的參考價(jià)值,感興趣的可以了解一下2024-08-08
vue-cli單頁應(yīng)用改成多頁應(yīng)用配置詳解
本篇文章主要介紹了vue-cli單頁應(yīng)用改成多頁應(yīng)用配置詳解，具有一定的參考價(jià)值，有興趣的可以了解一下2017-07-07
這篇文章主要介紹了vue如何監(jiān)聽某個(gè)元素的大小變化問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
vue中提示$index is not defined錯(cuò)誤的解決方式
這篇文章主要介紹了vue中提示$index is not defined錯(cuò)誤的解決方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-09-09