高效遍历匹配Json数据,避免嵌套循环[转]
工作中经常会遇到这样的需求:
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数据,避免嵌套循环[转]的更多相关文章
- 高效遍历匹配Json数据与双层for循环遍历Json数据
工作中往往遇到这种情况,保留用户操作痕迹,比如用户选择过得东西,用户进入其它页面再返回来用户选择的的数据还在. 比如:1.购物车列表中勾选某些,点击任意一项,前往详情页,再返回购物车依旧需要呈现勾选状 ...
- jQuery遍历多层json数据
1.json与jsonp的区别(待查) 2.要遍历的数据如下: {"status": "ok", "code": 200, "da ...
- 91.用js遍历原生json数据
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8 ...
- MVC使用ajax异步刷新时怎样输出从后台中传过来的JSON数据
前言 这几天在学习MVC使用AJAX异步刷,因为是新手.所以在js中传参数到后台以及后台返回数据到前台怎么接受,怎么前台遍历出JSON数据都开始不知道,相信新手在使用时跟我一样会遇到,这里我就和大家分 ...
- 一种从JSON数据创建Java类的高效办法
<一种从JSON数据创建Java类的高效办法> 作者:chszs,转载需注明.博客主页:http://blog.csdn.net/chszs JSON格式的数据经常会遇到,比如调用Web服 ...
- C# JToken类的使用,实现解析动态json数据、遍历、查找
在原来解析json数据是,一般都是用反序列化来实现json数据的解读,这需要首先知道json数据的结构并且建立相应的类才能反序列化,一旦遇到动态的json数据,这种方法就不使用. 为了解决动态解析js ...
- js声明json数据,打印json数据,遍历json数据
1.js声明json数据: 2.打印json数据: 3.遍历json数据 //声明JSON var json = {}; json.a = 1; //第一种赋值方式(仿对象型) json['b'] = ...
- js遍历json数据
先看看json返回的数据结构: 我需要遍历取出bookreno 与 title 加载到页面容器中去 首先我要取到 recommendedBookList 字典结构数据,然后遍历反射到相应对象 ...
- for-in遍历json数据
1.for遍历json数据 ','fun':'前端开发'} for(var attr in json){ alert(json[attr]) //遍历json属性的数据 alert(json['nam ...
随机推荐
- 【二代示波器教程】第12章 示波器设计—DAC信号发生器的实现
第12章 示波器设计—DAC信号发生器的实现 本章节为大家讲解二代示波器中信号发生器的实现.这个功能还是比较实用的,方便为二代示波器提供测试信号.实现了正弦波,方波和三角波的频率,幅度以及占 ...
- Python科学计算基础包-Numpy
一.Numpy概念 Numpy(Numerical Python的简称)是Python科学计算的基础包.它提供了以下功能: 快速高效的多维数组对象ndarray. 用于对数组执行元素级计算以及直接对数 ...
- Java线程中的同步
1.对象与锁 每一个Object类及其子类的实例都拥有一个锁.其中,标量类型int,float等不是对象类型,但是标量类型可以通过其包装类来作为锁.单独的成员变量是不能被标明为同步的.锁只能用在使用了 ...
- [Swift]LeetCode375. 猜数字大小 II | Guess Number Higher or Lower II
We are playing the Guess Game. The game is as follows: I pick a number from 1 to n. You have to gues ...
- AES,DES加密JS源文件及其使用方法
源文件地址:https://github.com/dididi1234/crypto 进入之后直接下载CryptoJS.js,js中直接引用,小程序也一样可以使用 具体使用方法和vue中的Crypto ...
- Python、pip和scrapy的安装——Python爬虫学习笔记1
Python作为爬虫语言非常受欢迎,近期项目需要,很是学习了一番Python,在此记录学习过程:首先因为是初学,而且当时要求很快速的出demo,所以首先想到的是框架,一番查找选用了Python界大名鼎 ...
- Python爬虫入门项目
Python是什么 Python是著名的"龟叔"Guido van Rossum在1989年圣诞节期间,为了打发无聊的圣诞节而编写的一个编程语言. 创始人Guido van Ros ...
- PyCharm2019 激活码
因公司的需求,需要做一个爬取最近上映的电影.列车号.航班号.机场.车站等信息,所以需要我做一个爬虫项目,当然java也可以做爬虫,但是还是没有python这样方便,所以也开始学习Python啦!!! ...
- BBS论坛(五)
5.1.cms后台修改密码功能完成 (1)新建app/forms.py # app/forms.py from wtforms import Form class BaseForm(Form): de ...
- Mac 下生成keystore,并对apk进行签名
1.查看本机java环境 /usr/libexec/java_home -V 最后一行是Mac默认使用的jdk版本. 2.进入java的环境 /Library/Java/JavaVirtualMach ...