詳說JSON.stringify()與JSON.parse()

1、JSON

JSON是一個輕量級的數據格式，能夠簡化表示複雜數據結構的工做量，它不支持變量、函數或者對象實例，JSON字符串必須使用雙引號（單引號會致使語法錯誤）；在手工編寫JSON時，JSON對象中的屬性名任什麼時候候都必須加雙引號。JSON是ECMAScript5定義的對象，有兩個方法：SON.stringify()和JSON.parse()。

2、JSON.stringify()

• 功能：把JavaScript對象序列化爲JSON字符串

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

  • value：將要序列化爲JSON字符串的值
  • replacer：可選|過濾器參數。（參數可能爲數組，函數或null）
    • 數組：只有包含在這個數組中的屬性名，纔會顯示；
    • 函數：傳入的函數接收兩個參數，屬性名和屬性值；
    • 沒有提供/null：則不過濾，屬性所有顯示；

• space：可選|控制結果中的縮進和空白符。用於美化輸出。（參數可能爲數字、字符串、沒有提供或爲null）

  • 數字：上線爲10，大於10則轉換爲10，小於1則沒有空格；字符串：
  • 字符串長度最長不超過10個，大於10則取前10，替代空格顯示；
  • 沒有提供/null：沒有空格；

  例子：

使用JSON.stringify()

JSON.stringify({});                        // '{}'
  JSON.stringify(true);                      // 'true'
  JSON.stringify("foo");                     // '"foo"'
 JSON.stringify([1, "false", false]);       // '[1,"false",false]'
  JSON.stringify({ x: 5 });                  // '{"x":5}'
 JSON.stringify({x: 5, y: 6});              // "{"x":5,"y":6}"複製代碼
複製代碼

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參數爲數組

var obj = {"age": 19, "name": "千鈞", "functionName": "test", "address": "china"}; JSON.stringify(obj, ['age', 'name']); // "{"age":19,"name":"千鈞"}"

space參數

var obj = {"age": 19, "name": "千鈞", "functionName":    "test", "address": "china"};
    JSON.stringify(obj, null, 2)
複製代碼

執行結果以下所示：

3、JSON.parse()

• 功能：把JSON字符串解析爲原生JavaScript對象
• 語法：JSON.parse(text[, reviver])
  • text：要被解析爲JavaScript對象的字符串
  • reviver：可選|函數，將在每一個鍵值對上調用，用來修改解析生成的原始值，在parse返回以前調用。

**注意：**若傳入的字符串不符合 JSON 規範，則會拋出 SyntaxError 異常。

例子：

使用JSON.parse()

JSON.parse('{}');              // {}
JSON.parse('true');            // true
JSON.parse('"foo"');           // "foo"
JSON.parse('[1, 5, "false"]'); // [1, 5, "false"]
JSON.parse('null');            // null
複製代碼

使用reviver函數

JSON.parse('{"p": 5}', function (k, v) {
if(k === '') return v;     // 若是到了最頂層，則直接返回屬性值，
return v * 2;              // 不然將屬性值變爲原來的 2 倍。
});   
複製代碼

JSON.parse()不容許對解析的原JavaScript對象出現以逗號結尾

JSON.parse('[1,3,4,]')
JSON.parse('{a:1,}')
複製代碼

報錯以下：

4、兼容性

經過www.caniuse.com/網站能夠查看JSON.stringify()和JSON.parse()的瀏覽器支持的兼容性；

JSON.stringify()的兼容性

JSON.parse()的兼容性