JavaScript가 Json 문자열을 순회하고 브라우저가 일관되지 않은 결과를 출력합니다.

高洛峰
풀어 주다: 2016-12-07 17:19:50
원래의
1178명이 탐색했습니다.

본문을 소개하기 전에 json이 무엇인지 먼저 말씀드리겠습니다.

JSON(JavaScript Object Notation)은 JavaScript Object Notation이라고 하는 경량 데이터 교환 형식입니다. 데이터 전송에 JSON을 사용하는 이점 중 하나는 JSON이 실제로 JavaScript라는 것입니다. ECMAScript 버전 3의 JavaScript 객체 리터럴 구문 하위 집합을 기반으로 하는 텍스트 형식입니다. 즉, responseText를 사용하여 서버에서 JSON 데이터를 검색한 다음 JavaScript의 eval() 메서드를 사용하여 JSON 문자열을 JavaScript 개체로 변환한 다음 추가 JavaScript를 사용하면 처리 없이 개체에서 데이터를 쉽게 추출할 수 있습니다. .

우리는 프로젝트 작업을 할 때 JavaScript json을 자주 사용합니다.

먼저 자바스크립트의 json 문자열이 무엇인지부터 알아보겠습니다. json 문자열은 자바스크립트의 객체로 키와 값에 해당하는 객체를 가지고 있습니다.

일반 형식은 다음과 같습니다.

a = {
a1 : 1,
a2 : 'abc',
a3 : 'abc',
a4 : [1,2,3],
a5 : function(){console.log(12)}
};
로그인 후 복사

이 json을 읽는 방법은 for in 루프를 통해 탐색하는 것입니다. >

json 문자열을 사용하면 데이터베이스에 있는 데이터를 한 번에 읽어서 json 형식으로 저장한 후, 자바스크립트를 통해 내부 속성을 읽어올 수 있다는 장점이 있습니다. 서버에 대한 요청 수를 늘리십시오. 첫 페이지의 로딩 효율성.

json을 순회할 때 많은 문제에 직면하게 됩니다. 오늘 제가 직면한 문제는 json 문자열의 키 값을 숫자로 작성할 때 주류 브라우저가 순회할 때 우리의 지시를 따르지 않는다는 것입니다. 출력 json은 순차적으로 출력되지만 작은 숫자부터 큰 숫자 순으로 출력됩니다. 하지만 IE8 이하의 브라우저는 우리가 출력한 순서대로 출력합니다.

예:

a = {
'1' : 1,
'5' : function(){console.log(12)},
'2' : 'abc',
'4' : [1,2,3],
'3' : {'5' : 'abc', '6' : 'bcd'},
};
로그인 후 복사

for in 루프 사용

for(var i in a){
console.log(a[i]);
}
로그인 후 복사

Chrome, Firefox 및 기타 브라우저 출력: 1, abc, Object { 5="abc", 6="bcd"}, [1, 2, 3], function()

ie8 그리고 다음 브라우저: 1, function(), abc, [1, 2, 3], Object { 5="abc", 6="bcd"}

이 문제를 해결하는 방법에는 두 가지가 있습니다. 문제:

첫 번째는 숫자 키 값을 문자 또는 밑줄이 포함된 문자열로 변경하는 것입니다.

두 번째는 먼저 json을 순회한 다음 키 값을 변환하여 IE의 호환성을 해결하는 것입니다. 배열에 저장한 다음 배열을 반복하여 json으로 데이터를 가져옵니다.

특정 코드:

var arr = [],sortNumber = function (a,b){
return a - b;
};
for(var i in a){
arr[arr.length] = a[i];
arr.sort(sortNumber);
for(var x = 0; x < arr.length; x++) {
console.log(a[arr[x]]);
}
로그인 후 복사

브라우저에서 읽은 데이터는 일관성이 있습니다. 우리가 출력하는 json 형식은 브라우저 호환성 문제만 해결합니다.


관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