Comment implémenter l'optimisation du regroupement de données JSON en Javascript

Cet article présente principalement la pratique d'optimisation du regroupement de données JSON en Javascript. L'article résume également l'essentiel du JS exploitant JSON. Les amis qui en ont besoin peuvent s'y référer

Il y a un tas de données, et. Je dois le trier par regroupement pour que la présentation de la vue frontale

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

doive être transformée en ce qui suit

[
 {
 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. méthode, beaucoup de réseaux

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

Efficacité de fonctionnement : Il faut environ 3ms pour parcourir 1000 fois J'ai toujours eu l'impression que ce n'était pas élégant et que les fonctionnalités de ES5 n'étaient pas utilisées, j'ai donc décidé de l'optimiser moi-même !

2. Utilisez les fonctionnalités ES5

pour remplacer for par forEach et each

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

pour optimiser les performances de 50. %, environ 1,5 ms !

3. Pratique d'optimisation des performances

Étant donné que les dates de mon tableau sont classées dans l'ordre et qu'il n'y a pas de doublons, je peux envisager de supprimer le première L'efficacité de la deuxième boucle

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

est à nouveau optimisée de 50%, soit environ 1ms !

PS : Résumé du fonctionnement de JS JSON

JSON (JavaScript Object Notation) est un format d'échange de données léger et totalement indépendant spécifique au langage format texte, idéal pour l'échange de données. Dans le même temps, JSON est un format natif JavaScript, ce qui signifie que le traitement des données JSON en JavaScript ne nécessite aucune API ou boîte à outils spéciale.

Cet article résume principalement l'essentiel du JS exploitant JSON.

En JSON, il existe deux structures : les objets et les tableaux.

1. Un objet commence par "{" (crochet gauche) et se termine par "}" (crochet droit). Chaque "nom" est suivi d'un ":" (deux-points) ; les paires "nom/valeur" sont séparées par "," (virgule). Le nom est placé entre guillemets ; la valeur doit être placée entre parenthèses s'il s'agit d'une chaîne, mais pas s'il s'agit d'une valeur numérique. Par exemple :

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

2. Un tableau est une collection ordonnée de valeurs. Un tableau commence par "[" (crochet gauche) et se termine par "]" (crochet droit). Utilisez "," (virgule) pour séparer les valeurs.

Par exemple :

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

Afin de traiter facilement les données JSON, JSON fournit le package json.js, adresse de téléchargement : http://www.json.org/json.js

Dans le processus de transmission de données, json est transmis sous forme de texte, c'est-à-dire une chaîne, et JS fonctionne sur les objets JSON, donc la conversion mutuelle entre les objets JSON et les chaînes JSON est la clé. Par exemple :

Chaîne JSON :

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

Objet JSON :

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

1. Convertir la chaîne JSON en objet JSON<🎜 >

Pour utiliser le str1 ci-dessus, vous devez utiliser ce qui suit pour le convertir en objet JSON :

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

ou

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

ou

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

Ensuite, vous pouvez le lire ainsi :

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

Faites particulièrement attention : si obj est à l'origine un objet JSON, alors après avoir utilisé la fonction eval() pour le convertir (même s'il est converti plusieurs fois), ce sera toujours un objet JSON, mais il y aura des doutes (lancement d'une exception de syntaxe) après avoir utilisé la fonction parseJSON().

2. Vous pouvez utiliser toJSONString() ou la méthode globale JSON.stringify() pour convertir l'objet JSON en chaîne JSON.

Par exemple :

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

ou

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

Remarque :

Parmi les éléments essentiels ci-dessus, à l'exception du fait que la fonction eval() est fournie avec js, de nombreux autres éléments essentiels proviennent du package json.js. La nouvelle version de JSON a modifié l'API, en injectant les méthodes JSON.stringify() et JSON.parse() dans les objets intégrés de Javascript. La première devient Object.toJSONString() et la seconde devient parseJSON(. ). Si vous êtes invité à indiquer que les méthodes toJSONString() et parseJSON() sont introuvables, cela signifie que la version de votre package json est trop basse.

J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.

Articles connexes :

À propos de l'utilisation de bootstrap-table.js pour implémenter la fonction de barre d'outils de pagination étendue

À propos de substring() et substr( ) (tutoriel détaillé)

Comment déterminer si un nom de variable existe dans un tableau en JavaScript

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!