JSON.stringify & JSON.parse 简析

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

一、 JSON.stringify()

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

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

 

   space:是指定缩进用的空白字符串,用于美化输出,可以是数字字符串

 1 const data = {
 2   a: 'bang',
 3   b: null,
 4   c: {
 5     x: 'xxx',
 6     y: 'yyy',
 7     z: 90
 8   },
 9   d: 9527
10 }
11 JSON.stringify(data, null, 4)
12 // {
13 //   "a": "bang",
14 //   "b": null,
15 //   "c": {
16 //       "x": "xxx",
17 //       "y": "yyy",
18 //       "z": 90
19 //   },
20 //   "d": 9527
21 // }
22 JSON.stringify(data, null, '-')
23 // {
24 // -"a": "bang",
25 // -"b": null,
26 // -"c": {
27 // --"x": "xxx",
28 // --"y": "yyy",
29 // --"z": 90
30 // -},
31 // -"d": 9527
32 // }

   replacer:转化规则,可以是一个函数数组

 1 // 1. 数组
 2 const data = {
 3   a: 'haha',
 4   b: 123,
 5   c: {
 6     d: 8080,
 7     e: null
 8   }
 9 };
10 JSON.stringify(data, ['b', 'd'])
11 // {"b":123}
12 JSON.stringify(data, ['a', 'c'])
13 // {"a":"haha","c":{}}
14 JSON.stringify(data, ['a', 'c', 'e'])
15 // {"a":"haha","c":{"e":null}}
 1 // 2. 函数
 2 const data = {
 3   a: 'haha',
 4   b: 123,
 5   c: {
 6     b: '123',
 7     d: 8080,
 8     e: null
 9   }
10 };
11 function rep (key, value) {
12   if (key === 'b' && typeof value === 'number') return ++value;
13   return value;
14 }
15 JSON.stringify(data, rep)
16 // {"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

 1 let data = {
 2   name: undefined,
 3   age: 18,
 4   type: null,
 5   fn: ()=>{
 6     return 999;
 7   }
 8 };
 9 let rep = (key, value) => {
10     if (value === undefined) {
11         return null;
12     }
13     if (typeof value === 'function') {
14         return Function.prototype.toString.call(value);
15     }
16     return value;
17 }
18 JSON.stringify(data, rep)
19 //{"name":null,"age":18,"type":null,"fn":"()=>{\n    return 999;\n  }"}

    3). symbol

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

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

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

 1 let data = Object.create(null, {
 2   name: {
 3     value: 'aaa',
 4     enumerable: true
 5   },
 6   age: {
 7     value: 18,
 8     enumerable: false
 9   }
10 });
11 let a = JSON.stringify(data, (key, value) => {
12   console.log(key, value);
13   //name aaa
14   return value;
15 })
16 console.log(a);
17 //{"name":"aaa"}

 

二、JSON.parse()

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

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

 1 let data = {
 2   name: undefined,
 3   age: 18,
 4   type: null,
 5   fn: () => {
 6     return 999;
 7   }
 8 };
 9 let rep = (key, value) => {
10     if (value === undefined) {
11         return null;
12     }
13     if (typeof value === 'function') {
14         return Function.prototype.toString.call(value);
15     }
16     return value;
17 }
18 let jsonS = JSON.stringify(data, rep);
19 //{"name":null,"age":18,"type":null,"fn":"()=>{\n    return 999;\n  }"}
20 let jsonR = JSON.parse(jsonS, (key, value)=>{
21   if (key) {
22     // return eval('('+value+')');
23     return new Function('return '+value)()
24   }
25   return value;
26 });
27 console.log(jsonR, jsonR.fn());
28 // { name: null, age: 18, type: null, fn: [Function] }
29 // 999

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

三、toJSON

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

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

 1 let data = {
 2   name: 'nan',
 3   age: 18,
 4   toJSON: function () {
 5     console.log('to');
 6     return this.name;
 7   }
 8 };
 9 JSON.stringify(data, (key,value)=>{
10   console.log('rep');
11   return value;
12 });
13 // to
14 // rep
15 // "nan"

 

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

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

posted @ 2019-11-18 16:38  三行代码走天下  阅读(...)  评论(... 编辑 收藏