JSON.stringify()의 5 가지 비밀 특성 을 자세히 설명 합 니 다.
4727 단어 JSON.stringify()특성
JavaScript 개발 자로 서 JSON.stringify()는 디 버 깅 에 사용 되 는 가장 흔 한 함수 입 니 다.그러나 그 역할 은 무엇 일 까?콘 솔 로그()를 사용 해 같은 일 을 할 수 없 을 까?한번 해 봅 시다.
// user
const user = {
"name" : "Prateek Singh",
"age" : 26
}
console.log(user);
//
// [object Object]
읊다,읊조리다console.log()는 원 하 는 결 과 를 출력 하 는 데 도움 을 주지 않 았 습 니 다.대상 에서 문자열 로 의 기본 변환 이[object Object]이기 때문에[object Object]를 출력 합 니 다.따라서 저 희 는 JSON.stringify()를 사용 하여 먼저 대상 을 문자열 로 변환 한 다음 콘 솔 에 인쇄 합 니 다.다음 과 같 습 니 다.
const user = {
"name" : "Prateek Singh",
"age" : 26
}
console.log(JSON.stringify(user));
//
// "{ "name" : "Prateek Singh", "age" : 26 }"
일반적으로 개발 자 들 이 stringify 함 수 를 사용 하 는 장면 은 우리 가 위 에서 한 것 처럼 보편적이다.하지만 숨겨 진 비밀 을 알려 드 리 겠 습 니 다.이 작은 비밀 들 이 당신 을 더욱 쉽게 개발 할 수 있 습 니 다.두 번 째 매개 변수(배열)
네,stringify 함수 에 도 두 번 째 인자 가 있 을 수 있 습 니 다.콘 솔 에 인쇄 할 대상 의 키 배열 입 니 다.쉬 워 보인다 고요?좀 더 깊이 들 어가 자.대상 produt 이 있 습 니 다.그리고 produt 의 name 속성 값 을 알 고 싶 습 니 다.우리 가 그것 을 인쇄 할 때:
console.log(JSON.stringify(product));
그것 은 아래 의 결 과 를 출력 할 것 이다.{"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"}]}
로그 에서 name 키 를 찾기 가 쉽 지 않 습 니 다.콘 솔 에 쓸모없는 정보 가 많이 표시 되 어 있 기 때 문 입 니 다.대상 이 커지 면 속성 찾기 가 어려워 집 니 다.stringify 함수 의 두 번 째 매개 변 수 는 이때 유용 합 니 다.코드 를 다시 쓰 고 결 과 를 봅 시다.
console.log(JSON.stringify(product,['name' ]);
//
{"name" : "Cake"}
문제 가 해결 되 었 습 니 다.전체 JSON 대상 을 인쇄 하 는 것 과 달리 두 번 째 매개 변수 에서 필요 한 키 를 배열 로 전달 하여 필요 한 속성 만 인쇄 할 수 있 습 니 다.두 번 째 매개 변수(함수)
우 리 는 또 함 수 를 두 번 째 매개 변수 로 전송 할 수 있다.그것 은 함수 에 기 록 된 논리 에 따라 모든 키 쌍 을 계산한다.undefined 로 돌아 가면 키 값 을 인쇄 하지 않 습 니 다.예 시 를 참고 하여 더욱 좋 은 이 해 를 얻 으 세 요.
const user = {
"name" : "Prateek Singh",
"age" : 26
}
//결과
{ "age" : 26 }
age 만 인쇄 되 었 습 니 다.함수 가 type:Of 를 String 의 값 으로 undefined 로 판단 하기 때 문 입 니 다.
세 번 째 매개 변 수 는 숫자 입 니 다.
세 번 째 매개 변 수 는 마지막 문자열 의 간격 을 제어 합 니 다.매개 변수 가 숫자 라면 문자열 화 된 모든 단 계 는 이 수량의 빈 칸 문 자 를 들 여 씁 니 다.
// : , '--'
JSON.stringify(user, null, 2);
//{
//--"name": "Prateek Singh",
//--"age": 26,
//--"country": "India"
//}
세 번 째 매개 변 수 는 문자열 입 니 다.세 번 째 인자 가 string 이면 위 에 표 시 된 빈 칸 문 자 를 대체 합 니 다.
JSON.stringify(user, null,'**');
//{
//**"name": "Prateek Singh",
//**"age": 26,
//**"country": "India"
//}
// *
toJSON 방법우 리 는 toJSON 이라는 방법 이 있 는데,그것 은 임의의 대상 의 속성 이 될 수 있다.JSON.stringify 는 이 함수 의 결 과 를 되 돌려 주 고 전체 대상 을 문자열 로 변환 하 는 것 이 아니 라 직렬 화 합 니 다.아래 의 예 를 참고 하 시 오.
const user = {
firstName : "Prateek",
lastName : "Singh",
age : 26,
toJSON() {
return {
fullName: `${this.firstName} + ${this.lastName}`
};
}
}
console.log(JSON.stringify(user));
//
// "{ "fullName" : "Prateek Singh"}"
전체 대상 을 인쇄 하 는 것 이 아니 라 toJSON 함수 의 결과 만 인쇄 하 는 것 을 볼 수 있 습 니 다.나 는 네가 stringify()의 기본 적 인 특징 을 배 울 수 있 기 를 바란다.
JSON.stringify()의 5 가지 비밀 특성 에 대한 자세 한 설명 은 여기까지 입 니 다.JSON.stringify()특성 에 관 한 내용 은 예전 의 글 을 검색 하거나 아래 의 관련 글 을 계속 찾 아 보 세 요.앞으로 많은 응원 부 탁 드 리 겠 습 니 다!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
TypeScript3.7에서 주목해야 할 3가지 새로운 기능3.7에 포함된 새로운 특성은 사실 이전 몇 번의release와 비교하면 비교적 작은 발표 버전이라고 할 수 있지만 그 안에 포함된 몇 가지 특성은 코드의 품질 자체에 현저한 향상을 가져올 수 있다. 등가: 만약 다...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.