博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
高效遍历匹配Json数据,避免嵌套循环
阅读量:6934 次
发布时间:2019-06-27

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

工作中经常会遇到这样的需求:
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)
写完了,要下班了,哈哈哈哈

clipboard.png

---------------------------------------转载请注明出处------------------谢谢-----------------

你可能感兴趣的文章
利用jQuery获取jsonp
查看>>
CSS,点击去除虚线边框代码
查看>>
c#导出包含图片的word文档
查看>>
第一次写自己的博客
查看>>
windows查看端口占用 windows端口占用 查找端口占用程序 强制结束端口占用 查看某个端口被占用的解决方法 如何查看Windows下端口占用情况...
查看>>
JavaScript判断是否是手机mobile登录
查看>>
[转载]javascript创建对象的几种方式
查看>>
经典排序算法 - 鸽巢排序Pigeonhole sort
查看>>
angularJs的学习笔记
查看>>
Zabbix poller processes more than 75% busy
查看>>
Html引入百度富文本编辑器ueditor
查看>>
CSS:<link>标签rel和media的解释(转)
查看>>
Python与Cisco的事儿之四
查看>>
kali用Squid简单配置搭建http代理服务器
查看>>
定时备份MySQL数据库
查看>>
redmine 2.2.x 修改文档附件的存放目录
查看>>
幸福街的博客开通了
查看>>
薛老师软考高项学员:2016年4月27日作业
查看>>
我的友情链接
查看>>
tomcat jvm调优
查看>>