高效遍歷匹配Json數據與雙層for循環遍歷Json數據

工作中往往遇到這種情況，保留用戶操作痕跡，比如用戶選擇過得東西，用戶進入其它頁面再返回來用戶選擇的的數據還在。

比如：1.購物車列表中勾選某些，點擊任意一項，前往詳情頁，再返回購物車依舊需要呈現勾選狀態
           2.勾選人員后，前往別的頁面，再次返回，人員依舊程勾選狀態
           3.等等....

解決方法：1.把用戶選擇的數據在本地保存一份

                  2.進入當前頁面拿緩存數據和新數據（從后台獲取的數據）進行對比，然后進行對比渲染

在做數據比對的時候，可以通過嵌套for循環，一層for循環遍歷最新數據,二層for循環遍歷緩存數據，如果緩存數據中對應的checked為true，則更改第一層for循環對應的值。雖然通過嵌套循環可以實現效果，但是循環的次數是兩個數組長度的乘積，當數據量大的時候，這樣會很耗性能。這里推薦另一種辦法，將緩存的數組轉換成Json對象，將唯一的id作為數組中每一項的key，將數組的每一項做為value，這樣循環的時候只需要一層循環即可。

 // 緩存數據
  var selected= [
    { id: 09, name: '蘋果', price: 3.5,checked:true },
    { id: 10, name: '香蕉', price: 4.1,checked:true},
    { id: 11, name: '橘子', price: 4.6,checked:true}
  ]

  // 最新數據
  var product = [
    { id: 09, name: '蘋果', price: 3.5,checked:false },
    { id: 10, name: '香蕉', price: 4.1, checked:false},
    { id: 11, name: '橘子', price: 4.6, checked:false},
    { id: 12, name: '葡萄', price: 8.6, checked:false},
    { id: 13, name: '獼猴桃', price: 7.6, checked:false}
  ]

方法一：雙層for循環遍歷

// 方法一：兩層循環遍歷
  for(let item of selected){
     for(let items of product){
       if(item.id==items.id){
         items.checked = item.checked
       }
     }
  }
   console.log("方法一",product)

方法二：將數組轉換為json對象，再用while進行遍歷

function arrToJson(arr,obj={}){
     arr.forEach((item)=>{
        obj[item.id] = item;

     })
    //console.log(obj)
    return obj
  }

  select =  arrToJson(selected);
  console.log(selected)
  arrToJson(selected)
  var i=0;
  while (i<product.length){//此處可以用for循環，但是推薦使用while，因為while比for效率高
    if(select[product[i].id]){
      product[i].checked = true;
    }
    i++
  }

console.log("方法二",product)