首页 > Web开发 > 详细

高效遍历匹配Json数据与双层for循环遍历Json数据

时间:2018-09-17 14:22:08      阅读:189      评论:0      收藏:0      [点我收藏+]

工作中往往遇到这种情况,保留用户操作痕迹,比如用户选择过得东西,用户进入其它页面再返回来用户选择的的数据还在。

比如: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)

技术分享图片

 

高效遍历匹配Json数据与双层for循环遍历Json数据

原文:https://www.cnblogs.com/sdcs/p/9661856.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!