Javascript에서 JSON 데이터 그룹화 최적화를 구현하는 방법

이 글은 주로 Javascript에서 JSON 데이터 그룹화의 최적화 실습을 소개합니다. 또한 JS가 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: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"}
]

을 다음

[
 {
 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가 소요됩니다. 하지만 항상 우아하지 않고, ES5의 기능을 사용하지 않는다는 느낌이 들어서 직접 최적화하기로 결정!

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. 성능 최적화 연습

내 배열의 날짜가 순서대로 정렬되어 있고 중복이 없기 때문에 두 번째 루프를 제거하는 것을 고려할 수 있습니다

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

효율성이 다시 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. 배열은 순서가 지정된 값 모음입니다. 배열은 "["(왼쪽 대괄호)로 시작하고 "]"(오른쪽 대괄호)로 끝납니다. 값을 구분하려면 ","(쉼표)를 사용하세요.

예:

  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은 text 즉, 문자열 형태로 전달되고, JS는 JSON 객체로 동작하기 때문에 JSON 객체와 JSON 문자열 간의 변환이 핵심이다. 예:

JSON 문자열:

  var str1 = '{ "name": "cxh", "sex": "man" }';

JSON 개체:

 var str2 = { "name": "cxh", "sex": "man" };

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

주의:

위의 여러 메서드 중에서 js와 ​​함께 제공되는 eval() 함수를 제외하고 다른 많은 메서드는 json js 패키지에서 가져온 것입니다. JSON의 새 버전은 JSON.stringify() 및 JSON.parse() 메서드를 모두 Javascript의 내장 개체에 삽입하여 API를 수정했습니다. 전자는 Object.toJSONString()이 되고 후자는 String이 됩니다. ). toJSONString() 및 parseJSON() 메서드를 찾을 수 없다는 메시지가 표시되면 json 패키지 버전이 너무 낮다는 의미입니다.

위 내용은 제가 여러분을 위해 정리한 내용입니다. 앞으로 도움이 되길 바랍니다.

관련 기사:

bootstrap-table.js를 사용하여 확장된 페이징 도구 모음 기능 구현에 대해

substring()과 substr()의 차이점에 대해(자세한 튜토리얼)

에서 변수 이름을 결정하는 방법 JavaScript 배열에 존재하나요?

위 내용은 Javascript에서 JSON 데이터 그룹화 최적화를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!