So implementieren Sie die Optimierung der JSON-Datengruppierung in Javascript

Dieser Artikel stellt hauptsächlich die Optimierungspraxis der JSON-Datengruppierung in Javascript vor. Der Artikel fasst auch die Grundlagen des JS-Betriebs von JSON zusammen. Freunde, die es benötigen, können darauf zurückgreifen.

Es gibt eine Menge Daten Ich muss es nach Zeit sortieren, damit die Front-End-Ansicht

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

in die folgende

[
 {
 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 umgewandelt werden muss 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
  }
  }
 }
 }

Betriebseffizienz: Es dauert etwa 3 ms, 1000 Mal zu durchlaufen. Ich hatte immer das Gefühl, dass es nicht elegant ist und die Funktionen von ES5 nicht nutzt, also habe ich mich für eine Optimierung entschieden es selbst!

2. Verwenden Sie ES5-Funktionen

Ersetzen Sie for durch forEach and 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
  })
 }
 })

Die Leistungsoptimierung beträgt 50 %, etwa 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, sie zu entfernen 1. Die Effizienz der zweiten 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 ++
  }
 }
 })

wird noch einmal um 50 % optimiert, ca. 1 ms!

PS: JS-Operation JSON-Zusammenfassung

JSON (JavaScript Object Notation) ist ein leichtes Datenaustauschformat, das völlig unabhängig ist Sprachspezifischer Text Format, ideal für den Datenaustausch. Gleichzeitig ist JSON ein natives JavaScript-Format, was bedeutet, dass für die Verarbeitung von JSON-Daten in JavaScript keine spezielle API oder ein spezielles Toolkit erforderlich ist.

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

In JSON gibt es zwei Strukturen: Objekte und Arrays.

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; der Wert muss in Klammern stehen, wenn es sich um eine Zeichenfolge handelt, nicht jedoch, wenn es sich um einen numerischen Wert handelt. 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, übergeben, und JS arbeitet mit JSON-Objekten, sodass die gegenseitige Konvertierung zwischen JSON-Objekten und JSON-Strings der Schlüssel ist. Zum Beispiel:

JSON-Zeichenfolge:

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

JSON-Objekt:

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

1. Konvertieren Sie die JSON-Zeichenfolge in das JSON-Objekt

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 Sie kann so lesen:

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

Besondere Aufmerksamkeit: Wenn obj ursprünglich ein JSON-Objekt ist, ist es nach der Konvertierung mit der Funktion eval() (auch wenn es mehrmals konvertiert wird) immer noch ein JSON-Objekt , aber nachdem die Funktion parseJSON() zur Verarbeitung verwendet wurde, wird dies der Fall sein Im Zweifel (löst eine Syntaxausnahme aus).

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);

Hinweis:

Oben Unter den vielen Methoden stammen viele andere Methoden aus dem Paket json.js, außer dass die Funktion eval() mit js geliefert wird. Die neue Version von JSON hat die API geändert und sowohl die Methoden JSON.stringify() als auch JSON.parse() in die integrierten Objekte von Javascript eingefügt. Ersteres wird zu Object.toJSONString() und letzteres wird zu 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 habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

Informationen zur Verwendung von bootstrap-table.js zur Implementierung der erweiterten Paging-Symbolleistenfunktion

Informationen zu substring() und substr( ) (ausführliches Tutorial)

So ermitteln Sie, ob ein Variablenname in einem Array in JavaScript vorhanden ist

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