工作中经常会遇到这样的需求:
1.购物车列表中勾选某些,点击任意一项,前往详情页,再返回购物车依旧需要呈现勾选状态
2.勾选人员后,前往别的页面,再次返回,人员依旧程勾选状态
3.等等....

数据结构如下:
  1. // 缓存数据
  2. var students = [
  3. { id: 35, name: '小明', age: 25, address: '环球中心',checked:true},
  4. { id: 36, name: '杰伦', age: 41, address: '中国台湾' ,checked:true},
  5. { id: 37, name: '不撸死', age: 46, address: '霉国' ,checked:true}
  6. ]
  7.  
  8. // 最新数据
  9. var data = [
  10. { id: 35, name: '小明', age: 25, address: '环球中心',checked:false },
  11. { id: 36, name: '杰伦', age: 41, address: '中国台湾' ,checked:false},
  12. { id: 37, name: '不撸死', age: 46, address: '霉国' ,checked:false},
  13. { id: 38, name: '大明', age: 46, address: '哈哈哈哈哈' ,checked:false},
  14. { id: 39, name: '中明', age: 46, address: '中国四川' ,checked:false}
  15. ]
思路如下:

离开页面的时候将勾选的数据缓存,再次返回到页面时,将最新添加的数据和缓存的数据做对比,如果缓存中存在勾选,则更改对应的最新数据。

在做数据比对的时候,可以通过嵌套for循环,一层for循环遍历最新数据,二层for循环遍历缓存数据,如果缓存数据中对应的checked为true,则更改第一层for循环对应的值。虽然通过嵌套循环可以实现效果,但是循环的次数是两个数组长度的乘积,当数据量大的时候,这样会很耗性能。这里推荐另一种办法,将缓存的数组转换成Json对象,将唯一的id作为数组中每一项的key,将数组的每一项做为value,这样循环的时候只需要一层循环即可

具体代码如下:
  1. // 缓存数据
  2. var students = [
  3. { id: 35, name: '小明', age: 25, address: '环球中心',checked:true },
  4. { id: 36, name: '杰伦', age: 41, address: '中国台湾' ,checked:true},
  5. { id: 37, name: '不撸死', age: 46, address: '霉国' ,checked:true}
  6. ]
  7.  
  8. // 最新数据
  9. var data = [
  10. { id: 35, name: '小明', age: 25, address: '环球中心',checked:false },
  11. { id: 36, name: '杰伦', age: 41, address: '中国台湾' ,checked:false},
  12. { id: 37, name: '不撸死', age: 46, address: '霉国' ,checked:false},
  13. { id: 38, name: '大名', age: 46, address: '哈哈哈哈哈' ,checked:false},
  14. { id: 39, name: '中明', age: 46, address: '中国四川' ,checked:false}
  15. ]
  16.  
  17. // 将数组转换为json对象
  18. function Array2Json(arr, obj = {}) {
  19. arr.forEach(item => {
  20. obj[item.id] = item;
  21. })
  22.  
  23. return obj
  24. }
  25.  
  26. students = Array2Json(students);
  27.  
  28. // 此处可以用for循环,但是推荐使用while,因为while比for效率高
  29.  
  30. let i = 0;
  31. while (i < data.length) {
  32. if (students[data[i].id]) {
  33. data[i].checked = true
  34. }
  35. i++;
  36. }
  37. // 最终得到的data就是还原了勾选状态的数据,可以直接渲染在界面上
  38. console.log(data)

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

