Javascript中JSON数据分组优化实践

shadajin 发布于2019-08-22 11:23 / 3380人阅读

摘要：现有一堆数据，我需要按时间进行分组，以便前端视图呈现需转化为如下原始方法，网络一大堆遍历原始数组如果没有则在新中添加遍历如查找到符合则添加跳出循环运行效率遍历个约，总觉得不优雅，而且没用到的特性，于是

现有一堆数据，我需要按时间进行分组，以便前端视图呈现

[
  {"date":"2017-12-22","start_time":"10:00:00","end_time":"10:00:00","status":"Performance Time"},
  {"date":"2017-12-22","start_time":"10:40:00","end_time":"10:40:00","status":"Performance Time"},
  {"date":"2017-12-23","start_time":"10:00:00","end_time":"10:00:00","status":"Performance Time"},
  {"date":"2017-12-23","start_time":"10:40:00","end_time":"10:40:00","status":"Performance Time"}
]

需转化为如下

[
  {
    date: "2017-12-22",
    data: [
      {
        date: "2017-12-22",
        start_time: "10:00:00",
        end_time: "10:00:00",
        status: "Performance Time"
      },
      {
        date: "2017-12-22",
        start_time: "10:40:00",
        end_time: "10:40:00",
        status: "Performance Time"
      }
    ]
  },
  {
    date: "2017-12-23",
    data: [
      {
        date: "2017-12-23",
        start_time: "10:00:00",
        end_time: "10:00:00",
        status: "Performance Time"
      },
      {
        date: "2017-12-23",
        start_time: "10:40:00",
        end_time: "10:40:00",
        status: "Performance Time"
      }
    ]
  }
]

1.原始方法，网络一大堆

  var map = {},
    nList = []
  //遍历原始数组
  for (var i = 0; i < arr.length; i++) {
    var item = arr[i]
    //如果map没有则在新nList中添加
    if (!map[item.date]) {
      nList.push({
        date: item.date,
        data: [item]
      })
      map[item.date] = item
    } else {
      //遍历nList
      for (var j = 0; j < nList.length; j++) {
        var nItem = nList[j]、
        //如查找到date符合则添加
        if (nItem.date == item.date) {
          nItem.data.push(item)
          //跳出循环
          break
        }
      }
    }
  }

运行效率：遍历1000个约3ms，总觉得不优雅，而且没用到ES5的特性，于是决定自己优化一下！

2.使用ES5特性

将for替换为forEach和every

  let map = {},
    nList = []
  arr.forEach((item) => {
    if (!map[item.date]) {
      nList.push({
        date: item.date,
        data: [item]
      })
      map[item.date] = item
    } else {
      //因为forEach不支持break，所以使用every实现
      nList.every((nItem) => {
        if (nItem.date === item.date) {
          nItem.data.push(item)
          return false
        }
        return true
      })
    }
  })

性能优化50%，约1.5ms！

3.性能优化实践

因为我的数组中的date是按顺序排列，而且没有重复，这样可以考虑去除第二个循环

  let map = {},
    nList = []
  //设置初始key为0
  let _nkey = 0
  arr.forEach((item, index) => {
    if (index === 0) {
      nList.push({
        date: item.date,
        data: [item]
      })
    } else {
      let oItem = arr[index - 1]
      //和前一个date一致则在当前添加，否则添加至nList
      if (item.date === oItem.date) {
        nList[_nkey]["data"].push(item)
      } else {
        nList.push({
          date: item.date,
          data: [item]
        })
        _nkey ++
      }
    }
  })

效率再次优化50%，约1ms！

项目最终效果：

GPU云服务器云服务器 json 数据分组 webrtc优化实践 javascript分组匹配 javascript最佳实践

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

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

JavaScript中的那些坑

摘要：序列化为字符串之后它的各个属性已经被解除了引用，重新相当于创建了一个新的对象。类似于的，的命令行终端。基本思路函数的使用以及协议。多行注释的陷阱由于正则表达式字面量的存在,多行注释可能会产生陷阱,例如以下程序将抛出错误: /* var a = /h*/.test(hello); */ 正则结束前的那个星号将被解析为注释结束符,从而.被认为是不合法的.所以尽量避免使用多行注释整型 ...

ivyzhang 2019-08-20 10:25 评论0 收藏0
《高性能javascript》阅读摘要

摘要：当执行上下文被创建时，它的作用域链初始化为当前运行函数的属性中的对象。该过程搜索执行环境的作用域链，查找同名的标识符。搜索实例成员比从字面量或局部变量中读取数据代价更高，再加上遍历原型链带来的开销，这让性能问题更为严重。最近在阅读这本Nicholas C.Zakas（javascript高级程序设计作者）写的最佳实践、性能优化类的书。记录下主要知识。加载和执行脚本位置放在中的...

duan199226 2019-08-01 18:28 评论0 收藏0
《高性能javascript》阅读摘要

摘要：当执行上下文被创建时，它的作用域链初始化为当前运行函数的属性中的对象。该过程搜索执行环境的作用域链，查找同名的标识符。搜索实例成员比从字面量或局部变量中读取数据代价更高，再加上遍历原型链带来的开销，这让性能问题更为严重。最近在阅读这本Nicholas C.Zakas（javascript高级程序设计作者）写的最佳实践、性能优化类的书。记录下主要知识。加载和执行脚本位置放在中的...

afishhhhh 2019-08-22 14:04 评论0 收藏0
前端开发知识点整理

摘要：前言本文主要是有关前端方面知识按照目前的认知进行的收集归类概括和整理，涵盖前端理论与前端实践两方面。前言：本文主要是有关前端方面知识按照 XX 目前的认知进行的收集、归类、概括和整理，涵盖『前端理论』与『前端实践』两方面。本文会告诉你前端需要了解的知识大致有什么，看上去有很多，但具体你要学什么，还是要 follow your heart & follow your BOSS。初衷...

Blackjun 2019-08-20 17:14 评论0 收藏0
前端开发知识点整理

摘要：前言本文主要是有关前端方面知识按照目前的认知进行的收集归类概括和整理，涵盖前端理论与前端实践两方面。前言：本文主要是有关前端方面知识按照 XX 目前的认知进行的收集、归类、概括和整理，涵盖『前端理论』与『前端实践』两方面。本文会告诉你前端需要了解的知识大致有什么，看上去有很多，但具体你要学什么，还是要 follow your heart & follow your BOSS。初衷...

Sike 2019-08-29 12:44 评论0 收藏0