[JS] 자바스크립트 중급 part3 정리

1. JSON(javascirpt object notation) 

1) 정의 : 자바스크립트 객체 표기법 !

2) 특징

- 서버와 웹페이지간의 데이터를 주고받을 때 많이 사용

- key와 value의 쌍으로 이루어진 데이터 객체를 전달하기 위해 만들어진 포맷

- 예전에 쓰던 xml을 대체하여 만들어졌다.(xml을 굉장히 복잡하다 !)

- 계층적인 구조를 가지며 간결하고 짧다

 

* xml과 json 비교

> xml  : 엔드태그를 사용하여 데이터 표현

<?xml version="1.0"?>
<CAT>
  <NAME>Izzy</NAME>
  <BREED>Siamese</BREED>
  <AGE>6</AGE>
  <ALTERED>yes</ALTERED>
  <DECLAWED>no</DECLAWED>
  <LICENSE>Izz138bod</LICENSE>
  <OWNER>Colin Wilcox</OWNER>
</CAT>

> json : 엔드태그가 필요없다

 

3) 구조

let people = [
  {"firstName" : "길동", "lastName":"홍"},
  {"firstName" : "순신", "lastName":"이"},
  {"firstName" : "감찬", "lastName":"강"},
]

 

2. JSON 관련 메서드

1) JSON.parse() : json 형식의 데이터를 자바스크립트 객체로 변환

JSON.parse(jsonText)

2) JSON.stringify() : 자바스크립트 객체를 json 형식의 텍스트로 변환

JSON.stringify(dataObject)

- 객체나 배열은 string으로 변환되지만 함수, symbol, undefined 는 변환 되지 않는다 ! ! (중간에 있으면 무시)

홑따옴표가 쌍따옴표로 바뀜 !

- 배열 안에 있는 함수, symbol, undefined 는 null 로 처리된다.

- 객체를 출력할 때 for ~ in 반복문을 주로 사용한다. (배열엔 for ~ of 반복문 사용?) 

 

- space 옵션(3번째 인자) : 가독성이 안좋은 객체를 가독성이 좋게 바꿔줌

JSON.stringfy(객체, null, 들여쓰기수(ex-1,2,'\t'));

- replacer 옵션(2번째 인자) : 원하는 객체의 속성들만 선택해서 지정할 수 있다. (생략가능 or NULL)

 >지정한 키값을 배열 인자로 넣어 원하는 키값과 벨류 추출가능

JSON.stringfy(jsonData, ["key 값", ...]/함수 , '\t');

> value값을 체크하여 string만 패스(undefined)하고 숫자형만 json문자열로 만들수 있다.

function replacer(key,value){
  if(typeof value === 'string')
    return undefined;
  else return value;
}

JSON.stringify(json, replacer, '\t');