美文网首页深入解读JavaScript
JSON.stringify()不为人所知的功能

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

作者: 悟C | 来源:发表于2018-07-21 21:07 被阅读6次

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

    相关文章

      网友评论

        本文标题:JSON.stringify()不为人所知的功能

        本文链接:https://www.haomeiwen.com/subject/ezckmftx.html