Praxis zur Optimierung der JSON-Datengruppierung in Javascript und Zusammenfassung der JS-Operationen auf JSON

Es gibt eine Menge von Daten, die ich nach Zeit gruppiert haben muss, um die前端视图 darzustellen

[
 {"date":"2017-12-22"start_time":"","end_time":"10","end_time":"10","status":"Performance Time"},
 {"date":"2017-12-22"start_time":"","end_time":"10:4"start_time":"0:00","end_time":"10:4"0:00","status":"Performance Time"},
 {"date":"2017-12-23"start_time":"","end_time":"10","end_time":"10","status":"Performance Time"},
 {"date":"2017-12-23"start_time":"","end_time":"10:4"start_time":"0: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，总觉得不优雅，而且没用到ES；5的特性，于是决定自己优化一下！

2.使用ES；5特性；

将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];
  //一致则添加至当前，否则添加至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）的有序集合。一个数组以“[”（左中括号）开始，“]”（右中括号）结束。值之间运用 “,”（逗号）分隔。

　　　 Beispiel:

  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对象：

　 //Von JSON-Zeichenfolge in JSON-Objekt umwandeln
var obj = eval('(' + str + ');

oder　　

var obj = str.parseJSON(); //Von JSON-Zeichenfolge in JSON-Objekt umwandeln

　　　 oder　

  var obj = JSON.parse(str); //Von JSON-Zeichenfolge in JSON-Objekt umwandeln

　　　 Dann kann man so lesen:

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

　　　 Besondere Achtung: Wenn obj bereits ein JSON-Objekt ist, bleibt es nach der Umwandlung durch eval() (selbst nach mehreren Umwandlungen) noch ein JSON-Objekt, aber nach der Verarbeitung durch parseJSON() gibt es Fragen (werft Syntax-Exception).

　　　 Zwei. Sie können toJSONString() oder das globale Prinzip JSON.stringify() verwenden, um ein JSON-Objekt in eine JSON-Zeichenfolge umzuwandeln.

　　　 Beispiel:　　　

var last=obj.toJSONString(); //JSON-Objekt in JSON-Zeichenfolge umwandeln

　　　 oder

  var last=JSON.stringify(obj); //JSON-Objekt in JSON-Zeichenfolge umwandeln
  alert(last);

　　　 Achtung:

　　　 Von den vielen Prinzipien ist eval() die Funktion, die in JavaScript integriert ist, während die anderen Prinzipien aus dem json.js-Paket stammen. Die neue Version von JSON hat die API geändert und die beiden Prinzipien JSON.stringify() und JSON.parse() in das eingebettete Objekt von JavaScript eingefügt, wobei前者 zu Object.toJSONString() und letzterer zu String.parseJSON() geworden ist. Wenn Sie eine Meldung erhalten, dass toJSONString() und parseJSON() nicht gefunden werden, bedeutet dies, dass Ihre json-Paketversion zu niedrig ist.



Erklärung: Der Inhalt dieses Artikels wurde aus dem Internet entnommen und gehört dem Urheberrechtlichem Inhaber. Der Inhalt wurde von Internetbenutzern freiwillig bereitgestellt und hochgeladen. Diese Website besitzt keine Eigentumsrechte und hat den Inhalt nicht von Hand bearbeitet. Sie übernimmt auch keine Haftung für rechtliche Probleme. Wenn Sie verdächtige Urheberrechtsinhalte finden, freuen wir uns über eine E-Mail an: notice#oldtoolbag.com (Bitte ersetzen Sie # durch @ beim Senden einer E-Mail zur Meldung von Verstößen und fügen Sie relevante Beweise bei. Bei nachgewiesener Verletzung der Rechte wird diese Website sofort den涉嫌侵权的内 容删除。)