Javascript中JSON数据分组优化实践及JS操作JSON总结

Ho un mucchio di dati, devo raggrupparli per tempo per presentare la vista frontend

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

Deve essere trasformato in quanto segue

[
 {
 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. Metodo originale, ci sono molte risorse in rete

var map = {},
 nList = []
 //Esegui la scansione dell'array originale
 for (var i = 0; i < arr.length; i++) {
 var item = arr[i]
 //Se map non esiste, aggiungi nel nuovo nList
 if (!map[item.date]) {
  nList.push({
  date: item.date,
  data: [item]
  
  map[item.date] = item
 } else {
  // Eseguire il ciclo attraverso nList
  for (var j = 0; j < nList.length; j++) {
  var nItem = nList[j],
  // Se viene trovata una data corrispondente, viene aggiunta
  if (nItem.date == item.date) {
   nItem.data.push(item)
   // Esci dal ciclo
   break
  
  
 
 

Efficienza di esecuzione: attraversamento di 1000 elementi circa 3 ms, sembra non elegante e non utilizza le caratteristiche ES5, quindi ho deciso di ottimizzarlo!

2. Utilizzo delle caratteristiche ES5

Sostituire for con forEach e every

let map = {},
 nList = []
 arr.forEach((item) => {
 if (!map[item.date]) {
  nList.push({
  date: item.date,
  data: [item]
  
  map[item.date] = item
 } else {
  // Poiché forEach non supporta break, viene utilizzato every per implementare
  nList.every((nItem) => {
  if (nItem.date === item.date) {
   nItem.data.push(item)
   return false
  
  return true
  
 
 

Ottimizzazione delle prestazioni del 50%, circa 1.5 ms!

3. Pratiche di ottimizzazione delle prestazioni

poiché la mia array di date è ordinata e non ha duplicati, possiamo considerare di rimuovere il secondo ciclo

let map = {},
 nList = []
 // Impostare la chiave iniziale a 0
 let _nkey = 0
 arr.forEach((item, index) => {
 if (index === 0) {
  nList.push({
  date: item.date,
  data: [item]
  
 } else {
  let oItem = arr[index - 1]
  // Se la data è la stessa dell'ultima, viene aggiunta qui, altrimenti viene aggiunta a nList
  if (item.date === oItem.date) {
  nList[_nkey]['data'].push(item)
  } else {
  nList.push({
   date: item.date,
   data: [item]
  
  _nkey ++
  
 
 

Efficienza ottimizzata ulteriormente del 50%, circa 1 ms!

PS: Sommario delle operazioni JS su JSON

JSON (JavaScript Object Notation) è un formato leggero di scambio di dati, che utilizza un formato di testo completamente indipendente dal linguaggio, ed è un formato ideale per lo scambio di dati. Inoltre, JSON è un formato nativo di JavaScript, il che significa che non è necessario alcun API o pacchetto di strumenti speciale per gestire dati JSON in JavaScript.

　　　 Questo documento è una sintesi delle tecniche di operazione JSON in JS.

　　　 In JSON ci sono due strutture: oggetto e array.

　　　 1. Un oggetto inizia con “{” (parentesi graffa sinistra) e termina con “}” (parentesi graffa destra). Dopo ogni “nome” segue un “:” (due punti); i “nome/valore” sono separati da “,” (virgola). Il nome è racchiuso tra virgolette; se il valore è una stringa deve essere racchiuso tra parentesi, mentre se è numerico non è necessario. Ad esempio:　

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

　　　 2. Un array è un insieme ordinato di valori. Un array inizia con “[” (parentesi squadrata sinistra) e termina con “]” (parentesi squadrata destra). I valori sono separati da “,” (virgola).

　　　 Esempio:

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

　　　 Per facilitare la gestione dei dati JSON, JSON fornisce il pacchetto json.js, indirizzo di download:http://www.json.org/json.js

　　　 Nel flusso di trasmissione dei dati, json viene trasmesso come testo, ossia come stringa, mentre JS opera sugli oggetti JSON, quindi la conversione tra oggetto JSON e stringa JSON è fondamentale. Ad esempio:

　　　 Stringa JSON:

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

　　　 Oggetto JSON:　　　

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

　　　 1. Convertire stringa JSON in oggetto JSON

　　　 Per utilizzare il seguente str1, è necessario convertire in oggetto JSON come segue:

　 // da stringa JSON a oggetto JSON
var obj = eval('(' + str + ')');

O　　

var obj = str.parseJSON(); // da stringa JSON a oggetto JSON

　　　 O　

  var obj = JSON.parse(str); // da stringa JSON a oggetto JSON

　　　 Poi, puoi leggere così:

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

　　　 Attenzione speciale: se obj è già un oggetto JSON, dopo la conversione con la funzione eval() (sia essa una conversione singola o multipla) rimane un oggetto JSON, ma dopo il trattamento con la funzione parseJSON() ci possono essere problemi (lancio di un'eccezione di sintassi).

　　　 2. Puoi utilizzare toJSONString() o la funzione globale JSON.stringify() per convertire l'oggetto JSON in una stringa JSON.

　　　 Esempio:　　　

var last=obj.toJSONString(); // Converti l'oggetto JSON in una stringa JSON

　　　 O

  var last=JSON.stringify(obj); // Converti l'oggetto JSON in una stringa JSON
  alert(last);

　　　 Attenzione:

　　　 Tra questi concetti, oltre alla funzione eval() nativa di js, gli altri concetti derivano dal pacchetto json.js. La nuova versione di JSON ha modificato l'API, integrando entrambi i concetti JSON.stringify() e JSON.parse() nel objeto interno di Javascript, il primo è diventato Object.toJSONString(), mentre l'altro è diventato String.parseJSON(). Se viene visualizzato un messaggio di errore che indica che non si trovano i concetti toJSONString() e parseJSON(), significa che la versione del tuo pacchetto json è troppo vecchia.

Dichiarazione: il contenuto di questo articolo è stato raccolto da Internet, è di proprietà dei rispettivi autori, il contenuto è stato contribuito e caricato dagli utenti di Internet autonomamente, questo sito non detiene i diritti di proprietà, non è stato editato manualmente e non assume responsabilità legali correlate. Se trovi contenuti sospetti di violazione del copyright, ti preghiamo di inviare una e-mail a: notice#oldtoolbag.com (al momento dell'invio dell'e-mail, sostituisci # con @) per segnalare il problema e fornire prove pertinenti. Una volta verificata, questo sito rimuoverà immediatamente il contenuto sospetto di violazione del copyright.