>  기사  >  웹 프론트엔드  >  JSON 관련 지식 요약_json

JSON 관련 지식 요약_json

WBOY
WBOY원래의
2016-05-16 15:51:371117검색

JSON: JavaScript 객체 표기법

JSON 구문 규칙
이름/값 쌍의 데이터
데이터는 쉼표로 구분됩니다
중괄호는 객체를 저장합니다
대괄호는 배열을 저장합니다

JSON에는 6가지 유형의 값이 있습니다.

객체, 배열, 문자열, 숫자, 부울 값, null

JSON 객체는 순서가 지정되지 않은 이름/값 쌍의 모음입니다

이름: 임의의 문자열
값: 배열 및 객체를 포함한 모든 유형의 JSON 값(객체는 객체에 포함될 수 있음)
참고: JSON 문자열은 큰따옴표를 사용해야 합니다(작은따옴표는 오류를 보고합니다)

1. 객체

자바스크립트에서 리터럴 만들기:

var object = {
  name:"lily",
  age:22
};

또는:

var object = {
  "name":"lily",
  "age":22
}; 

JSON:

{
  "name":"lily",
  "age":22
} 

2. 배열

JSON 배열은 자바스크립트에서 배열 리터럴 형식을 사용합니다
확장자:
배열과 객체를 결합하면 더 복잡한 데이터 조합을 형성할 수 있습니다
예:

[
  {
    "name":"lily",
    "age":22,
    "job":"docter"
  },
  {
    "name":"nicy",
    "age":21,
    "job":"teacher"
  },
  {
    "name":"lily",
    "age":22,
    "job":"AE"
  }
]  

3. 파싱 및 직렬화

JSON은 JavaScript와 유사한 구문을 가지며 JSON 데이터 구조를 유용한 JavaScript 개체로 구문 분석할 수 있습니다

1.JSON 객체

JSON 데이터 보내기 및 받기

JSON 데이터 객체를 읽고 쓰고 보내고 받을 때 문자열로 변환해야 하며 문자열에서 JSON 데이터 객체로 변환할 수 있습니다. (자바스크립트와 동일하게 읽고 쓰세요)

JSON 객체에는 두 가지 메서드가 있습니다.
① stringify(): 자바스크립트 객체를 JSON 문자열로 직렬화
②parse(): JSON 문자열을 기본 자바스크립트 값으로 구문 분석합니다

예:

var book = {
  title:"professional JavaScript",
  authors:[
    "lily"
  ],
  edition:3,
  year:2011
};
var jsonText = JSON.stringify(book);
alert(jsonText);   //{"title":"professional JavaScript","authors":["lily"],"edition":3,"year":2011}
alert(typeof jsonText);   //string
var bookCopy = JSON.parse(jsonText);
alert(typeof bookCopy);   //object 

이 예에서 JSON.stringify()는 javascript 개체 책을 JSON 문자열로 직렬화한 다음 이를 jsonText에 저장하는 데 사용됩니다. JSON 문자열 jsonText를 JSON.parse()에 직접 전달하여 해당 javascript 값을 가져옵니다.


참고: JavaScript 개체를 직렬화할 때 최종 값은 유효한 JSON 데이터 유형의 인스턴스 속성이며 잘못된 값은 건너뜁니다.

2. 직렬화 옵션

JSON.stringify()는 JavaScript 객체를 직렬화할 때 두 개의 매개변수를 받을 수 있습니다
매개변수 1: 필터(배열 또는 함수일 수 있음)
매개변수 2: JSON 문자열
에서 들여쓰기를 유지할지 여부를 나타내는 옵션 1) 결과 필터링
필터 매개변수가 배열인 경우 JSON.stringify()의 결과에는 배열
에 나열된 속성만 포함됩니다. 예:

var book = {
  "title":"professional JavaScript",
  "authors":[
    "lily"
  ],
  edition:3,
  year:2011
}; 
var jsonText = JSON.stringify(book,["title","edition"]);
alert(jsonText); //{"title":"professional JavaScript","edition":3}
alert(typeof jsonText); // string 

2) 문자열 들여쓰기:
JSON.stringify() 메서드의 세 번째 매개변수는 결과의 들여쓰기 및 공백 문자를 제어하는 ​​데 사용됩니다.
3) toJSON() 메소드
객체가 고유한 JSON 데이터 형식을 반환하도록 toJSON() 메서드를 정의합니다.

4. JSON 액세스 값

첫 번째 유형: 단순 배열
['항목1','항목2','항목3']
값: 숫자 인덱스를 통해 포함된 값에 접근합니다(첫 번째 항목의 인덱스는 0입니다)

['항목1','항목2','항목3']
var 항목 = ['item1','item2','item3'];
경보(항목[0]); //항목1 
두 번째 유형: {}를 사용하여 객체와 배열을 나타냅니다
{ "키":"값" }
값: 키 이름을 통해 포함된 값에 액세스합니다

var oExample = { "이름":"백합" };
경보(oExample.name); // 백합
Alert(oExample["이름"]); // 백합 
이 두 가지 방법을 사용하면 많은 데이터 구조를 하위 레코드(명명 또는 숫자 인덱스 키 사용) 측면에서 설명할 수 있습니다.

예:

var oNovelist = {
  "firstName":"lily",
  "lastName":"russ",
  "novels":
      [
        {
          "title":"and choas died",
          "year":"1970"
        },
        {
          "title":"the famale man",
          "year":"1976"
        }
      ]
}; 
var msg = oNovelist.firstName+" "+oNovelist.lastName+"'s"+" "+oNovelist.novels[0].title+" "+"was published in"+oNovelist.novels[0].year;
alert(msg);   // lily russ's and choas died was published in1970  

위 내용은 이 글의 전체 내용입니다. 모두 마음에 드셨으면 좋겠습니다.

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.