詳說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()的兼容性

小結

在開發中常使用JSON這一塊，因此就將其整理一下，同時更加方便查閱；不足之處望指正！

ps：會持續更新