高效遍歷匹配Json資料，避免巢狀迴圈[轉]

風雨後見彩虹發表於2018-10-29
JSON巢狀

工作中經常會遇到這樣的需求：
1.購物車列表中勾選某些，點選任意一項，前往詳情頁，再返回購物車依舊需要呈現勾選狀態
2.勾選人員後，前往別的頁面，再次返回，人員依舊程勾選狀態
3.等等….

資料結構如下：
// 快取資料
var students = [
        { id: 35, name: `小明`, age: 25, address: `環球中心`,checked:true},
        { id: 36, name: `杰倫`, age: 41, address: `台灣` ,checked:true},
        { id: 37, name: `不擼死`, age: 46, address: `黴國` ,checked:true}
    ]
    
 // 最新資料
var data = [
        { id: 35, name: `小明`, age: 25, address: `環球中心`,checked:false },
        { id: 36, name: `杰倫`, age: 41, address: `台灣` ,checked:false},
        { id: 37, name: `不擼死`, age: 46, address: `黴國` ,checked:false},
        { id: 38, name: `大明`, age: 46, address: `哈哈哈哈哈` ,checked:false},
        { id: 39, name: `中明`, age: 46, address: `中國四川` ,checked:false}
    ]
思路如下：

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

在做資料比對的時候，可以通過巢狀for迴圈，一層for迴圈遍歷最新資料,二層for迴圈遍歷快取資料，如果快取資料中對應的checked為true，則更改第一層for迴圈對應的值。雖然通過巢狀迴圈可以實現效果，但是迴圈的次數是兩個陣列長度的乘積，當資料量大的時候，這樣會很耗效能。這裡推薦另一種辦法，將快取的陣列轉換成Json物件，將唯一的id作為陣列中每一項的key，將陣列的每一項做為value，這樣迴圈的時候只需要一層迴圈即可。

具體程式碼如下：
// 快取資料
var students = [
        { id: 35, name: `小明`, age: 25, address: `環球中心`,checked:true },
        { id: 36, name: `杰倫`, age: 41, address: `台灣` ,checked:true},
        { id: 37, name: `不擼死`, age: 46, address: `黴國` ,checked:true}
    ]
    
 // 最新資料
var data = [
        { id: 35, name: `小明`, age: 25, address: `環球中心`,checked:false },
        { id: 36, name: `杰倫`, age: 41, address: `台灣` ,checked:false},
        { id: 37, name: `不擼死`, age: 46, address: `黴國` ,checked:false},
        { id: 38, name: `大名`, age: 46, address: `哈哈哈哈哈` ,checked:false},
        { id: 39, name: `中明`, age: 46, address: `中國四川` ,checked:false}
    ]
    
    // 將陣列轉換為json物件
function Array2Json(arr, obj = {}) {
        arr.forEach(item => {
            obj[item.id] = item;
        })

        return obj
    }
    
    students  = Array2Json(students);
    
    // 此處可以用for迴圈，但是推薦使用while，因為while比for效率高
    
    let i = 0;
    while (i < data.length) {
      if (students[data[i].id]) {
        data[i].checked = true
      }
      i++;
    }
    // 最終得到的data就是還原了勾選狀態的資料，可以直接渲染在介面上
    console.log(data)

 轉載地址：https://segmentfault.com/a/1190000016281753

相關文章