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

  1. 현재 위치
  2. 홈페이지
  3. 경험 노트
  4. 본문

Javascript에서 JSON 데이터 그룹화 최적화 실습 및 JSON操作 요약

현재 많은 데이터가 있으며, 시간에 따라 그룹화하여 프론트엔드 뷰를 표시해야 합니다

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

예를 들어 변환해야 합니다

[
 {
 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. 원시 메서드, 네트워크에 많이 있습니다

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

실행 성능: 탐색1000개의 약속3ms, 느껴지는 것은 아름다운 것이 아니며 ES를 사용하지 않습니다5의 특성을 사용하여, 나는 자신의 최적화를 결정했습니다!

2. 사용자 정의 ES5특성

for를 forEach와 every로 대체합니다

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

성능 최적화50%，约1.5ms！

3. 성능 최적화 실습

제가의 배열의 date는 순서대로 정렬되어 있으며 중복이 없기 때문에 두 번째 루프를 제거할 수 있습니다

let map = {},
 nList = []
 //초기 키를 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 ++
  }
 }
 })

效率再次优化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）的有序集合。一个数组以“[”（左中括号）开始，“]”（右中括号）结束。值之间运用 “,”（逗号）分隔。

　　　 예를 들어:

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

　 //JSON 문자열을 JSON 객체로 변환합니다
var obj = eval('(' + str + ')');

또는　　

var obj = str.parseJSON(); //JSON 문자열을 JSON 객체로 변환합니다

　　　 또는　

  var obj = JSON.parse(str); //JSON 문자열을 JSON 객체로 변환합니다

　　　 그런 다음, 이렇게 읽을 수 있습니다:

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

　　　 특히 주의: obj가 이미 JSON 객체라면, eval() 함수를 사용하여 변환된 후에도 (여러 번 변환해도) 여전히 JSON 객체가 됩니다. 그러나 parseJSON() 함수를 사용하여 처리된 후에는 문제가 발생할 수 있습니다(문법 예외가 발생할 수 있습니다).

　　　 2. toJSONString() 또는 전체 가이드라인 JSON.stringify()를 사용하여 JSON 객체를 JSON 문자열로 변환할 수 있습니다.

　　　 예를 들어:　　　

var last=obj.toJSONString(); //JSON 객체를 JSON 문자열로 변환합니다

　　　 또는

  var last=JSON.stringify(obj); //JSON 객체를 JSON 문자열로 변환합니다
  alert(last);

　　　 주의:

　　　 위의 여러 가이드라인 중 eval() 함수는 JavaScript가 기본적으로 제공하는 것 외에, 다른 여러 가이드라인은 json.js 패키지에서 가져왔습니다. JSON 패키지의 새 버전은 API를 수정하여 JSON.stringify()와 JSON.parse() 두 가이드라인을 JavaScript의 내장 객체에 통합했습니다. 전자는 Object.toJSONString()이 되었고, 후자는 String.parseJSON()이 되었습니다. toJSONString()과 parseJSON() 가이드라인을 찾을 수 없다고 나타내면, JSON 패키지 버전이 너무 낮다는 것을 의미합니다.



선언: 이 문서의 내용은 인터넷에서 가져왔으며, 저작권자는 모두입니다. 내용은 인터넷 사용자가 자발적으로 기여하고 업로드한 것이며, 이 사이트는 소유권을 가지지 않으며, 인공적인 편집 처리를 하지 않았으며, 관련 법적 책임도 부담하지 않습니다. 저작권 위반이 의심되는 내용이 있으면, notice#w로 이메일을 보내 주세요.3codebox.com에 이메일을 보내면 (#을 @으로 변경하십시오.) 신고하시고 관련 증거를 제공하십시오. 사실이 확인되면, 이 사이트는 즉시 위반 내용을 삭제합니다.

기본 강의
추천