JSON.stringify의 잘 알려지지 않은 용도

JS에는 매일 사용할 수 있는 공통 기능이 많이 있지만 추가 기능 중 일부는 모릅니다. JSON.stringify가 바로 그러한 함수입니다. 오늘은 그 특별한 사용법을 살펴보겠습니다. JSON.stringify 就是这样的一个函数，今天就来看下它的特殊用法。

基础

JSON.stringify 方法接收一个变量，并将它转换成 JSON 表示形式。

const boy = { 
  name: 'John', 
  age: 23 
};

JSON.stringify(boy);
// {"name":"John","age":23}

JSON 就是纯字符串，它本质上是 JS 的一个子集，所以并不是所有的 JS 对象都能转换为 JSON：

const boy = { 
  name: 'John', 
  age: 23,
  hobbies: new Map([[0, 'coding'], [1, 'earn money']])
}

JSON.stringify(boy)
// {"name":"John","age":23,"hobbies":{}}

上面的例子中 Map 对象就会被忽略并转换为普通对象。而如果属性是函数的话则这个属性就会被忽略，感兴趣的同学可以试下。

第二个参数

JSON.stringify 可以接收第二个参数，可以称为 replacer 替换器。

你可以传入一个字符串数组，这个数组中具有的属性才会被转换，就像一个白名单。

const boy = { 
  name: 'John', 
  age: 23
}

JSON.stringify(boy, ['name'])
// {"name":"John"}

我们可以利用这个特性，只转换需要转换的属性，过滤掉如很长的数组、错误对象等。

这个 replacer 参数还可以接收一个函数。这个函数会遍历整个对象，并将键和值传入，让你决定该如何替换它们。

const boy = { 
  name: 'John', 
  age: 23,
  hobbies: new Map([[0, 'coding'], [1, 'earn money']])
}

JSON.stringify(boy, (key, value) => {
  if (value instanceof Map) {
    return [...value.values()]
  }
  return value
})
// {"name":"John","age":23,"hobbies":["coding","earn money"]}

而如果你返回了 undefined (返回 null 不行)，就将这个属性移除了：

JSON.stringify(boy, (key, value) => {
  if (typeof value === 'string') {
    return undefined
  }
  return value
})
// {"age":23,"hobbies":{}}

第三个参数

第三个参数 space 控制了转换后的 JSON 串的间距。

如果参数是数字，则以该数字个数的空格进行缩进：

JSON.stringify(boy, null, 2)
// {
//   "name": "John",
//   "age": 23,
//   "hobbies": {}
// }

而如果参数是字符串，则以该字符串进行缩进：

JSON.stringify(boy, null, '--')
// {
//   --"name": "John",
//   --"age": 23,
//   --"hobbies": {}
// }

toJSON 方法

如果我们要转换的对象具有一个 toJSON

기본 JSON.stringify 메서드는 변수를 가져와 이를 JSON 표현으로 변환합니다.

const boy = { 
  name: 'John', 
  age: 23,
  hobbies: new Map([[0, 'coding'], [1, 'earn money']]),
  toJSON() {
    return {
      name: `${this.name} (${this.age})`,
      favorite: this.hobbies.get(0)
    }
  }
}

JSON.stringify(boy)
// {"name":"John (23)","favorite":"coding"}

JSON은 기본적으로 JS의 하위 집합인 순수 문자열이므로 모든 JS 객체를 JSON으로 변환할 수 있는 것은 아닙니다.
• rrreee

  위 예에서 Map 객체는 무시되고 일반 객체로 변환됩니다. 속성이 함수인 경우 이 속성은 무시됩니다. 관심 있는 학생은 시도해 볼 수 있습니다.

• 두 번째 매개변수

JSON.stringify는 replacer 대체자라고 부를 수 있는 두 번째 매개변수를 받을 수 있습니다. 문자열 배열을 전달할 수 있으며, 이 배열의 속성만 화이트리스트처럼 변환됩니다.

rrreee🎜이 기능을 사용하면 변환해야 하는 속성만 변환하고 긴 배열, 오류 개체 등을 필터링할 수 있습니다. 🎜🎜이 replacer 매개변수도 함수를 받을 수 있습니다. 이 함수는 전체 개체를 반복하여 키와 값을 전달하고 이를 바꾸는 방법을 결정할 수 있도록 합니다. 🎜rrreee🎜undefine을 반환하는 경우(null 반환은 허용되지 않음) 다음 속성을 제거하세요. 🎜rrreee🎜🎜🎜세 번째 매개변수🎜🎜🎜🎜 세 번째 매개변수 space는 변환된 JSON 문자열의 간격을 제어합니다. if 변환하려는 객체에 toJSON 메서드가 있으므로 직렬화 프로세스를 사용자 정의할 수 있습니다. 객체를 직렬화하는 대신 메서드에서 새 값을 반환할 수 있으며, 이 값은 원래 객체 대신 직렬화됩니다. 🎜rrreee🎜재미있지 않나요? 때로는 문서를 주의 깊게 읽어보는 것도 도움이 됩니다~🎜🎜🎜🎜참고 기사🎜🎜🎜🎜🎜🎜원본 주소: https://mp.weixin.qq.com/s/_e83_G7RjVt2eR_ro7blOA🎜🎜🎜🎜MDN: https:/ / developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify🎜🎜🎜🎜이 기사는 🎜js tutorial🎜 칼럼에서 가져온 것입니다. 배우신 것을 환영합니다! 🎜

위 내용은 JSON.stringify의 잘 알려지지 않은 용도의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!