JSON.stringify & JSON.parse 简析

以前用到JSON的场景也不少，但是没有仔细的研究过，这几天趁着一个需求用到了，就整理了一下相关用法。

一、 JSON.stringify()

1. 语法  JSON.stringify(value[, replacer [, space]])

2. 先说一下后面两个可选参数

space：是指定缩进用的空白字符串，用于美化输出，可以是数字或字符串。

 const data = {
   a: 'bang',
   b: null,
   c: {
     x: 'xxx',
     y: 'yyy',
     z: 90
   },
   d: 9527
 }
 JSON.stringify(data, null, 4)
 // {
 //   "a": "bang",
 //   "b": null,
 //   "c": {
 //       "x": "xxx",
 //       "y": "yyy",
 //       "z": 90
 //   },
 //   "d": 9527
 // }
 JSON.stringify(data, null, '-')
 // {
 // -"a": "bang",
 // -"b": null,
 // -"c": {
 // --"x": "xxx",
 // --"y": "yyy",
 // --"z": 90
 // -},
 // -"d": 9527
 // }

replacer：转化规则，可以是一个函数或数组。

 // 1. 数组
 const data = {
   a: 'haha',
   b: 123,
   c: {
     d: 8080,
     e: null
   }
 };
 JSON.stringify(data, ['b', 'd'])
 // {"b":123}
 JSON.stringify(data, ['a', 'c'])
 // {"a":"haha","c":{}}
 JSON.stringify(data, ['a', 'c', 'e'])
 // {"a":"haha","c":{"e":null}}

 // 2. 函数
 const data = {
   a: 'haha',
   b: 123,
   c: {
     b: '123',
     d: 8080,
     e: null
   }
 };
 function rep (key, value) {
   if (key === 'b' && typeof value === 'number') return ++value;
   return value;
 }
 JSON.stringify(data, rep)
 // {"a":"haha","b":124,"c":{"b":"123","d":8080,"e":null}}

3. value

将要序列化成 一个 JSON 字符串的值。这里面有一些类型是不能够转化的，undefined/function/symbol

　 1). undefined

JSON.stringify遇到undefined时，是无法被返回的，但是null是可以的，所以我在这里的处理是把undefined 转化成null

这么做的理由是因为 undefined == null //true , 这样处理后的数据是不影响做模糊判断的。

2). function

同样是无法被返回的一种类型，我的处理是转成string类型存储，这么做产生的一个问题是 JSON.parse时需要再转成function

 let data = {
   name: undefined,
   age: 18,
   type: null,
   fn: ()=>{
     return 999;
   }
 };
 let rep = (key, value) => {
     if (value === undefined) {
         return null;
     }
     if (typeof value === 'function') {
         return Function.prototype.toString.call(value);
     }
     return value;
 }
 JSON.stringify(data, rep)
 //{"name":null,"age":18,"type":null,"fn":"()=>{\n    return 999;\n  }"}

3). symbol

es6新增的一种数据类型，具体留到另一篇文章里说。这里还是说JSON的问题。

 // 当value是Symbol 时，能被第二个参数指定，若不指定则无法返回
 // 当key是Symbol 时，会被忽略，第二个参数无法指定
 let data={name: 'aaa', symbol: Symbol()};
 data[Symbol()] = 'bbb';
 JSON.stringify(data,(key,value)=>{
     console.log(key,value);
     // name aaa
     // symbol Symbol()
     if (typeof value === 'symbol') return 'symbol'; //只有在这里指定才能返回结果
     return value;
 });
 //{"name":"aaa","symbol":"symbol"}

　　如果value 为Symbol，可以通过第二个参数来转换；但是key为Symbol的话，遍历的时候是无法遍历到的，就无法返回，类似于不可枚举类型：

 let data = Object.create(null, {
   name: {
     value: 'aaa',
     enumerable: true
   },
   age: {
     value: 18,
     enumerable: false
   }
 });
 let a = JSON.stringify(data, (key, value) => {
   console.log(key, value);
   //name aaa
   return value;
 })
 console.log(a);
 //{"name":"aaa"}

二、JSON.parse()

1. 语法：  JSON.parse(text[, reviver])

2. 参数：reviver 转换器, 如果传入该参数(函数)，可以用来修改解析生成的原始值，调用时机在parse函数返回之前。

 let data = {
   name: undefined,
   age: 18,
   type: null,
   fn: () => {
     return 999;
   }
 };
 let rep = (key, value) => {
     if (value === undefined) {
         return null;
     }
     if (typeof value === 'function') {
         return Function.prototype.toString.call(value);
     }
     return value;
 }
 let jsonS = JSON.stringify(data, rep);
 //{"name":null,"age":18,"type":null,"fn":"()=>{\n    return 999;\n  }"}
 let jsonR = JSON.parse(jsonS, (key, value)=>{
   if (key) {
     // return eval('('+value+')');
     return new Function('return '+value)()
   }
   return value;
 });
 console.log(jsonR, jsonR.fn());
 // { name: null, age: 18, type: null, fn: [Function] }
 //

对于reviver 函数的处理用了eval 和 new Function 两种方式，因为eval的安全性问题，并不推荐使用，优先使用后一种方式。

三、toJSON

如果有toJSON，执行 .stringify时会先执行这个方法，再执行第二个参数

toJSON 是一个覆盖函数，要慎重使用。

 let data = {
   name: 'nan',
   age: 18,
   toJSON: function () {
     console.log('to');
     return this.name;
   }
 };
 JSON.stringify(data, (key,value)=>{
   console.log('rep');
   return value;
 });
 // to
 // rep
 // "nan"

总结：若希望用到JSON，对象中尽量只存储基础数据类型，不要出现以上几种对于数据化不友好的类型。

*** MDN文档   https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify