你可能不知道的 JSON.stringify 用法

JS 中有许多常见的函数，咱们可能天天都在使用它们，可是殊不知道它们的一些额外功能。JSON.stringify 就是这样的一个函数，今天就来看下它的特殊用法。json

基础

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 对象就会被忽略并转换为普通对象。而若是属性是函数的话则这个属性就会被忽略，感兴趣的同窗能够试下。this

第二个参数

JSON.stringify 能够接收第二个参数，能够称为 replacer 替换器。spa

你能够传入一个字符串数组，这个数组中具备的属性才会被转换，就像一个白名单。翻译

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

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

咱们能够利用这个特性，只转换须要转换的属性，过滤掉如很长的数组、错误对象等。code

这个 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 不行)，就将这个属性移除了：blog

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

第三个参数

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

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

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

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

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

toJSON 方法

若是咱们要转换的对象具备一个 toJSON 方法，那么就能够定制本身被序列化的过程。你甚至能够返回一个新的对象。

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"}

是否是颇有趣？有时候仔细看一些文档仍是颇有用的~

参考文章

• 原文连接
• MDN

欢迎关注个人公众号：码力全开（codingonfire）

每周更新一篇原创或翻译文章~