So optimieren Sie die JSON-Datengruppierung in JS

Dieses Mal zeige ich Ihnen, wie Sie die JSON-Datengruppierung von JS optimieren. Hier ist ein praktischer Fall.

Es gibt eine Menge Daten, die ich nach Zeit gruppieren muss, damit die Front-End-Ansicht gerendert werden kann

[
 {"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"}
]

Es muss wie folgt umgewandelt werden:

[
 {
 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. Originelle Methode, viele Netzwerke

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
  }
  }
 }
 }

Laufeffizienz: Es dauert ungefähr 3 ms, 1000 Mal zu durchlaufen. Ich hatte immer das Gefühl, dass es nicht elegant ist und die Funktionen von ES5 nicht genutzt werden, also habe ich beschlossen, es selbst zu optimieren!

2. Nutzen Sie ES5-Funktionen

Ersetzen Sie for durch

forEach und 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
  })
 }
 })

Leistungsoptimierung50 %, ca. 1,5 ms!

3. Praxis zur Leistungsoptimierung

Da die Daten in meinem Array der Reihe nach angeordnet sind und es keine Duplikate gibt, kann ich darüber nachdenken, die zweite Schleife

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 ++
  }
 }
 })

zu entfernen Die Effizienz wird noch einmal um 50 % optimiert, ca. 1 ms!

PS: JS-Operation JSON-Zusammenfassung

JSON (

JavaScript Objektnotation) Es handelt sich um ein leichtes Datenaustauschformat, das ein völlig sprachunabhängiges Textformat verwendet und ein ideales Datenaustauschformat darstellt. Gleichzeitig ist JSON ein natives JavaScript-Format, was bedeutet, dass in Für die Verarbeitung von JSON-Daten in JavaScript ist keine spezielle API oder ein spezielles Toolkit erforderlich.

Dieser Artikel fasst hauptsächlich die Grundlagen des JS-Betriebs von JSON zusammen.

In JSON gibt es zwei Strukturen:

Objekt und Array.

1. Ein Objekt beginnt mit „{“ (linke Klammer) und endet mit „}“ (rechte Klammer). Auf jeden „Namen“ folgt ein „:“ (Doppelpunkt); „Name/Wert“-Paare werden durch „“, (Komma) getrennt. Der Name wird in Anführungszeichen gesetzt; wenn der Wert

string ist, müssen Klammern verwendet werden, numerische Typen sind jedoch nicht erforderlich. Zum Beispiel:

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

2. Ein Array ist eine geordnete Sammlung von Werten. Ein Array beginnt mit „[“ (linke Klammer) und endet mit „]“ (rechte Klammer). Verwenden Sie "," (Komma), um Werte zu trennen.

Zum Beispiel:

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

Um JSON-Daten bequem verarbeiten zu können, stellt JSON das Paket json.js bereit, Download-Adresse: http://www.json.org/json.js

Im Datenübertragungsprozess wird JSON in Form von Text, also einer Zeichenfolge, übertragen, und JS arbeitet mit JSON-Objekten, sodass die gegenseitige Konvertierung zwischen JSON-Objekten und JSON-Zeichenfolgen der Schlüssel ist. Zum Beispiel:

JSON-Zeichenfolge:

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

JSON-Objekt:

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

1. JSON-Zeichenfolge in JSON-Objekt konvertieren

Um den oben genannten str1 zu verwenden, müssen Sie Folgendes verwenden, um ihn in ein JSON-Objekt zu konvertieren:

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

Oder

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

Oder

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

Dann können Sie es so lesen:

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

Besonderer Hinweis: Wenn obj ursprünglich ein JSON-Objekt ist, bleibt es nach der Konvertierung mit der Funktion eval() immer noch ein JSON-Objekt (auch wenn es mehrmals konvertiert wird). Nach der Verarbeitung mit der Funktion parseJSON() treten jedoch Fragen auf ( eine Syntaxausnahme wird ausgelöst).

2. Sie können toJSONString() oder die globale Methode JSON.stringify() verwenden, um das JSON-Objekt in einen JSON-String zu konvertieren.

Zum Beispiel:

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

Oder

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

Achtung:

Unter den oben genannten Methoden stammen viele andere Methoden aus dem Paket json.js, außer dass die Funktion eval() mit js geliefert wird. Neue Version von JSON geändert API werden sowohl die Methoden JSON.stringify() als auch JSON.parse() in die integrierten Objekte von Javascript eingefügt, und erstere wird Object.toJSONString(), was wird String.parseJSON(). Wenn Sie die Meldung erhalten, dass die Methoden toJSONString() und parseJSON() nicht gefunden werden können, bedeutet dies, dass die Version Ihres JSON-Pakets zu niedrig ist.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Detaillierte Erläuterung der Verwendung der Multithread-Laufzeitbibliothek Nexus.js von JS

Wie man Jackson wann bedient Parsen von JSON-Strings. Groß- und Kleinschreibung konvertieren

Das obige ist der detaillierte Inhalt vonSo optimieren Sie die JSON-Datengruppierung in JS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!