당신은 JSON.stringfy 사용량을 알 수 없습니다

사설

JSON.stringfy()그것은으로 자바 스크립트 객체 인 JSON의 형식으로 문자열을 표준 방법 . 그 내부의 많은 자바 스크립트 프레임 워크가 사용됩니다 JSON.stringify(): 익스프레스 의 res.json(), Axios의 의 post, 그리고 웹팩 통계 , 그들이이라고 JSON.stringify()하고, 오류의 경우를 포함한다.

시작하기 간단합니다

모든 현대적인 자바 스크립트를 지원 런타임은 JSON.stringify(), 심지어 IE8은 그것을 지원합니다. 다음은로 간단한 개체입니다 JSON예 :

const obj = { answer: 42 };

const str = JSON.stringify(obj);
str; // '{"answer":42}'
typeof str; // 'string'

당신은 종종 볼 수 있습니다 JSON.stringify()및 JSON.parse()이 모델이 달성 한, 다음 코드처럼 장면의 사용과 함께 깊은 복사 하는 방법 중 하나를 :

const obj = { answer: 42 };
const clone = JSON.parse(JSON.stringify(obj));

clone.answer; // 42
clone === obj; // false

오류 및 가장자리의 경우

JSON.stringify()순환 참조 변환 객체의 존재 던져 것이다 오류 . 더 간단히 말하면, 그것은 객체 자체를 가리키는 속성이있는 경우,이다 JSON.stringify()과 같은 오류가 발생합니다 :

const obj = {};
// 存在循环引用的对象，它指向它本身
obj.prop = obj;

// 会抛出 "TypeError: TypeError: Converting circular structure to JSON" 异常
JSON.stringify(obj);

입니다 JSON.stringify()당신이하지 않는 사용자 정의 선언, 경우에만 예외가 발생합니다 toJSON()방법이나 replacer기능을. 그럼에도 불구하고, 당신은 아직도해야 JSON.stringify()에 포함 try/catch순환 참조가 실제로는 매우 일반적이기 때문에 문.

한편, 다음의 예와 경계의 일부, JSON.stringify()그리고 오류가 발생하지 않습니다,하지만 당신은 예상 할 수 있지만, 오류가 발생합니다. 예를 들어, JSON.stringify()그것은 것입니다 NaN및 Infinity변환 null:

const obj = { nan: parseInt('not a number'), inf: Number.POSITIVE_INFINITY };

JSON.stringify(obj); // '{"nan":null,"inf":null}'

JSON.stringify()이 값은 직접 생략되고 functions그리고 undefined다음과 같은 성질 :

const obj = { fn: function() {}, undef: undefined };

// 它会返回空对象
JSON.stringify(obj); // '{}'

체재

JSON.stringify()첫번째 파라미터로 순서 인 JSON오브젝트. JSON.stringify()사실이 세 가지 매개 변수를 사용하고, 세 번째 인수가 호출됩니다 spaces. spaces매개 변수는 형식의 가독성 향상 접근 방식을 채택하여 사용되는 JSON문자열입니다.

당신은 유형 전달할 수 있습니다 string또는 매개 변수를. 경우 이며 , 이는 권리 등의 오목 공간을 증가시키는 동안, 각 키에 대한 별도의 라인에 배치 될 것이다 :numberspacesspacesundefinedJSON.stringify()

const obj = { a: 1, b: 2, c: 3, d: { e: 4 } };

// '{"a":1,"b":2,"c":3,"d":{"e":4}}'
JSON.stringify(obj);

// {
//   "a": 1,
//   "b": 2,
//   "c": 3,
//   "d": {
//     "e": 4
//   }
// }
JSON.stringify(obj, null, '  ');

// 数字 2 会达到和上面一样的效果，它代表空格的个数
JSON.stringify(obj, null, 2);

spaces 우리가 일반적으로는 밑줄이 할 수있는 공간을 사용하는 것이 있지만, 문자열, 공백이없는 :

// {
// __"a": 1,
// __"b": 2,
// __"c": 3,
// __"d": {
// ____"e": 4
// __}
// }
JSON.stringify(obj, null, '__');

대체물

JSON.stringify()두 번째 파라미터는 replacer함수. 상기 예에서는 동일하다 null. 자바 스크립트 객체의 각 호에 대한 키 - 값 쌍에있는 replacer기능을하고, 그 반환 값은 같은 포맷 후의 값으로 사용한다 :

const obj = { a: 1, b: 2, c: 3, d: { e: 4 } };

// 使每个属性的值递增 1
// '{"a":2,"b":3,"c":4,"d":{"e":5}}'
JSON.stringify(obj, function replacer(key, value) {
  if (typeof value === 'number') {
    return value + 1;
  }
  return value;
});

replacer기능 민감한 데이터가 생략되는 경우, 매우 유용하다. 모든 포함 생략한다고 가정 password속성 :

const obj = {
  name: 'Jean-Luc Picard',
  password: 'stargazer',
  nested: {
    hashedPassword: 'c3RhcmdhemVy'
  }
};

// '{"name":"Jean-Luc Picard","nested":{}}'
JSON.stringify(obj, function replacer(key, value) {
  // 这个函数会被调用 5 次，这里的 key 依次为：
  // '', 'name', 'password', 'nested', 'hashedPassword'
  if (key.match(/password/i)) {
    return undefined;
  }
  return value;
});

`toJSON` 방법

JSON.stringify()동시에 객체를 순회하는 방법은, 가진 사람에 초점을 맞출 것이다 toJSON()속성 방법. 그것을 발견하면 toJSON()방법을 JSON.stringify()다음과 같은, 포맷 한 후 반환 값의 값을 대체 할 것이다, 그것을 호출

const obj = {
  name: 'Jean-Luc Picard',
  nested: {
    test: 'not in output',
    toJSON: () => 'test'
  }
};

// '{"name":"Jean-Luc Picard","nested":"test"}'
JSON.stringify(obj);

toJSON()상기 방법은 상기 오브젝트, 기재의 유형, 또는 포함하는 임의의 값을 반환 할 수있다 undefined. 당신이 경우 toJSON()반환 undefined, JSON.stringify()당신은이 속성을 무시합니다.

많은 자바 스크립트 모듈은 toJSON()복잡한 같은 객체의 순서의 정확성 보장 Mongoose documents및 Moment객체 .

최종적으로

JSON.stringify()자바 스크립트는 기본적인 접근 방식의 핵심입니다. 많은 라이브러리와 프레임 워크 따라서, 깊이있는 그것의 이해, 당신은 당신의 마음에 드는보다 효율적으로 사용 할 수 있습니다, 그 내부에서 사용할 npm모듈을. 예를 들어, 당신은에있는 익스프레스 REST API를 사용하여 toJSON네이티브 포맷하는 방법 Date유형, 또는 Axios의, 제대로 개체가 HTTP를 통해 순환 참조 요청을 포함 전송하는 것이 가능하다.

원본 링크 : http://thecodebarbarian.com/the-80-20-guide-to-json-stringify-in-javascript.html

HTTPS : //www.jianshu.com/p/8c29f32dee07 재현