工作中經常會遇到這樣的需求：
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

高效遍歷匹配Json數據，避免嵌套循環[轉]