高效遍歷匹配Json資料,避免巢狀迴圈

2022-07-04 05:39:11 字數 977 閱讀 4530

**:

工作中經常會遇到這樣的需求:

1.購物車列表中勾選某些,點選任意一項,前往詳情頁,再返回購物車依舊需要呈現勾選狀態

2.勾選人員後,前往別的頁面,再次返回,人員依舊程勾選狀態

3.等等....

//

快取資料

var students =[,,

]//

最新資料

var data =[,,

,,

]

離開頁面的時候將勾選的資料快取,再次返回到頁面時,將最新新增的資料和快取的資料做對比,如果快取中存在勾選,則更改對應的最新資料。

在做資料比對的時候,可以通過巢狀for迴圈,一層for迴圈遍歷最新資料,二層for迴圈遍歷快取資料,如果快取資料中對應的checked為true,則更改第一層for迴圈對應的值。

雖然通過巢狀迴圈可以實現效果,但是迴圈的次數是兩個陣列長度的乘積,當資料量大的時候,這樣會很耗效能。

這裡推薦另一種辦法,將快取的陣列轉換成json物件,將唯一的id作為陣列中每一項的key,將陣列的每一項做為value,這樣迴圈的時候只需要一層迴圈即可。

//

快取資料

var students =[,,

]//

最新資料

var data =[,,

,,

]//將陣列轉換為json物件

function array2json(arr, obj ={}) )

return

obj}

students =array2json(students);

//此處可以用for迴圈,但是推薦使用while,因為while比for效率高

let i = 0;

while (i i++;}//

最終得到的data就是還原了勾選狀態的資料,可以直接渲染在介面上

console.log(data)

js遍歷json資料

w3c dtd xhtml 1.0 transitional en area area left area right class title width 728 height 47 id title img class con class bottom class dh width 712 hei...

json資料遍歷詳解

json物件.鍵名 json物件 鍵名 陣列物件 索引 var person var ps 獲取person物件中所有的鍵和值 for in 迴圈 for var key in person 獲取ps中的所有值 for var i 0 i ps.length i fori也可以用for in替換 f...

js 遍歷 JSON資料

將獲取的資料轉為 json 物件 json.parse data 通過for in迴圈遍歷拿到 key 和 value for var key in obj 遍歷json物件中的資料,可通過for in迴圈實現 判斷 value 是否是物件 if typeof value object js解析 遍...