高效遍歷匹配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)

寫完了，要下班了，哈哈哈哈

---------------------------------------轉載請註明出處------------------謝謝-----------------