vue使用map代替Aarry數(shù)組循環(huán)遍歷的方法
需求：根據(jù)主鍵id來找到對應(yīng)的數(shù)組下標(biāo)
原本的方法是使用for循環(huán)遍歷該數(shù)組，變量 i 就是下標(biāo)，問題在于，如果有多重for循環(huán)，就會導(dǎo)致性能大大下降，數(shù)據(jù)也容易出錯
因此使用map，讓數(shù)組（原本是list）變成一個map集合（key-value形式），把主鍵id當(dāng)做key，下標(biāo)當(dāng)做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]，下標(biāo)分別為0，1，2
i 是外部循環(huán)的變量，在這里相當(dāng)于該數(shù)組的下標(biāo)
3.在需要獲取下標(biāo)地方直接使用map.get(key)
所以key就是item[j].componentId，就可以獲取到該id所對應(yīng)的數(shù)組下標(biāo)了
到此這篇關(guān)于vue使用map代替Aarry數(shù)組循環(huán)遍歷的方法的文章就介紹到這了,更多相關(guān)vue map代替Aarry數(shù)組循環(huán)遍歷內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了vue腳手架及vue-router基本使用，非常不錯，具有參考借鑒價值,需要的朋友可以參考下2018-04-04
公司內(nèi)部一直有大屏的需求,也一直再做,中途也踩了一些坑,但是沒有認(rèn)真的來總結(jié)下,下面這篇文章主要給大家介紹了關(guān)于如何在vue項目中使用rem布局的相關(guān)資料,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2023-02-02
小編這次要給大家分享的是如何實現(xiàn)vue2.x數(shù)組劫持，文章內(nèi)容豐富，感興趣的小伙伴可以來了解一下，希望大家閱讀完這篇文章之后能夠有所收獲2023-01-01
這篇文章主要介紹了vue3繼承并擴(kuò)展三方組件完成二次封裝,文章使用naiveui的Input組件進(jìn)行舉例,elementPlus或者其他組件庫同理,并通過代碼示例講解的非常詳細(xì),需要的朋友可以參考下2024-03-03
vue 不使用select實現(xiàn)下拉框功能(推薦)
這篇文章主要介紹了vue 不使用select實現(xiàn)下拉框功能,在文章給大家提到了vue select 組件的使用與禁用，需要的朋友可以參考下2018-05-05
下面小編就為大家分享一篇vue將時間戳轉(zhuǎn)換成自定義時間格式的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
Google 給 Chrome 瀏覽器加了一個有趣的彩蛋，本文就詳細(xì)的介紹一下Vue實現(xiàn)Chrome小恐龍游戲的示例代碼，具有一定的參考價值，感興趣的可以了解一下2022-04-04
這篇文章主要介紹了vue項目中使用pinyin轉(zhuǎn)換插件方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
vue如何將導(dǎo)航欄、頂部欄設(shè)置為公共頁面
這篇文章主要介紹了vue如何將導(dǎo)航欄、頂部欄設(shè)置為公共頁面問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
Vue 本身以及周邊生態(tài)在設(shè)計語法糖上幾乎沒讓我失望過,包括本次亮相的 Vue Vine,它的出現(xiàn)引起了我對 Vue3 組件編寫方式的好奇,以及哪一種方式更接近「最佳實踐」？下面讓我來為大家一一道來2024-07-07