高效遍历匹配Json数据，避免嵌套循环

Pluser 发布于2019-08-23 11:45 / 2362人阅读

摘要：在做数据比对的时候，可以通过嵌套循环，一层循环遍历最新数据二层循环遍历缓存数据，如果缓存数据中对应的为，则更改第一层循环对应的值。虽然通过嵌套循环可以实现效果，但是循环的次数是两个数组长度的乘积，当数据量大的时候，这样会很耗性能。

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

写完了，要下班了，哈哈哈哈

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

服务器托管 idc机房托管 js遍历嵌套json数据 js循环遍历json数据 js 循环遍历json数据 json数据多层嵌套

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/97407.html

精读《高性能 javascript》

摘要：嵌套对象成员会造成重大性能影响尽量少用。一般来说你可以通过这种方法提高代码的性能将经常使用的对象成员数组项和域外变量存入局部变量中。在反复访问的地方使用局部变量存放引用小心地处理集合因为他们表现出存在性总是对底层文档重新查询。前言本期我来给大家推荐的书是《高性能JavaScript》,在这本书中我们能够了解 javascript 开发过程中的性能瓶颈,如何提升各方面的性能，包括代码...

caohaoyu 2019-08-23 11:26 评论0 收藏0
【前端性能优化】高性能JavaScript整理总结

摘要：然后执行环境会创建一个活动对象，活动对象作为函数运行的变量对象，包含所有局部变量命名参数参数集合和，当执行环境销毁，活动对象也被销毁。高性能JavaScript整理总结关于前端性能优化：首先想到的是雅虎军规34条然后最近看了《高性能JavaScript》大概的把书中提到大部分知识梳理了下并加上部分个人理解这本书有参考雅虎特别性能小组的研究成果，所以跟34 军规有很多相似之处有不当之...

zzbo 2019-08-02 16:01 评论0 收藏0
【前端性能优化】高性能JavaScript整理总结

摘要：然后执行环境会创建一个活动对象，活动对象作为函数运行的变量对象，包含所有局部变量命名参数参数集合和，当执行环境销毁，活动对象也被销毁。高性能JavaScript整理总结关于前端性能优化：首先想到的是雅虎军规34条然后最近看了《高性能JavaScript》大概的把书中提到大部分知识梳理了下并加上部分个人理解这本书有参考雅虎特别性能小组的研究成果，所以跟34 军规有很多相似之处有不当之...

bovenson 2019-08-22 15:41 评论0 收藏0
【前端性能优化】高性能JavaScript整理总结

摘要：然后执行环境会创建一个活动对象，活动对象作为函数运行的变量对象，包含所有局部变量命名参数参数集合和，当执行环境销毁，活动对象也被销毁。高性能JavaScript整理总结关于前端性能优化：首先想到的是雅虎军规34条然后最近看了《高性能JavaScript》大概的把书中提到大部分知识梳理了下并加上部分个人理解这本书有参考雅虎特别性能小组的研究成果，所以跟34 军规有很多相似之处有不当之...

winterdawn 2019-08-05 18:04 评论0 收藏0
高性能javascript小结

摘要：高性能小结文章转载于我的博客最近看完了动物丛书的高性能，觉得那本书的小结部分写得非常不错，简洁轻快易懂概括性很强。由于局部变量存在于作用域链的起始位置，因此访问局部变量比访问跨作用域变量更快。高性能javascript小结文章转载于我的CSDN博客：http://blog.csdn.net/hello_world_20/article/details/46793317 最近看完了动...

wujl596 2019-08-21 10:44 评论0 收藏0