博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
高效遍历匹配Json数据与双层for循环遍历Json数据
阅读量:4550 次
发布时间:2019-06-08

本文共 1400 字,大约阅读时间需要 4 分钟。

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

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

 

转载于:https://www.cnblogs.com/sdcs/p/9661856.html

你可能感兴趣的文章
基础网络流学习笔记
查看>>
Linux文件夹文件创建、删除
查看>>
归并排序 稳定
查看>>
xml约束技术之dtd
查看>>
云存储的那些事(1)——数据冗余
查看>>
android状态机机制StateMachine
查看>>
滚动条自适应宽度的问题
查看>>
第二次作业——个人项目实战
查看>>
HighCharts图表控件在ASP.NET WebForm中的使用
查看>>
C#汉字转拼音
查看>>
Remote Service 和 Local App的交互
查看>>
用python实现最长公共子序列算法(找到所有最长公共子串)
查看>>
正则表达式
查看>>
tensorflow models flags 初步使用
查看>>
[.NET] SQL数据分页查询
查看>>
[转]Ext自定义vtype动态验证
查看>>
Java - Java Web - Listener
查看>>
K3Cloud 后台修改账户密码策略
查看>>
Python内置函数
查看>>
第15章 面向对象程序设计
查看>>