高效遍历匹配Json数据,避免嵌套循环[转]的更多相关文章

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

    工作中往往遇到这种情况,保留用户操作痕迹,比如用户选择过得东西,用户进入其它页面再返回来用户选择的的数据还在. 比如:1.购物车列表中勾选某些,点击任意一项,前往详情页,再返回购物车依旧需要呈现勾选状 ...

  2. jQuery遍历多层json数据

    1.json与jsonp的区别(待查) 2.要遍历的数据如下: {"status": "ok", "code": 200, "da ...

  3. 91.用js遍历原生json数据

    <!doctype html> <html lang="en"> <head>     <meta charset="UTF-8 ...

  4. MVC使用ajax异步刷新时怎样输出从后台中传过来的JSON数据

    前言 这几天在学习MVC使用AJAX异步刷,因为是新手.所以在js中传参数到后台以及后台返回数据到前台怎么接受,怎么前台遍历出JSON数据都开始不知道,相信新手在使用时跟我一样会遇到,这里我就和大家分 ...

  5. 一种从JSON数据创建Java类的高效办法

    <一种从JSON数据创建Java类的高效办法> 作者:chszs,转载需注明.博客主页:http://blog.csdn.net/chszs JSON格式的数据经常会遇到,比如调用Web服 ...

  6. C# JToken类的使用,实现解析动态json数据、遍历、查找

    在原来解析json数据是,一般都是用反序列化来实现json数据的解读,这需要首先知道json数据的结构并且建立相应的类才能反序列化,一旦遇到动态的json数据,这种方法就不使用. 为了解决动态解析js ...

  7. js声明json数据,打印json数据,遍历json数据

    1.js声明json数据: 2.打印json数据: 3.遍历json数据 //声明JSON var json = {}; json.a = 1; //第一种赋值方式(仿对象型) json['b'] = ...

  8. js遍历json数据

    先看看json返回的数据结构: 我需要遍历取出bookreno   与  title  加载到页面容器中去 首先我要取到 recommendedBookList  字典结构数据,然后遍历反射到相应对象 ...

  9. for-in遍历json数据

    1.for遍历json数据 ','fun':'前端开发'} for(var attr in json){ alert(json[attr]) //遍历json属性的数据 alert(json['nam ...

随机推荐

  1. 【二代示波器教程】第12章 示波器设计—DAC信号发生器的实现

    第12章      示波器设计—DAC信号发生器的实现 本章节为大家讲解二代示波器中信号发生器的实现.这个功能还是比较实用的,方便为二代示波器提供测试信号.实现了正弦波,方波和三角波的频率,幅度以及占 ...

  2. Python科学计算基础包-Numpy

    一.Numpy概念 Numpy(Numerical Python的简称)是Python科学计算的基础包.它提供了以下功能: 快速高效的多维数组对象ndarray. 用于对数组执行元素级计算以及直接对数 ...

  3. Java线程中的同步

    1.对象与锁 每一个Object类及其子类的实例都拥有一个锁.其中,标量类型int,float等不是对象类型,但是标量类型可以通过其包装类来作为锁.单独的成员变量是不能被标明为同步的.锁只能用在使用了 ...

  4. [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 ...

  5. AES,DES加密JS源文件及其使用方法

    源文件地址:https://github.com/dididi1234/crypto 进入之后直接下载CryptoJS.js,js中直接引用,小程序也一样可以使用 具体使用方法和vue中的Crypto ...

  6. Python、pip和scrapy的安装——Python爬虫学习笔记1

    Python作为爬虫语言非常受欢迎,近期项目需要,很是学习了一番Python,在此记录学习过程:首先因为是初学,而且当时要求很快速的出demo,所以首先想到的是框架,一番查找选用了Python界大名鼎 ...

  7. Python爬虫入门项目

    Python是什么 Python是著名的"龟叔"Guido van Rossum在1989年圣诞节期间,为了打发无聊的圣诞节而编写的一个编程语言. 创始人Guido van Ros ...

  8. PyCharm2019 激活码

    因公司的需求,需要做一个爬取最近上映的电影.列车号.航班号.机场.车站等信息,所以需要我做一个爬虫项目,当然java也可以做爬虫,但是还是没有python这样方便,所以也开始学习Python啦!!! ...

  9. BBS论坛(五)

    5.1.cms后台修改密码功能完成 (1)新建app/forms.py # app/forms.py from wtforms import Form class BaseForm(Form): de ...

  10. Mac 下生成keystore,并对apk进行签名

    1.查看本机java环境 /usr/libexec/java_home -V 最后一行是Mac默认使用的jdk版本. 2.进入java的环境 /Library/Java/JavaVirtualMach ...