집 > 기사 > 웹 프론트엔드 > JS에서 JSON 데이터 그룹화를 최적화하는 방법

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

php中世界最好的语言원래의: 2018-04-14 10:14:351909검색

이번에는 JS의 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

객체 표기법) 완전히 언어 독립적인 텍스트 형식을 사용하는 경량 데이터 교환 형식이며 이상적인 데이터 교환 형식입니다. 동시에 JSON은 JavaScript 기본 형식입니다. JavaScript로 JSON 데이터를 처리하는 데는 특별한 API나 툴킷이 필요하지 않습니다. 이 글은 JS가 JSON을 운영하는데 필요한 핵심 내용을 주로 요약한 것입니다.

JSON에는

object

와 배열이라는 두 가지 구조가 있습니다. 1. 객체는 "{"(왼쪽 대괄호)로 시작하고 "}"(오른쪽 대괄호)로 끝납니다. 각 "이름" 뒤에는 ":"(콜론)이 옵니다. "이름/값" 쌍은 ","(쉼표)로 구분됩니다. 이름은 따옴표로 묶여 있습니다. 값이

string

인 경우 괄호로 묶어야 하지만 숫자 유형의 경우에는 그렇지 않습니다. 예:

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은 텍스트, 즉 문자열 형태로 전송되는데, 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);

주의:

위의 메소드 중 eval() 함수가 js와 함께 제공되는 것을 제외하고 다른 많은 메소드는 json.js 패키지에서 제공됩니다. 새로운 버전의 JSON이 수정되었습니다. API, JSON.stringify() 및 JSON.parse() 메소드는 모두 Javascript의 내장 객체에 주입되며 전자는 다음과 같습니다. Object.toJSONString()은 다음과 같습니다. 문자열.parseJSON(). toJSONString() 및 parseJSON() 메서드를 찾을 수 없다는 메시지가 표시되면 json 패키지 버전이 너무 낮다는 의미입니다.

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!