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

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

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