티스토리 뷰
반응형
JSON.stringify () 기능
JSON.stringify를 간단히 JSON문자열로 변환할때만 사용할 때 썼었는데, 몰랐던 기능들이 있습니다.
1. 찾고자하는 키 값을 두번째 인수에 넣어 전달하면 원하는 키의 배열만 리턴받을 수 있다.
{"id":"0001","type":"donut","name":"Cake","ppu":0.55,"batters":{"batter":[{"id":"1001","type":"Regular"},{"id":"1002","type":"Chocolate"},{"id":"1003","type":"Blueberry"},{"id":"1004","type":"Devil’s Food"}]},"topping":[{"id":"5001","type":"None"},{"id":"5002","type":"Glazed"},{"id":"5005","type":"Sugar"},{"id":"5007","type":"Powdered Sugar"},{"id":"5006","type":"Chocolate with Sprinkles"},{"id":"5003","type":"Chocolate"},{"id":"5004","type":"Maple"}]}
console.log(JSON.stringify(product,['name']);
// RESULT
{"name" : "Cake"}
2. 두번째 인수에 함수를 넣어 원하는 값을 리턴 받을 수 있다.
undefined일 경우에는 리턴되지 않는다.
const user = {
"name" : "Prateek Singh",
"age" : 26
}
JSON.stringfy(user, (key, value) => {
if(typeof value == 'string'){
return undefined;
}
return value;
});
// RESULT
{ "age": 26}
3. 세번째 인수가 '숫자'일 경우 문자열의 간격을 제어할 수 있다.
4. 세번째 인수가 '문자'일 경우 공백 대신 문자를 삽입할 수 있다.
5. toJson
키값에 따라 객체를 바로 리턴하지 않고 메서드를 통해 원하는 키 값을 합쳐서 반환할 수 있다.
const user = {
firstName : "Prateek",
lastName : "Singh",
age : 26,
toJSON() {
return {
fullName: `${this.firstName} + ${this.lastName}`
};
}
}
console.log(JSON.stringify(user));
// RESULT
"{ "fullName" : "Prateek Singh"}"
원본, 코드 출처
https://medium.com/javascript-in-plain-english/5-secret-features-of-json-stringify-c699340f9f27
반응형
'아티클' 카테고리의 다른 글
[아티클 프로젝트 0010] 프론트에서 안전하게 로그인 처리하기 (0) | 2020.07.24 |
---|---|
[아티클 프로젝트 009] shadowDOM (0) | 2020.07.23 |
[아티클 프로젝트 008] 클린봇 2.0: 문맥을 이해하는 악성 댓글(단문) 탐지 AI (0) | 2020.07.22 |
[아티클 프로젝트 007] 은닉을 향한 자바스크립트의 여정 (0) | 2020.07.21 |
[아티클 프로젝트 005] 하루에 1000번 배포하는 조직되기 (0) | 2020.07.16 |
[아티클 프로젝트 004] let, const와 블록 레벨 스코프 (0) | 2020.07.15 |
[아티클 프로젝트 003] 개발자도 알면 좋은 UI 디자인 (0) | 2020.07.14 |
[아티클 프로젝트 002] 성착취 방지 기법 소개 (0) | 2020.07.13 |
공지사항
최근에 올라온 글
최근에 달린 댓글
- Total
- Today
- Yesterday
링크
TAG
- Article
- Method
- 기초
- 제로초
- React
- 코딩애플
- Study
- 프로젝트
- VUE
- frontend
- JavaScript
- JS
- 아티클
- jQuery
- 공부
- 타입스크립트
- 브라우저
- 자바스크립트
- 뷰
- TypeScript
- 리액트
- vue.js
- 강의
- 차이
- html
- 메서드
- css
- 프론트엔드
- 제이쿼리
- 통신
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | ||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 |
글 보관함