1. 程式人生 > 程式設計 >vue使用map代替Aarry陣列迴圈遍歷的方法

vue使用map代替Aarry陣列迴圈遍歷的方法

需求:根據主鍵id來找到對應的陣列下標

原本的方法是使用for迴圈遍歷該陣列,變數 i 就是下標,問題在於,如果有多重for迴圈,就會導致效能大大下降,資料也容易出錯

因此使用map,讓陣列(原本是list)變成一個map集合(key-value形式),把主鍵id當做key,下標當做value,一一對應,需要的時候直接使用map.get(key)就可以獲取到對應的value

1.在data{}中先定義一個map全域性變數

vue使用map代替Aarry陣列迴圈遍歷的方法

2.在資料回顯或有全部資料的地方把陣列list變成map

vue使用map代替Aarry陣列迴圈遍歷的方法

該例子資料結構是[{}],所以有2個for迴圈 item也是[{}]結構

這裡的item[j].componentId就是一個數組,類似[1,2,3],下標分別為0,1,2

i 是外部迴圈的變數,在這裡相當於該陣列的下標

3.在需要獲取下標地方直接使用map.get(key)

vue使用map代替Aarry陣列迴圈遍歷的方法

所以key就是item[j].componentId,就可以獲取到該id所對應的陣列下標了

到此這篇關於vue使用map代替Aarry陣列迴圈遍歷的方法的文章就介紹到這了,更多相關vue map代替Aarry陣列迴圈遍歷內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們!