分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > IT知识

高效遍历匹配Json数据,避免嵌套循环[转]

发布时间:2023-09-06 02:20责任编辑:熊小新关键词:遍历

工作中经常会遇到这样的需求:
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) ???

 转载地址:https://segmentfault.com/a/1190000016281753

高效遍历匹配Json数据,避免嵌套循环[转]

原文地址:https://www.cnblogs.com/moqiutao/p/9869231.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved