Heim Web-Frontend js-Tutorial So optimieren Sie die JSON-Datengruppierung in JS

So optimieren Sie die JSON-Datengruppierung in JS

Apr 14, 2018 am 10:14 AM
javascript json 优化

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"}
]
Nach dem Login kopieren
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'
  }
 ]
 }
]
Nach dem Login kopieren

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
  }
  }
 }
 }
Nach dem Login kopieren
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
  })
 }
 })
Nach dem Login kopieren

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 ++
  }
 }
 })
Nach dem Login kopieren
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"};
Nach dem Login kopieren
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"}];
Nach dem Login kopieren
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" }';
Nach dem Login kopieren
JSON-Objekt:

 var str2 = { "name": "cxh", "sex": "man" };
Nach dem Login kopieren

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 + ')');
Nach dem Login kopieren
Oder

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

  var obj = JSON.parse(str); //由JSON字符串转换为JSON对象
Nach dem Login kopieren
Dann können Sie es so lesen:

  Alert(obj.name);
  Alert(obj.sex);
Nach dem Login kopieren
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字符
Nach dem Login kopieren
Oder

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

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!

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße Artikel -Tags

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Tipps zur Leistungsoptimierung für die Konvertierung von PHP-Arrays in JSON Tipps zur Leistungsoptimierung für die Konvertierung von PHP-Arrays in JSON May 04, 2024 pm 06:15 PM

Tipps zur Leistungsoptimierung für die Konvertierung von PHP-Arrays in JSON

Wie steuern Anmerkungen in der Jackson-Bibliothek die JSON-Serialisierung und -Deserialisierung? Wie steuern Anmerkungen in der Jackson-Bibliothek die JSON-Serialisierung und -Deserialisierung? May 06, 2024 pm 10:09 PM

Wie steuern Anmerkungen in der Jackson-Bibliothek die JSON-Serialisierung und -Deserialisierung?

C++-Programmoptimierung: Techniken zur Reduzierung der Zeitkomplexität C++-Programmoptimierung: Techniken zur Reduzierung der Zeitkomplexität Jun 01, 2024 am 11:19 AM

C++-Programmoptimierung: Techniken zur Reduzierung der Zeitkomplexität

Die Parameterkonfiguration des Vivox100 wurde enthüllt: Wie kann die Prozessorleistung optimiert werden? Die Parameterkonfiguration des Vivox100 wurde enthüllt: Wie kann die Prozessorleistung optimiert werden? Mar 24, 2024 am 10:27 AM

Die Parameterkonfiguration des Vivox100 wurde enthüllt: Wie kann die Prozessorleistung optimiert werden?

So optimieren Sie die Startelemente des WIN7-Systems So optimieren Sie die Startelemente des WIN7-Systems Mar 26, 2024 pm 06:20 PM

So optimieren Sie die Startelemente des WIN7-Systems

Schnelle Tipps zum Konvertieren von PHP-Arrays in JSON Schnelle Tipps zum Konvertieren von PHP-Arrays in JSON May 03, 2024 pm 06:33 PM

Schnelle Tipps zum Konvertieren von PHP-Arrays in JSON

Welche Möglichkeiten gibt es, Ineffizienzen in PHP-Funktionen zu beheben? Welche Möglichkeiten gibt es, Ineffizienzen in PHP-Funktionen zu beheben? May 02, 2024 pm 01:48 PM

Welche Möglichkeiten gibt es, Ineffizienzen in PHP-Funktionen zu beheben?

Probleme und Lösungen beim Konvertieren von PHP-Arrays in JSON Probleme und Lösungen beim Konvertieren von PHP-Arrays in JSON May 01, 2024 pm 01:30 PM

Probleme und Lösungen beim Konvertieren von PHP-Arrays in JSON

See all articles