JSON.stringify & JSON.parse 簡析

以前用到JSON的場景也不少，但是沒有仔細的研究過，這幾天趁著一個需求用到了，就整理了一下相關用法，

一、 JSON.stringify()

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

2. 先說一下后面兩個可選引數

   space：是指定縮進用的空白字串，用于美化輸出，可以是數字或字串，

 1 const data =https://www.cnblogs.com/isnan/p/ {
 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 =https://www.cnblogs.com/isnan/p/ {
 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 =https://www.cnblogs.com/isnan/p/ {
 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 =https://www.cnblogs.com/isnan/p/=='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 =https://www.cnblogs.com/isnan/p/ {
 2   name: undefined,
 3   age: 18,
 4   type: null,
 5   fn: ()=>{
 6     return 999;
 7   }
 8 };
 9 let rep = (key, value) => {
10     if (value =https://www.cnblogs.com/isnan/p/== undefined) {
11         return null;
12     }
13     if (typeof value =https://www.cnblogs.com/isnan/p/=='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=https://www.cnblogs.com/isnan/p/{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 =https://www.cnblogs.com/isnan/p/=='symbol') return 'symbol'; //只有在這里指定才能回傳結果
10     return value;
11 });
12 //{"name":"aaa","symbol":"symbol"}

　　如果value 為Symbol，可以通過第二個引數來轉換；但是key為Symbol的話，遍歷的時候是無法遍歷到的，就無法回傳，類似于不可列舉型別：

 1 let data = https://www.cnblogs.com/isnan/p/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 =https://www.cnblogs.com/isnan/p/ {
 2   name: undefined,
 3   age: 18,
 4   type: null,
 5   fn: () => {
 6     return 999;
 7   }
 8 };
 9 let rep = (key, value) => {
10     if (value =https://www.cnblogs.com/isnan/p/== undefined) {
11         return null;
12     }
13     if (typeof value =https://www.cnblogs.com/isnan/p/=='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 =https://www.cnblogs.com/isnan/p/ {
 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

標籤：JavaScript

上一篇：JS常見的API擴展形式（prototype、jquery、vue插件封裝）以及怎樣設計出易擴展的表單驗證功能？

下一篇：Web前端基礎(12):JavaScript(六)