深入解读JavaScript

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

2018-07-21  本文已影响6人  悟C

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()在对象中遇到undefinedfunctionsymbol时会自动将其忽略,在数组中则会返回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()还接收两个可选择的参数replacerspace,先来看一个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]}
  1. 如果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"
--}
}
上一篇 下一篇

猜你喜欢

热点阅读