Comment optimiser le regroupement de données JSON dans JS

Cette fois, je vais vous montrer comment optimiser le regroupement de données JSON de JS. Quelles sont les précautions pour optimiser le regroupement de données JSON de JS Voici un cas pratique, jetons un coup d'oeil.

Il y a un tas de données que je dois regrouper par heure pour que la vue frontale soit rendue

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

Il doit être converti comme 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 originale, 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é d'exécution : il faut environ 3 ms pour parcourir 1000 fois. J'ai toujours eu l'impression que ce n'était pas élégant et que les fonctionnalités d'ES5 n'étaient pas utilisées, j'ai donc décidé de l'optimiser moi-même !

2. Utiliser les fonctionnalités ES5

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

Optimisation des performances50%, environ 1,5 ms !

3. Pratique d'optimisation des performances

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

L'efficacité est à nouveau optimisée de 50%, environ 1ms !

PS : Résumé JSON de l'opération JS

JSON(JavaScript Notation d'objet) Il s'agit d'un format d'échange de données léger qui utilise un format de texte totalement indépendant de la langue et constitue un format d'échange de données idéal. En même temps, JSON est un format natif JavaScript, ce qui signifie que dans 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 : objet et tableau.

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 mis entre guillemets ; si la valeur est chaîne , les parenthèses doivent être utilisées, mais les types numériques ne sont pas obligatoires. 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 des 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);

Note spéciale : si obj est à l'origine un objet JSON, ce sera toujours un objet JSON après conversion à l'aide de la fonction eval() (même s'il est converti plusieurs fois), mais il y aura des questions après traitement à l'aide de la fonction parseJSON() ( une exception de syntaxe sera levée).

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

Attention :

Parmi les méthodes ci-dessus, à l'exception de la fonction eval() fournie avec js, de nombreuses autres méthodes proviennent du package json.js. Nouvelle version de JSON modifiée API, les méthodes JSON.stringify() et JSON.parse() sont injectées dans les objets intégrés de Javascript, et la première devient Object.toJSONString(), qui devient String.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.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Explication détaillée de l'utilisation de la bibliothèque d'exécution multithread de JS Nexus.js

Comment faire fonctionner Jackson lorsque analyse des chaînes JSON Conversion de la casse des lettres

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!