본문으로 건너뛰기

JS 학습노트 9_JSON

무료2015-04-12#JS#json

JSON 이란 무엇인가, 사용법, IE 지원 방법, json.js 의 내부 구현

##1.JSON 개요

JavaScript Object Notation, JS 객체 표기법, (XML 와 마찬가지로) 데이터 형식의 일종이며, JS 와 동일한 구문 형식을 가집니다

P.S.작은 역사: JSON 의 아버지는 더글라스, 『JavaScript 언어 정수』의 저자로, JSON 창조의 영감은 JS 의 리터럴 표기법에서 왔습니다

##2.JSON 구문

###1.단순 값 표현

예를 들어 3, "str", null, false 등. undefined 는 지원되지 않으며, 문자열은 반드시이중 인용부호를 사용해야 합니다 (JSON 에는 문자열을 나타내는 단일 인용부호 사용법은 없습니다. 이는 JS 와 다릅니다)

###2.객체 표현

JS 객체 리터럴과 비슷하지만,

  • 변수 선언 없음

  • 末尾의 세미콜론 없음

  • 속성명은 반드시 이중 인용부호로 감싸야합니다 (단일 인용부호로 쓰거나 인용부호를 잊기 쉬움)

예를 들어:

{
  "name" : "ayqy",
  "sex" : "M",
  "nextSibling" : {
    "name" : "xxx",
    "sex" : "M",
    "nextSibling" : null
  }
}

###3.배열 표현

배열 리터럴과 비슷하지만,

  • 변수 선언 없음

  • 末尾의 세미콜론 없음

예를 들어:

[3, 6, false, "ayqy", {"name" : "xxx", "age" : 18}]

###4.복잡한 데이터 구조

배열과 객체는 중첩을 통해 더 복잡한 데이터 구조를 생성할 수 있습니다. 예를 들어:

[
  1, 
  {
    "extra" : [
      6,
      {
        "id" : 5,
        "attr" : "value"
      },
      false
    ],
    "index" : 1001
  },
  2
]

##3.직렬화 (JS 객체에서 JSON 으로)

[IE8+] 및 기타 주요 브라우저에는 내장 JSON 객체가 있으며, 네이티브 메서드를 호출하여 JS 객체를 직렬화할 수 있습니다:

JSON.stringify(obj);//기본 규칙에 따라 직렬화. 값이 undefined 및 값이 함수인 속성은 무시됩니다
JSON.stringify(obj, arr/fun(key, value));//일부 속성을 필터링할 수 있습니다 (arr 에 나열된 속성만 유지, 또는 fun 으로 필터링)
JSON.stringify(obj, null, num/strPrefix);//포맷팅을 지원합니다. 자동 줄바꿈하고, 각 레벨을 num 개의 공백으로 들여쓰기, 또는 각 레벨에 접두사 문자열 추가

[IE7-] 을 어떻게 지원할지에 대해서는 나중에 논의하겠습니다

##4.파싱 (JSON 에서 JS 객체로)

JSON.parse(str);//직접 파싱
JSON.parse(str, fun(key, value));//fun 에 따라 파싱

[IE7-] 을 어떻게 지원할지에 대해서는 나중에 논의하겠습니다

##5.크로스 브라우저 JSON 직렬화/파싱

JSON 객체를 지원하지 않는 브라우저에는 shim(작은 용어) 를 사용할 수 있습니다:

다운로드 주소:https://github.com/douglascrockford/JSON-js/(더글라스 자신이 만듦)

간단히 말해 소형 JS 라이브러리 (압축 후 4KB 뿐) 로, JSON 파싱과 직렬화 기능을 제공합니다. 물론, JQuery 를 직접 사용할 수도 있습니다

더글라스는 추가적인 JSON 지원도 제공합니다 (기본적인 stringify 와 parse 이외):

json2.js: 내장 JSON 객체가 존재하지 않는 경우, 전역 객체에 JSON 속성을 추가합니다. 속성 값은 객체로, stringify 와 parse 메서드를 가집니다. parse 는 eval 메서드로 파싱하며, 몇 개의 정규식 검출을 사용하여 비 JSON 코드 실행을 방지합니다. 현대 브라우저에서는 이 js 파일은 아무것도 하지 않습니다. 네이티브 지원이 우선됩니다. [IE8-] 을 지원하는 것이 아니라면, 이것을 사용하지 마십시오. 즉, 이 파일은 필수가 아닙니다.

json.js: 이 파일은 json2.js 의 모든 기능을 포함하며, Object 의 프로토타입에 toJSONString 메서드와 parseJSON 메서드를 추가합니다. 사용하지 않는 것을 권장합니다.

json_parse.js: 이 파일은 parse 함수의 또 다른 구현을 제공합니다: 재귀 강하 (P.S. 구문 분석기.. 글쎄, 더글라스 할아버지의 전투력은 약간 강함) 로 eval 함수를 대체합니다

json_parse_state.js: 이 파일은 parse 함수의 또 다른 구현을 제공합니다: 상태 머신 (P.S....) 으로 eval 함수를 대체합니다

cycle.js: 이 파일에는 두 개의 함수가 있습니다: JSON.decycle 와 JSON.retrocycle. JSON 의 순환과 그래프 구조를 제거/복구하는 데 사용되며, JSONPath 는 데이터 관계를 나타내는 데 사용됩니다

P.S.위 내용은 readme 파일의 간단한 번역입니다

###참고 자료:

댓글

아직 댓글이 없습니다

댓글 작성