English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Il y a une masse de données, j'ai besoin de les regrouper par heure pour que l'interface utilisateur puisse les afficher
[
{"date":"2017-12-22"","start_time":"10:00:00","end_time":"10:00:00","status":"Performance Time"},
{"date":"2017-12-22"","start_time":"10:4"0: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:4"0:00","end_time":"10:40:00,"status":"Performance Time"}
]
doit être converti 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 originale, plein de réseaux
var map = {},
nList = []
//Parcourir l'array original
for (var i = 0; i < arr.length; i++) {
var item = arr[i]
//Si map n'a pas, ajouter dans le nouveau nList
if (!map[item.date]) {
nList.push({})
date: item.date,
data: [item]
})
map[item.date] = item
sinon {
//Parcourir nList
for (var j = 0; j < nList.length; j++) {
var nItem = nList[j],
//Si une date correspondante est trouvée, l'ajouter
if (nItem.date == item.date) {
nItem.data.push(item)
//Sortir de la boucle
break
}
}
}
}
Effet de performance : itération1000 de rendez-vous3ms, cela ne semble pas élégant et n'utilise pas ES5En conséquence, j'ai décidé de l'optimiser moi-même !
2.Utiliser les caractéristiques de ES5Caractéristique
Remplacer for par forEach et every
let map = {},
nList = []
arr.forEach((item) => {
if (!map[item.date]) {
nList.push({})
date: item.date,
data: [item]
})
map[item.date] = item
sinon {
//Comme forEach ne supporte pas break, utilisez every pour l'implémenter
nList.every((nItem) => {
if (nItem.date === item.date) {
nItem.data.push(item)
return false
}
return true
})
}
})
Optimisation des performances50%，约1.5ms！
3.Pratiques d'optimisation des performances
Étant donné que les dates de mon tableau sont classées en ordre et sans répétition, il est possible de supprimer la deuxième boucle
let map = {},
nList = []
//Définir la clé initiale sur 0
let _nkey = 0
arr.forEach((item, index) => {
if (index === 0) {
nList.push({})
date: item.date,
data: [item]
})
sinon {
let oItem = arr[index - 1]
//si la date précédente est la même, l'ajouter à l'actuel, sinon l'ajouter à nList
if (item.date === oItem.date) {
nList[_nkey]['data'].push(item)
sinon {
nList.push({})
date: item.date,
data: [item]
})
_nkey ++
}
}
})
效率再次优化50%，约1ms！
PS：JS操作JSON总结
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式，采用完全独立于语言的文本格式，是理想的数据交换格式。同时，JSON是 JavaScript 原生格式，这意味着在 JavaScript 中处理 JSON数据不须要任何特殊的 API 或工具包。
本文主要是对JS操作JSON的要领做下总结。
在JSON中，有两种结构：对象和数组。
1. 一个对象以“{”（左括号）开始，“}”（右括号）结束。每个“名称”后跟一个“:”（冒号）；“‘名称/. 值' 对”之间运用 “,”（逗号）分隔。 名称用引号括起来；值如果是字符串则必须用括号，数值型则不须要。例如：
var o={"xlid":"cxh","xldigitid":123456,"topscore":2000,"topplaytime":"2009-08-20"}；
2. 数组是值（value）的有序集合。一个数组以“[”（左中括号）开始，“]”（右中括号）结束。值之间运用 “,”（逗号）分隔。
Par exemple :
var jsonranklist=[{"xlid":"cxh","xldigitid":123456,"topscore":2000,"topplaytime":"2009-08-20"},{"xlid":"zd","xldigitid":123456,"topscore":1500,"topplaytime":"2009-11-20"}];
为了方便地处理JSON数据，JSON提供了json.js包，下载地址：http://www.json.org/json.js
在数据传输流程中，json是以文本，即字符串的形式传递的，而JS操作的是JSON对象，所以，JSON对象和JSON字符串之间的相互转换是关键。例如：
JSON字符串:
var str1 = '{ "name": "cxh", "sex": "man" }';
JSON对象:
var str2 = { "name": "cxh", "sex": "man" };
一、JSON字符串转换为JSON对象
要运用上面的str1，必须运用下面的要领先转化为JSON对象：
//Convertir une chaîne JSON en objet JSON
var obj = eval('(' + str + ');
ou
var obj = str.parseJSON(); //Convertir une chaîne JSON en objet JSON
ou
var obj = JSON.parse(str); //Convertir une chaîne JSON en objet JSON
Ensuite, vous pouvez lire ainsi :
Alert(obj.name); Alert(obj.sex);
Attention spéciale : si obj est déjà un objet JSON, après la conversion avec la fonction eval() (même après plusieurs conversions), il reste un objet JSON, mais après le traitement avec la fonction parseJSON(), il peut y avoir des questions (lancer une exception de syntaxe).
Deuxièmement, vous pouvez utiliser toJSONString() ou l'astuce globale JSON.stringify() pour convertir un objet JSON en chaîne JSON.
Par exemple :
var last=obj.toJSONString(); //Convertir un objet JSON en chaîne JSON
ou
var last=JSON.stringify(obj); //Convertir un objet JSON en chaîne JSON alert(last);
Attention :
Parmi les nombreuses astuces, à l'exception de la fonction eval() qui est intégrée à JavaScript, les autres astuces viennent du paquet json.js. La nouvelle version de JSON a modifié l'API, intégrant les deux astuces JSON.stringify() et JSON.parse() à l'objet intégré JavaScript, la première est devenue Object.toJSONString(), et la dernière String.parseJSON(). Si vous recevez un message indiquant que les astuces toJSONString() et parseJSON() ne peuvent pas être trouvées, cela signifie que la version de votre paquet json est trop ancienne.
Déclaration : le contenu de cet article est extrait du réseau, propriété des auteurs originaux, le contenu est contribué et téléversé par les utilisateurs d'Internet, ce site ne détient pas de droits de propriété, n'a pas été édité par l'homme, et n'assume aucune responsabilité juridique. Si vous trouvez du contenu présumé enfreignant les droits d'auteur, vous êtes invité à envoyer un e-mail à : notice#oldtoolbag.com (veuillez remplacer # par @ lors de l'envoi d'un e-mail pour signaler une violation et fournir des preuves. Une fois confirmée, le site supprimera immédiatement le contenu présumé enfreignant les droits d'auteur.)