English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Hay una serie de datos, necesito agruparlos por tiempo para que la vista del frontend pueda presentarse
[ {"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"} ]
Necesita convertirse en lo siguiente
[ { 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étodo original, hay muchos en la red
var map = {}, nList = [] //Recorrer el array original for (var i = 0; i < arr.length; i++) { var item = arr[i] //Si map no tiene, agregar en el nuevo nList if (!map[item.date]) { nList.push({}) date: item.date, data: [item] ) map[item.date] = item else { //Recorrer nList for (var j = 0; j < nList.length; j++) { var nItem = nList[j], //Agregar si se encuentra un 'date' que coincide if (nItem.date == item.date) { nItem.data.push(item) //Salir del bucle break } } } }
Eficiencia de ejecución: recorrido1000 citas3ms, siempre siento que no es elegante y no se utiliza ES5.Por lo tanto, decidí optimizarlo yo mismo!
2.Usar las características de ES5Característica
Reemplazar 'for' con 'forEach' y 'every'
let map = {}, nList = [] arr.forEach((item) => { if (!map[item.date]) { nList.push({}) date: item.date, data: [item] ) map[item.date] = item else { //Dado que 'forEach' no admite 'break', se utiliza 'every' para implementar nList.every((nItem) => { if (nItem.date === item.date) { nItem.data.push(item) return false } return true ) } )
Optimización de rendimiento50%,约1.5ms!
3.Práctica de optimización de rendimiento
Dado que los 'date' de mi array están ordenados y no hay repetición, se puede considerar eliminar la segunda iteración
let map = {}, nList = [] //Establecer la clave inicial en 0 let _nkey = 0 arr.forEach((item, index) => { if (index === 0) { nList.push({}) date: item.date, data: [item] ) else { let oItem = arr[index - 1] //Si el 'date' anterior coincide, se agrega en el momento actual; de lo contrario, se agrega a nList if (item.date === oItem.date) { nList[_nkey]['data'].push(item) else { 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)的有序集合。一个数组以“[”(左中括号)开始,“]”(右中括号)结束。值之间运用 “,”(逗号)分隔。
Por ejemplo:
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 una cadena JSON a un objeto JSON var obj = eval('(' + str + ');
o
var obj = str.parseJSON(); //Convertir una cadena JSON a un objeto JSON
o
var obj = JSON.parse(str); //Convertir una cadena JSON a un objeto JSON
Luego, se puede leer así:
Alert(obj.name); Alert(obj.sex);
Cuidado especial: si obj ya es un objeto JSON, después de la conversión con la función eval() (incluso después de varias conversiones), aún es un objeto JSON, pero después de procesar con la función parseJSON() habrá preguntas (lanzar excepciones de sintaxis).
II. Puede usar toJSONString() o la función global JSON.stringify() para convertir un objeto JSON a una cadena JSON.
Por ejemplo:
var last=obj.toJSONString(); //Convertir un objeto JSON a una cadena JSON
o
var last=JSON.stringify(obj); //Convertir un objeto JSON a una cadena JSON alert(last);
Cuidado:
Entre los varios principios, además de la función eval() que es nativa de js, los otros varios principios vienen del paquete json.js. La nueva versión de JSON ha modificado el API, inyectando los dos principios JSON.stringify() y JSON.parse() en el objeto nativo de Javascript, el primero se convirtió en Object.toJSONString(), y el otro se convirtió en String.parseJSON(). Si se muestra un mensaje de error de que no se puede encontrar el principio toJSONString() y parseJSON(), significa que la versión de su paquete json es demasiado baja.
Declaración: El contenido de este artículo se ha obtenido de la red, es propiedad del autor original, el contenido ha sido contribuido y subido por los usuarios de Internet, este sitio no posee los derechos de propiedad, no ha sido editado artificialmente y no asume responsabilidad por las responsabilidades legales relacionadas. Si encuentra contenido sospechoso de infracción de derechos de autor, por favor envíe un correo electrónico a: notice#oldtoolbag.com (al enviar un correo electrónico, reemplace # con @ para denunciar y proporcione evidencia relevante. Una vez confirmado, este sitio eliminará inmediatamente el contenido sospechoso de infracción.)