JSON.stringify()不为人所知的功能

JSON.stringify(...)是将JSON对象序列化为字符串，先看一下JSON.stringify的基本使用方式：

var car = {
  name: '小喵',
  age: 20,
  gender: undefined,
  say: function(){},
  other: Symbol('hello')
}

var str = JSON.stringify(car);

console.log(str) 
//=> {"name":"小喵","age":20}

console.log(JSON.stringify([1, undefined, function(){}, 4, Symbol('world')]))
//=> [1,null,null,4,null]

JSON.stringify()在对象中遇到undefined、function、symbol时会自动将其忽略，在数组中则会返回null(以保证单元位置不变)。

我们再来看一个JSON.stringify()的使用：

var a = {}

var b = {
  a: a
}
a.b = b

console.log(JSON.stringify(a))
//=> TypeError: Converting circular structure to JSON

在上面的例子中，我们看到了对循环引用的对象进行JSON.stringify会出错。

如上所示，我们对非法的JSON值的对象进行字符串化就会出错，那如果还是希望得到一个安全的JSON值要怎么办呢？

答案是：给a对象定义的一个toJSON()方法，JSON字符串化时会首先调用toJSON()方法，然后用它的返回来进行序列化。

var a = {}

var b = {
  a: a
}
a.b = b

a.toJSON = function() {
  return {'自定义': '返回安全的JSON值'}
}

console.log(JSON.stringify(a))
//=> {"自定义":"返回安全的JSON值"}

⚠️注意：应该让toJSON方法返回一个JSON值，因为字符串化是根据toJSON()返回值进行序列化

下面进入主题，说说JSON.stringify()一些不为人所知的功能：JSON.stringify()还接收两个可选择的参数replacer、space，先来看一个replacer：

可选参数：replacer (可以是数组或者函数)

下面用一个例子，看看接收数组或者函数的效果:

var a = {
  b: 42,
  c: '42',
  d: [1,2,3]
}

var result_1 = JSON.stringify(a, ['b', 'c'])

var result_2 = JSON.stringify(a, (k, v) => {
  if (k !== 'c' && k !== 'b') return v;
})

console.log(result_1, result_2)
//=>{"b":42,"c":"42"} {"d":[1,2,3]}

如果replacer是一个数组，那么它必须是一个字符串，其中包含序列化要处理的对象的属性名称，除此之外其他的属性则被忽略
2）如果replacer是一个函数，它会对对象本身调用一次，然后对对象中的每个属性各调用一次，每次传递两个参数，键和值。如果要忽略某个键就返回undefined，否则返回指定的值。

可选参数：space

这个参数是用来指定输出的缩进格式，如果space为整数时是每一级缩进的字符数，如果是字符就用该字符替代每一级缩进的空格数，还是看看例子比较直观:

var car = {
  name: 'hi',
  test: {
    name: 'hello'
  }
}

var str_1 = JSON.stringify(car, null, 3);
var str_2 = JSON.stringify(car, null, '--');
console.log(str_1)
{
  "name": "hi",
  "test": {
    "name": "hello"
  }
}
console.log(str_2)
{
--"name": "hi",
--"test": {
----"name": "hello"
--}
}

JSON.stringify()不为人所知的功能

可选参数：replacer (可以是数组或者函数)

可选参数：space

推荐阅读更多精彩内容