English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Prática de otimização de agrupamento de dados JSON no Javascript e resumo das operações JSON

Existem muitos dados, preciso classificá-los por tempo para que a visualização da interface do usuário possa ser apresentada

[
 {"data":"2017-12-22"inicio_horario":"","fim_horario":"","status":"Tempo de Performance"},10:00:00","fim_horario":"","status":"Tempo de Performance"},10:00:00","status":"Tempo de Performance"},
 {"data":"2017-12-22"inicio_horario":"","fim_horario":"","status":"Tempo de Performance"},10:4"inicio_horario":"0:00","fim_horario":"","status":"Tempo de Performance"},10:4"inicio_horario":"0:00","fim_horario":"","status":"Tempo de Performance"},
 {"data":"2017-12-23"inicio_horario":"","fim_horario":"","status":"Tempo de Performance"},10:00:00","fim_horario":"","status":"Tempo de Performance"},10:00:00","status":"Tempo de Performance"},
 {"data":"2017-12-23"inicio_horario":"","fim_horario":"","status":"Tempo de Performance"},10:4"inicio_horario":"0:00","fim_horario":"","status":"Tempo de Performance"},10:40:00,"status":"Performance Time"}
]

precisa ser convertida para o seguinte

[
 {
 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, muitos na rede

var map = {},
 nList = []
 //varredura do array original
 for (var i = 0; i < arr.length; i++) {
 var item = arr[i]
 //se map não tiver, adiciona no novo nList
 if (!map[item.date]) {
  nList.push({})
  date: item.date,
  data: [item]
  })
  map[item.date] = item
 else {
  //varredura nList
  for (var j = 0; j < nList.length; j++) {
  var nItem = nList[j],
  //ao encontrar a data correspondente, adiciona
  if (nItem.date == item.date) {
   nItem.data.push(item)
   //Sair do loop
   break
  }
  }
 }
 }

Eficiência de execução: varredura1000 encontros3ms, parece pouco elegante e não usa ES5decidi otimizar por conta própria!

2.Usar a característica do ES5Característica

Substituir for por 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 {
  //porque o forEach não suporta break, então usa every para implementar
  nList.every((nItem) => {
  if (nItem.date === item.date) {
   nItem.data.push(item)
   return false
  }
  return true
  })
 }
 })

Otimização de desempenho50%,约1.5ms!

3.Prática de otimização de desempenho

porque a data do meu array está ordenada e não há repetições, então pode considerar remover o segundo loop

let map = {},
 nList = []
 //Definir a chave inicial como 0
 let _nkey = 0
 arr.forEach((item, index) => {
 if (index === 0) {
  nList.push({})
  date: item.date,
  data: [item]
  })
 else {
  let oItem = arr[index - 1]
  //e data da última data está consistente, então é adicionado no momento atual, caso contrário, é adicionado ao 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 exemplo:

  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对象:

  //Converter string JSON para objeto JSON
var obj = eval('(' + str + ')');

ou  

var obj = str.parseJSON(); //Converter string JSON para objeto JSON

    ou 

  var obj = JSON.parse(str); //Converter string JSON para objeto JSON

    Então, pode-se ler assim:

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

    Atenção especial: Se o obj já é um objeto JSON, após a conversão usando a função eval() (mesmo que seja várias vezes), ainda é um objeto JSON, mas após o processamento com a função parseJSON() haverá dúvidas (lançará exceção de sintaxe).

    II. Pode usar toJSONString() ou o método global JSON.stringify() para converter objeto JSON para string JSON.

    Por exemplo:   

var last=obj.toJSONString(); //Converter objeto JSON para caractere JSON

    ou

  var last=JSON.stringify(obj); //Converter objeto JSON para caractere JSON
  alert(last);

    Atenção:

    Entre os vários princípios, além da função eval() ser nativa do js, os outros vários princípios vêm do pacote json.js. A nova versão do JSON modificou o API, injetando os dois princípios JSON.stringify() e JSON.parse() no objeto nativo do Javascript, o primeiro se tornou Object.toJSONString(), e o último String.parseJSON(). Se surgir a mensagem de que não pode encontrar os métodos toJSONString() e parseJSON(), isso significa que a versão do seu pacote json é muito antiga.



Declaração: O conteúdo deste artigo é proveniente da Internet, pertence ao autor original, é contribuído e carregado voluntariamente pelos usuários da Internet, o site não possui direitos de propriedade, não foi editado manualmente e não assume responsabilidade por eventuais responsabilidades legais. Se você encontrar conteúdo suspeito de direitos autorais, por favor, envie um e-mail para: notice#oldtoolbag.com (ao enviar e-mail, substitua # por @ para denunciar, e forneça provas relacionadas. Apenas após a verificação, o site deletará o conteúdo suspeito de infringência de direitos autorais.)

Você também pode gostar