高效遍历匹配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:false },
        { 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)

写完了,要下班了,哈哈哈哈

原文链接:segmentfault.com

上一篇:算法:排序算法总结(JavaScript描述)
下一篇:JavaScript基础对象---Array

相关推荐

  • 🙋Hanjst汉吉斯特优化+JsonDataFromScript等

    近日继续对 🙋Hanjst汉吉斯特优化改进。这次的改进思考是从服务器端返回的 HanjstJsonData的容器设计问题。目前的做法是服务器端的HanjstJsonData放入终端页面的一个Div元...

    25 天前
  • (for in)遍历键名和 (for of)遍历键值,这种说法严谨吗?

    for in for in在ES5中便出现了。一般用来遍历对象属性。但也可用于数组遍历,返回的值是数组的索引,因为,严格来说,数组也是一个对象,所对应的属性是每个值的索引。

    2 年前
  • 面试题|手写JSON解析器

    这周的 Cassidoo 的每周简讯有这么一个面试题:: 写一个函数,这个函数接收一个正确的 JSON 字符串并将其转化为一个对象(或字典,映射等,这取决于你选择的语言)。

    4 个月前
  • 隐藏某些价值观输出stringify() JSON。

    Evan CarrollNilesh(https://stackoverflow.com/users/124486/evancarroll)提出了一个问题:Hide certain values in...

    2 年前
  • 随着Nodejs JSON对象响应(转换对象数组JSON字符串)

    Rudolf Olahclimboid(https://stackoverflow.com/users/9903/rudolfolah)提出了一个问题:Responding with a JSON o...

    2 年前
  • 铬sendrequest错误:列表的循环结构转换到JSON

    SomeKittensSkizit(https://stackoverflow.com/users/1216976/somekittens)提出了一个问题:Chrome sendrequest err...

    2 年前
  • 重新认识 package.json

    前言 🤔 在每个项目的根目录下面,一般都会有一个 package.json 文件,其定义了运行项目所需要的各种依赖和项目的配置信息(如名称、版本、许可证等元数据)。

    1 个月前
  • 重新认识 package.json

    前言 🤔 在每个项目的根目录下面,一般都会有一个 package.json 文件,其定义了运行项目所需要的各种依赖和项目的配置信息(如名称、版本、许可证等元数据)。

    1 个月前
  • 重新认识 package.json

    前言 🤔 在每个项目的根目录下面,一般都会有一个 package.json 文件,其定义了运行项目所需要的各种依赖和项目的配置信息(如名称、版本、许可证等元数据)。

    2 个月前
  • 遍历范围功能(6 / 7)[重复]

    raphinessebsr(https://stackoverflow.com/users/380229/raphinesse)提出了一个问题:functional way to iterate ov...

    2 年前

官方社区

扫码加入 JavaScript 社区