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