Javascript中JSON数据分组优化实践及JS操作JSON总结
现有一堆数据，我需要按时间进行分组，以便前端视图呈现
[
{"date":"2017-12-22","start_time":"10:00:00","end_time":"10:00:00","status":"PerformanceTime"},
{"date":"2017-12-22","start_time":"10:40:00","end_time":"10:40:00","status":"PerformanceTime"},
{"date":"2017-12-23","start_time":"10:00:00","end_time":"10:00:00","status":"PerformanceTime"},
{"date":"2017-12-23","start_time":"10:40:00","end_time":"10:40:00","status":"PerformanceTime"}
]
需转化为如下
[
{
date:'2017-12-22',
data:[
{
date:'2017-12-22',
start_time:'10:00:00',
end_time:'10:00:00',
status:'PerformanceTime'
},
{
date:'2017-12-22',
start_time:'10:40:00',
end_time:'10:40:00',
status:'PerformanceTime'
}
]
},
{
date:'2017-12-23',
data:[
{
date:'2017-12-23',
start_time:'10:00:00',
end_time:'10:00:00',
status:'PerformanceTime'
},
{
date:'2017-12-23',
start_time:'10:40:00',
end_time:'10:40:00',
status:'PerformanceTime'
}
]
}
]
1.原始方法，网络一大堆
varmap={},
nList=[]
//遍历原始数组
for(vari=0;i
运行效率：遍历1000个约3ms，总觉得不优雅，而且没用到ES5的特性，于是决定自己优化一下！
2.使用ES5特性
将for替换为forEach和every
letmap={},
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)
returnfalse
}
returntrue
})
}
})
性能优化50%，约1.5ms！
3.性能优化实践
因为我的数组中的date是按顺序排列，而且没有重复，这样可以考虑去除第二个循环
letmap={},
nList=[]
//设置初始key为0
let_nkey=0
arr.forEach((item,index)=>{
if(index===0){
nList.push({
date:item.date,
data:[item]
})
}else{
letoItem=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(JavaScriptObjectNotation)是一种轻量级的数据交换格式，采用完全独立于语言的文本格式，是理想的数据交换格式。同时，JSON是JavaScript原生格式，这意味着在JavaScript中处理JSON数据不须要任何特殊的API或工具包。
本文主要是对JS操作JSON的要领做下总结。
在JSON中，有两种结构：对象和数组。
1.一个对象以“{”（左括号）开始，“}”（右括号）结束。每个“名称”后跟一个“:”（冒号）；“‘名称/值'对”之间运用“,”（逗号）分隔。名称用引号括起来；值如果是字符串则必须用括号，数值型则不须要。例如：
varo={"xlid":"cxh","xldigitid":123456,"topscore":2000,"topplaytime":"2009-08-20"}；
2.数组是值（value）的有序集合。一个数组以“[”（左中括号）开始，“]”（右中括号）结束。值之间运用“,”（逗号）分隔。
例如：
varjsonranklist=[{"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字符串:
varstr1='{"name":"cxh","sex":"man"}';
JSON对象:
varstr2={"name":"cxh","sex":"man"};
一、JSON字符串转换为JSON对象
要运用上面的str1，必须运用下面的要领先转化为JSON对象：
//由JSON字符串转换为JSON对象
varobj=eval('('+str+')');
或者
varobj=str.parseJSON();//由JSON字符串转换为JSON对象
或者
varobj=JSON.parse(str);//由JSON字符串转换为JSON对象
然后，就可以这样读取：
Alert(obj.name);
Alert(obj.sex);
特别留心：如果obj本来就是一个JSON对象，那么运用eval（）函数转换后（哪怕是多次转换）还是JSON对象，但是运用parseJSON（）函数处理后会有疑问（抛出语法异常）。
二、可以运用toJSONString()或者全局要领JSON.stringify()将JSON对象转化为JSON字符串。
例如：
varlast=obj.toJSONString();//将JSON对象转化为JSON字符
或者
varlast=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包版本太低。