Javascript中JSON数据分组优化实践及JS操作JSON总结


Posted in Javascript onDecember 22, 2017

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

[
 {"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!

PS:JS操作JSON总结

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,采用完全独立于语言的文本格式,是理想的数据交换格式。同时,JSON是 JavaScript 原生格式,这意味着在 JavaScript 中处理 JSON数据不须要任何特殊的 API 或工具包。

    本文主要是对JS操作JSON的要领做下总结。

    在JSON中,有两种结构:对象和数组。

    1. 一个对象以“{”(左括号)开始,“}”(右括号)结束。每个“名称”后跟一个“:”(冒号);“‘名称/值' 对”之间运用 “,”(逗号)分隔。 名称用引号括起来;值如果是字符串则必须用括号,数值型则不须要。例如: 

var o={"xlid":"cxh","xldigitid":123456,"topscore":2000,"topplaytime":"2009-08-20"};

    2. 数组是值(value)的有序集合。一个数组以“[”(左中括号)开始,“]”(右中括号)结束。值之间运用 “,”(逗号)分隔。

    例如:

var jsonranklist=[{"xlid":"cxh","xldigitid":123456,"topscore":2000,"topplaytime":"2009-08-20"},{"xlid":"zd","xldigitid":123456,"topscore":1500,"topplaytime":"2009-11-20"}];

    为了方便地处理JSON数据,JSON提供了json.js包,下载地址:http://www.json.org/json.js

    在数据传输流程中,json是以文本,即字符串的形式传递的,而JS操作的是JSON对象,所以,JSON对象和JSON字符串之间的相互转换是关键。例如:

    JSON字符串:

var str1 = '{ "name": "cxh", "sex": "man" }';

    JSON对象:   

var str2 = { "name": "cxh", "sex": "man" };

    一、JSON字符串转换为JSON对象

    要运用上面的str1,必须运用下面的要领先转化为JSON对象:

  //由JSON字符串转换为JSON对象
var obj = eval('(' + str + ')');

或者  

var obj = str.parseJSON(); //由JSON字符串转换为JSON对象

    或者 

var obj = JSON.parse(str); //由JSON字符串转换为JSON对象

    然后,就可以这样读取:

Alert(obj.name);
  Alert(obj.sex);

    特别留心:如果obj本来就是一个JSON对象,那么运用 eval()函数转换后(哪怕是多次转换)还是JSON对象,但是运用 parseJSON()函数处理后会有疑问(抛出语法异常)。

    二、可以运用 toJSONString()或者全局要领 JSON.stringify()将JSON对象转化为JSON字符串。

    例如:   

var last=obj.toJSONString(); //将JSON对象转化为JSON字符

    或者

var last=JSON.stringify(obj); //将JSON对象转化为JSON字符
  alert(last);

    留心:

    上面的多个要领中,除了eval()函数是js自带的之外,其他的多个要领都来自json.js包。新版本的 JSON 修改了 API,将 JSON.stringify() 和 JSON.parse() 两个要领都注入到了 Javascript 的内建对象里面,前者变成了 Object.toJSONString(),而后者变成了 String.parseJSON()。如果提示找不到toJSONString()和parseJSON()要领,则说明您的json包版本太低。



Javascript 相关文章推荐
JavaScript 语法集锦 脚本之家基础推荐
Nov 15 Javascript
instanceof和typeof运算符的区别详解
Jan 06 Javascript
javascript面向对象特性代码实例
Jun 12 Javascript
输入框过滤非数字的js代码
Sep 18 Javascript
纯javascript实现自动发送邮件
Oct 21 Javascript
Js得到radiobuttonlist选中值的两种方法(推荐)
Aug 25 Javascript
AngularJS入门教程之数据绑定原理详解
Nov 02 Javascript
浅谈关于angularJs中使用$.ajax的注意点
Aug 12 Javascript
Vue项目中跨域问题解决方案
Jun 05 Javascript
JS原生带缩略图的图片切换效果
Oct 10 Javascript
vue实现路由懒加载及组件懒加载的方式
Jun 11 Javascript
vue 实现特定条件下绑定事件
Nov 09 Javascript
vue init失败简单解决方法(终极版)
Dec 22 #Javascript
使用axios实现上传图片进度条功能
Dec 21 #Javascript
详解使用webpack构建多页面应用
Dec 21 #Javascript
使用ajax的post同步执行(实现方法)
Dec 21 #Javascript
jQuery Validate插件ajax方式验证输入值的实例
Dec 21 #jQuery
原生js+cookie实现购物车功能的方法分析
Dec 21 #Javascript
JS实现去除数组中重复json的方法示例
Dec 21 #Javascript
You might like
PHP 服务器配置(使用Apache及IIS两种方法)
2009/06/01 PHP
利用PHP函数计算中英文字符串长度的方法
2014/11/11 PHP
Javascript调试工具(下载)
2007/01/09 Javascript
jquery处理json对象
2014/11/03 Javascript
firefox浏览器用jquery.uploadify插件上传时报HTTP 302错误
2015/03/01 Javascript
通过Jquery.cookie.js实现展示浏览网页的历史记录超管用
2015/10/23 Javascript
JS实现自定义简单网页软键盘效果代码
2015/11/05 Javascript
基于jquery实现下拉框美化特效
2016/02/02 Javascript
在Javascript操作JSON对象,增加 删除 修改的简单实现
2016/06/02 Javascript
jquery删除table当前行的实例代码
2016/10/07 Javascript
Vue数据驱动模拟实现5
2017/01/13 Javascript
javascript实现秒表计时器的制作方法
2017/02/16 Javascript
Webpack+Vue如何导入Jquery和Jquery的第三方插件
2017/02/20 Javascript
nodejs入门教程三:调用内部和外部方法示例
2017/04/24 NodeJs
Vue项目中引入外部文件的方法(css、js、less)
2017/07/24 Javascript
vue-cli项目如何使用vue-resource获取本地的json数据(模拟服务端返回数据)
2017/08/04 Javascript
Vue项目中使用flow做类型检测的方法
2020/03/18 Javascript
微信小程序scroll-view点击项自动居中效果的实现
2020/03/25 Javascript
Python subprocess模块学习总结
2014/03/13 Python
Python设计模式之观察者模式实例
2014/04/26 Python
Python实现批量把SVG格式转成png、pdf格式的代码分享
2014/08/21 Python
Django框架 querySet功能解析
2019/09/04 Python
Windows下pycharm创建Django 项目(虚拟环境)过程解析
2019/09/16 Python
Django文件上传与下载(FileFlid)
2019/10/06 Python
pytorch 实现将自己的图片数据处理成可以训练的图片类型
2020/01/08 Python
基于python 凸包问题的解决
2020/04/16 Python
Python数据可视化图实现过程详解
2020/06/12 Python
Toppik顶丰增发纤维官网:解决头发稀疏
2017/12/30 全球购物
伦敦鲜花递送:Flower Station
2021/02/03 全球购物
大学生毕业自我鉴定范文
2013/09/19 职场文书
程序员岗位职责
2013/11/11 职场文书
大学军训的体会
2014/11/08 职场文书
外贸英文求职信范文
2015/03/19 职场文书
初婚初育证明范本
2015/06/18 职场文书
《给予树》教学反思
2016/03/03 职场文书
导游词之蓬莱长岛
2019/12/17 职场文书