【JS】详谈JSON.stringify()

[fayeah]

JSON.stringify()是将Object转换成为JSON形式的函数，用起来也最直接，比如

JSON.stringify({'key': 'value'})

便可以直接转换为'{"key":"value"}'。这是我们常用的方式，但是它有更多的用法和要注意的事项，一起来看一下。

JSON.stringify()可以转换哪些数据类型：

• Boolean, Number和String

  // 结果是什么？
  JSON.stringify({'key1': new Boolean(true), 'key2': new Number(1), 'key3': new String('str')})

  为了符合传统的语义转换，Boolean, Number, 和 String 在stringify的时候都会转换为原始值，所以结果为： '{"key1":true,"key2":1,"key3":"str"}'

• undefined, Function, 和 Symbols不是有效的JSON值
  1. 如果在Object里面：JSON.stringify({ x: undefined, y: function(){}, z: Symbol('') })，则会直接omit掉，返回'{}';
  2. 如果在array里面：JSON.stringify({ x: [10, undefined, function(){}, Symbol('')] })，则返回null，结果为：'{"x":[10,null,null,null]}'
• JSON.stringify(new Date(2020, 8, 12, 08, 13, 5))会返回什么，如果单纯运行new Date(2020, 8, 12, 08, 13, 5)，结果是类似这样的格式：Sat Sep 12 2020 08:13:05 GMT+0800 (China Standard Time)，但是实际上结果是:

  '2020-09-12T00:13:05.000Z'

  这是因为stringify在转换日期的实现是date.toISOString()

• Infinity, NAN和null,都会被认为是null
• 其他Object，Map,Set,WeakMap,WeakSet，只会有他们enumberably的属性。

  JSON.stringify([new Set([1]), new Map([[1, 2]]), new WeakSet([{a: 1}]), new WeakMap([[{a: 1}, 2]])])

  结果为：'[{},{},{},{}]'

• TypeError for BigInt and cyclic object
  1. BigInt: JSON.stringify({x: 2n}); //TypeError: BigInt value can't be serialized in JSON
  2. 循环引用:

     const circularReference = {};
     circularReference.myself = circularReference;
     // Serializing circular references throws "TypeError: cyclic object value"
     JSON.stringify(circularReference);

JSON.stringify()的replacer参数

• JSON.stringify()是可以接受第二个参数的，那第二个参数可以是一个函数也可以是一个array

• 当replacer参数是函数：

  function replacer(key, value) {
    if (typeof value === 'string') {
      return undefined;
    }
    return value;
  }
  
  var foo = {foundation: 'Mozilla', model: 'box', week: 45, transport: 'car', month: 7};
  JSON.stringify(foo, replacer);

  这个replacer函数会将string类型的值，那么就返回undefined，从上面我们可以了解到，如果object中有undefined, Function, 和 Symbol，那么stringify会直接omit掉，也就是移除掉，所以返回结果是：'{"week":45,"month":7}'`

• 当replacer是array：JSON.stringify(foo, ['week', 'month'])，array是说只返回object中包含在array中的这些属性，所以结果为：'{"week":45,"month":7}'

JSON.stringify()的space参数

• JSON.stringify()的第三个参数是space参数，那么它可以是number，也可以是string

• 当space是number，会以该数量的空格格式化该string：

  JSON.stringify({ a: 2 }, null, 1);

  结果为： '{ "a": 2 }' 当第三个参数更大一些：

  JSON.stringify({ a:{b: 3} }, null, 6);

  结果为： '{ "a": { "b": 3 } }' 但是number最大值为10.

• 当space为string：

  // 一个空格，与当它是1的时候等价
  JSON.stringify({ a: 2 }, null, ' ');

  结果为： '{ "a": 2 }' 使用tab： JSON.stringify({ uno: 1, dos: 2 }, null, '\t'),结果为： '{ "uno": 1, "dos": 2 }'

符合语法规则的JSON.stringify()

像unicode这些在转换的时候似乎已然会打印出不太友好的text，JSON.stringify("\uD800"), '�'，但有了well-formed的实现，就可以得到相应的转义序列：现在的返回结果是'\\ud800'，但目前还不支持IE。

自定义toJSON，我们可以定义toJSON，来改变stringily的行为：

var obj = {
    data: 'data',

    toJSON (key) {
        if (key)
            return `Now I am a nested object under key '${key}'`;
        else
            return this;
    }
}

有了这样的一个object，那么JSON.stringify(obj);, JSON.stringify({ obj });和JSON.stringify([ obj ]);的结果分别是：

JSON.stringify(obj);
// '{"data":"data"}'

JSON.stringify({ obj }); // Shorthand property names (ES2015).
// '{"obj":"Now I am a nested object under key 'obj'"}'

JSON.stringify([ obj ]);
// '["Now I am a nested object under key '0'"]'