深入了解 JSON

我們先來看一個js中常見的js對象序列化成JSON字元串的問題，請問，以下JS對象通過JSON.stringify後的字元串是怎樣的？先不要急着複制粘貼到控制台，先自己打開一個代碼編輯器或者紙，寫寫看，寫完再去仔細對比你的控制台輸出，如果有誤記得看完全文并評論，哈哈。

var friend={  
    firstName: 'Good',
    'lastName': 'Man',
    'address': undefined,
    'phone': ["1234567",undefined],
    'fullName': function(){
        return this.firstName + ' ' + this.lastName;
    }
};

JSON.stringify(friend);//這一行傳回什麼呢？

第二個問題，如果我想在最終JSON字元串将這個’friend’的姓名全部變成大寫字母，也就是把”Good”變成”GOOD”，把”Man”變成”MAN”，那麼可以怎麼做？

基于以上兩個問題，我們再追本溯源問一下，JSON究竟是什麼東西？為什麼JSON就是易于資料交換？JSON和JS對象的差別？JS中JSON.parse、JSON.stringify和不常見的toJSON，這幾個函數的參數和處理細節到底是怎樣的？

歡迎進入本次“深挖JSON之旅”，下文将從以下幾個方面去了解JSON：

首先是對“JSON是一種輕量的資料交換格式”的了解；
然後來看經常被混為一談的JSON和JS對象的差別；
最後我們再來看JS中這幾個JSON相關函數具體的執行細節。

希望全文能讓如之前的我一樣對JSON一知半解的親能說清楚JSON是什麼，也能熟練運用JSON，不看控制台就知道JS對象序列化成JSON字元串後輸出是啥。

一、JSON是一種格式，基于文本，優于輕量，用于交換資料

如果沒有去過JSON的官方介紹可以去一下這裡，官方介紹第一、二段已經很清楚地表述了JSON是什麼，我将JSON是什麼提煉成以下幾個方面：

1. 一種資料格式

什麼是格式？就是規範你的資料要怎麼表示，舉個栗子，有個人叫“二百六”，身高“160cm”，體重“60kg”，現在你要将這個人的這些資訊傳給别人或者别的什麼東西，你有很多種選擇：

姓名“二百六”，身高“160cm”，體重“60kg”
name="二百六"&height="160cm"&weight="60kg"
<person><name>二百六</name><height>160</height><weight>60</weight></person>
{"name":"二百六","height":160,"weight":60}
… …

以上所有選擇，傳遞的資料是一樣的，但是你可以看到形式是可以各式各樣的，這就是各種不同格式化後的資料，JSON是其中一種表示方式。

2. 基于文本的資料格式

JSON是基于文本的資料格式，相對于基于二進制的資料，是以JSON在傳遞的時候是傳遞符合JSON這種格式(至于JSON的格式是什麼我們第二部分再說)的字元串，我們常會稱為“JSON字元串”。

3. 輕量級的資料格式

在JSON之前，有一個資料格式叫xml，現在還是廣泛在用，但是JSON更加輕量，如xml需要用到很多标簽，像上面的例子中，你可以明顯看到xml格式的資料中标簽本身占據了很多空間，而JSON比較輕量，即相同資料，以JSON的格式占據的帶寬更小，這在有大量資料請求和傳遞的情況下是有明顯優勢的。

4. 被廣泛地用于資料交換

輕量已經是一個用于資料交換的優勢了，但更重要的JSON是易于閱讀、編寫和機器解析的，即這個JSON對人和機器都是友好的，而且又輕，獨立于語言（因為是基于文本的），是以JSON被廣泛用于資料交換。

以前端JS進行ajax的POST請求為例，後端php處理請求為例：

前端構造一個JS對象，用于包裝要傳遞的資料，然後将JS對象轉化為JSON字元串，再發送請求到後端；
後端php接收到這個JSON字元串，将JSON字元串轉化為PHP對象，然後處理請求。

可以看到，相同的資料在這裡有3種不同的表現形式，分别是前端的JS對象、傳輸的JSON字元串、後端的PHP對象，JS對象和PHP對象明顯不是一個東西，但是由于大家用的都是JSON來傳遞資料，大家都能了解這種資料格式，都能把JSON這種資料格式很容易地轉化為自己能了解的資料結構，這就友善啦，在其他各種語言環境中交換資料都是如此。

二、JSON和JS對象之間的“八卦”

很多時候都聽到“JSON是JS的一個子集”這句話，而且這句話我曾經也一直這麼認為，每個符合JSON格式的字元串你解析成js都是可以的，直到後來發現了一個奇奇怪怪的東西…

1. 兩個本質不同的東西為什麼那麼密切

JSON和JS對象本質上完全不是同一個東西，就像“斑馬線”和“斑馬”，“斑馬線”基于“斑馬”身上的條紋來呈現和命名，但是斑馬是活的，斑馬線是非生物。

同樣，”JSON”全名”JavaScript Object Notation”，是以它的格式（文法）是基于JS的，但它就是一種格式，而JS對象是一個執行個體，是存在于記憶體的一個東西。

說句玩笑話，如果JSON是基于PHP的，可能就叫PON了，形式可能就是這樣的了['propertyOne' => 'foo', 'propertyTwo' => 42,]，如果這樣，那麼JSON可能現在是和PHP比較密切了。

此外，JSON是可以傳輸的，因為它是文本格式，但是JS對象是沒辦法傳輸的，在文法上，JSON也會更加嚴格，但是JS對象就很松了。

那麼兩個不同的東西為什麼那麼密切，因為JSON畢竟是從JS中演變出來的，文法相近。

2. JSON格式别JS對象文法表現上嚴格在哪

先就以“鍵值對為表現的對象”形式上，對比下兩者的不同，至于JSON還能以怎樣的形式表現，對比完後再羅列。

對比内容	JSON	JS對象
鍵名	必須是加雙引号	可允許不加、加單引号、加雙引号
屬性值	隻能是數值（10進制）、字元串（雙引号）、布爾值和null，也可以是數組或者符合JSON要求的對象，不能是函數、NaN, Infinity, -Infinity和undefined	愛啥啥
逗号問題	最後一個屬性後面不能有逗号	可以
數值	前導0不能用，小數點後必須有數字	沒限制

可以看到，相對于JS對象，JSON的格式更嚴格，是以大部分寫的JS對象是不符合JSON的格式的。

以下代碼引用自這裡

var obj1 = {}; // 這隻是 JS 對象

// 可把這個稱做：JSON 格式的 JavaScript 對象 
var obj2 = {"width":100,"height":200,"name":"rose"};

// 可把這個稱做：JSON 格式的字元串
var str1 = '{"width":100,"height":200,"name":"rose"}';

// 這個可叫 JSON 格式的數組，是 JSON 的稍複雜一點的形式
var arr = [  
    {"width":100,"height":200,"name":"rose"},
    {"width":100,"height":200,"name":"rose"},
    {"width":100,"height":200,"name":"rose"},
];

// 這個可叫稍複雜一點的 JSON 格式的字元串     
var str2='['+  
    '{"width":100,"height":200,"name":"rose"},'+
    '{"width":100,"height":200,"name":"rose"},'+
    '{"width":100,"height":200,"name":"rose"},'+
']';

另外，除了常見的“正常的”JSON格式，要麼表現為一個對象形式{...}，要麼表現為一個數組形式[...]，任何單獨的一個10進制數值、雙引号字元串、布爾值和null都是有效符合JSON格式的。

這裡有完整的JSON文法參考

3. 一個有意思的地方，JSON不是JS的子集

首先看下面的代碼，你可以copy到控制台執行下：

var code = '"\u2028\u2029"';  
JSON.parse(code); // works fine  
eval(code); // fails

這兩個字元\u2028和\u2029分别表示行分隔符和段落分隔符，JSON.parse可以正常解析，但是當做js解析時會報錯。

三、這幾個JS中的JSON函數，弄啥嘞

在JS中我們主要會接觸到兩個和JSON相關的函數，分别用于JSON字元串和JS資料結構之間的轉化，一個叫JSON.stringify，它很聰明，聰明到你寫的不符合JSON格式的JS對象都能幫你處理成符合JSON格式的字元串，是以你得知道它到底幹了什麼，免得它隻是自作聰明，然後讓你Debug long time；另一個叫JSON.parse，用于轉化json字元串到JS資料結構，它很嚴格，你的JSON字元串如果構造地不對，是沒辦法解析的。

而它們的參數不止一個，雖然我們經常用的時候隻傳入一個參數。

此外，還有一個toJSON函數，我們較少看到，但是它會影響JSON.stringify。

1. 将JS資料結構轉化為JSON字元串——JSON.stringify

這個函數的函數簽名是這樣的：

JSON.stringify(value[, replacer [, space]])

下面将分别展開帶1~3個參數的用法，最後是它在序列化時做的一些“聰明”的事，要特别注意。

1.1 基本使用——僅需一個參數

這個大家都會使用，傳入一個JSON格式的JS對象或者數組，JSON.stringify({"name":"Good Man","age":18})傳回一個字元串"{"name":"Good Man","age":18}"。

可以看到本身我們傳入的這個JS對象就是符合JSON格式的，用的雙引号，也沒有JSON不接受的屬性值，那麼如果像開頭那個例子中的一樣，how to play？不急，我們先舉簡單的例子來說明這個函數的幾個參數的意義，再來說這個問題。

1.2 第二個參數可以是函數，也可以是一個數組

如果第二個參數是一個函數，那麼序列化過程中的每個屬性都會被這個函數轉化和處理
如果第二個參數是一個數組，那麼隻有包含在這個數組中的屬性才會被序列化到最終的JSON字元串中
如果第二個參數是null，那作用上和空着沒啥差別，但是不想設定第二個參數，隻是想設定第三個參數的時候，就可以設定第二個參數為null

這第二個參數若是函數

var friend={  
    "firstName": "Good",
    "lastName": "Man",
    "phone":"1234567",
    "age":18
};

var friendAfter=JSON.stringify(friend,function(key,value){  
    if(key==="phone")
        return "(000)"+value;
    else if(typeof value === "number")
        return value + 10;
    else
        return value; //如果你把這個else分句删除，那麼結果會是undefined
});

console.log(friendAfter);  
//輸出：{"firstName":"Good","lastName":"Man","phone":"(000)1234567","age":28}

如果制定了第二個參數是函數，那麼這個函數必須對每一項都有傳回，這個函數接受兩個參數，一個鍵名，一個是屬性值，函數必須針對每一個原來的屬性值都要有新屬性值的傳回。

那麼問題來了，如果傳入的不是鍵值對的對象形式，而是方括号的數組形式呢？，比如上面的friend變成這樣：friend=["Jack","Rose"]，那麼這個逐屬性處理的函數接收到的key和value又是什麼？如果是數組形式，那麼key是索引，而value是這個數組項，你可以在控制台在這個函數内部列印出來這個key和value驗證。

這第二個參數若是數組

var friend={  
    "firstName": "Good",
    "lastName": "Man",
    "phone":"1234567",
    "age":18
};

//注意下面的數組有一個值并不是上面對象的任何一個屬性名
var friendAfter=JSON.stringify(friend,["firstName","address","phone"]);

console.log(friendAfter);  
//{"firstName":"Good","phone":"1234567"}
//指定的“address”由于沒有在原來的對象中找到而被忽略

如果第二個參數是一個數組，那麼隻有在數組中出現的屬性才會被序列化進結果字元串，隻要在這個提供的數組中找不到的屬性就不會被包含進去，而這個數組中存在但是源JS對象中不存在的屬性會被忽略，不會報錯。

1.3 第三個參數用于美化輸出——不建議用

指定縮進用的空白字元，可以取以下幾個值：

是1-10的某個數字，代表用幾個空白字元
是字元串的話，就用該字元串代替空格，最多取這個字元串的前10個字元
沒有提供該參數等于設定成null 等于設定一個小于1的數

var friend={  
    "firstName": "Good",
    "lastName": "Man",
    "phone":{"home":"1234567","work":"7654321"}
};

//直接轉化是這樣的：
//{"firstName":"Good","lastName":"Man","phone":{"home":"1234567","work":"7654321"}}

var friendAfter=JSON.stringify(friend,null,4);  
console.log(friendAfter);  
/*
{
    "firstName": "Good",
    "lastName": "Man",
    "phone": {
        "home": "1234567",
        "work": "7654321"
    }
}
*/

var friendAfter=JSON.stringify(friend,null,"HAHAHAHA");  
console.log(friendAfter);  
/*
{
HAHAHAHA"firstName": "Good",  
HAHAHAHA"lastName": "Man",  
HAHAHAHA"phone": {  
HAHAHAHAHAHAHAHA"home": "1234567",  
HAHAHAHAHAHAHAHA"work": "7654321"  
HAHAHAHA}  
}
*/

var friendAfter=JSON.stringify(friend,null,"WhatAreYouDoingNow");  
console.log(friendAfter);  
/* 最多隻取10個字元
{
WhatAreYou"firstName": "Good",  
WhatAreYou"lastName": "Man",  
WhatAreYou"phone": {  
WhatAreYouWhatAreYou"home": "1234567",  
WhatAreYouWhatAreYou"work": "7654321"  
WhatAreYou}  
}
*/

笑笑就好，别這樣用，序列化是為了傳輸，傳輸就是能越小越好，加莫名其妙的縮進符，解析困難（如果是字元串的話），也弱化了輕量化這個特點。。

1.4 注意這個函數的“小聰明”（重要）

如果有其他不确定的情況，那麼最好的辦法就是”Have a try”，控制台做下實驗就明了。

鍵名不是雙引号的（包括沒有引号或者是單引号），會自動變成雙引号；字元串是單引号的，會自動變成雙引号
最後一個屬性後面有逗号的，會被自動去掉
非數組對象的屬性不能保證以特定的順序出現在序列化後的字元串中

這個好了解，也就是對非數組對象在最終字元串中不保證屬性順序和原來一緻
布爾值、數字、字元串的包裝對象在序列化過程中會自動轉換成對應的原始值

也就是你的什麼new String("bala")會變成"bala"，new Number(2017)會變成2017
undefined、任意的函數（其實有個函數會發生神奇的事，後面會說）以及 symbol 值（symbol詳見ES6對symbol的介紹）

出現在非數組對象的屬性值中：在序列化過程中會被忽略
出現在數組中時：被轉換成 null

JSON.stringify({x: undefined, y: function(){return 1;}, z: Symbol("")});  
//出現在非數組對象的屬性值中被忽略："{}"
JSON.stringify([undefined, Object, Symbol("")]);  
//出現在數組對象的屬性值中，變成null："[null,null,null]"

NaN、Infinity和-Infinity，不論在數組還是非數組的對象中，都被轉化為null
所有以 symbol 為屬性鍵的屬性都會被完全忽略掉，即便 replacer 參數中強制指定包含了它們
不可枚舉的屬性會被忽略

2. 将JSON字元串解析為JS資料結構——JSON.parse

JSON.parse(text[, reviver])

如果第一個參數，即JSON字元串不是合法的字元串的話，那麼這個函數會抛出錯誤，是以如果你在寫一個後端傳回JSON字元串的腳本，最好調用語言本身的JSON字元串相關序列化函數，而如果是自己去拼接實作的序列化字元串，那麼就尤其要注意序列化後的字元串是否是合法的，合法指這個JSON字元串完全符合JSON要求的嚴格格式。

值得注意的是這裡有一個可選的第二個參數，這個參數必須是一個函數，這個函數作用在屬性已經被解析但是還沒傳回前，将屬性處理後再傳回。

var friend={  
    "firstName": "Good",
    "lastName": "Man",
    "phone":{"home":"1234567","work":["7654321","999000"]}
};

//我們先将其序列化
var friendAfter=JSON.stringify(friend);  
//'{"firstName":"Good","lastName":"Man","phone":{"home":"1234567","work":["7654321","999000"]}}'

//再将其解析出來，在第二個參數的函數中列印出key和value
JSON.parse(friendAfter,function(k,v){  
    console.log(k);
    console.log(v);
    console.log("----");
});
/*
firstName  
Good  
----
lastName  
Man  
----
home  
1234567  
----
0  
7654321  
----
1  
999000  
----
work  
[]
----
phone  
Object  
----

Object  
----
*/

仔細看一下這些輸出，可以發現這個周遊是由内而外的，可能由内而外這個詞大家會誤解，最裡層是内部數組裡的兩個值啊，但是輸出是從第一個屬性開始的，怎麼就是由内而外的呢？

這個由内而外指的是對于複合屬性來說的，通俗地講，周遊的時候，從頭到尾進行周遊，如果是簡單屬性值（數值、字元串、布爾值和null），那麼直接周遊完成，如果是遇到屬性值是對象或者數組形式的，那麼暫停，先周遊這個子JSON，而周遊的原則也是一樣的，等這個複合屬性周遊完成，那麼再完成對這個屬性的周遊傳回。

本質上，這就是一個深度優先的周遊。

有兩點需要注意：

如果 reviver 傳回 undefined，則目前屬性會從所屬對象中删除，如果傳回了其他值，則傳回的值會成為目前屬性新的屬性值。
你可以注意到上面例子最後一組輸出看上去沒有key，其實這個key是一個空字元串，而最後的object是最後解析完成對象，因為到了最上層，已經沒有真正的屬性了。

3. 影響 JSON.stringify 的神奇函數——object.toJSON

如果你在一個JS對象上實作了toJSON方法，那麼調用JSON.stringify去序列化這個JS對象時，JSON.stringify會把這個對象的toJSON方法傳回的值作為參數去進行序列化。

var info={  
    "msg":"I Love You",
    "toJSON":function(){
        var replaceMsg=new Object();
        replaceMsg["msg"]="Go Die";
        return replaceMsg;
    }
};

JSON.stringify(info);  
//出si了，傳回的是：'"{"msg":"Go Die"}"',說好的忽略函數呢

這個函數就是這樣子的。

其實Date類型可以直接傳給JSON.stringify做參數，其中的道理就是，Date類型内置了toJSON方法。

四、小結以及關于相容性的問題

到這裡終于把，JSON和JS中的JSON，梳理了一遍，也對裡面的細節和注意點進行了一次周遊，知道JSON是一種文法上衍生于JS語言的一種輕量級的資料交換格式，也明白了JSON相對于一般的JS資料結構（尤其是對象）的差别，更進一步，仔細地讨論了JS中關于JSON處理的3個函數和細節。

不過遺憾的是，以上所用的3個函數，不相容IE7以及IE7之前的浏覽器。有關相容性的讨論，留待之後吧。如果想直接在應用上解決相容性，那麼可以套用JSON官方的js，可以解決。

深入了解 JSON

一、JSON是一種格式，基于文本，優于輕量，用于交換資料

1. 一種資料格式

2. 基于文本的資料格式

3. 輕量級的資料格式

4. 被廣泛地用于資料交換

二、JSON和JS對象之間的“八卦”

1. 兩個本質不同的東西為什麼那麼密切

2. JSON格式别JS對象文法表現上嚴格在哪

3. 一個有意思的地方，JSON不是JS的子集

三、這幾個JS中的JSON函數，弄啥嘞

1. 将JS資料結構轉化為JSON字元串——JSON.stringify

1.1 基本使用——僅需一個參數

1.2 第二個參數可以是函數，也可以是一個數組

1.3 第三個參數用于美化輸出——不建議用

1.4 注意這個函數的“小聰明”（重要）

2. 将JSON字元串解析為JS資料結構——JSON.parse

3. 影響 JSON.stringify 的神奇函數——object.toJSON

四、小結以及關于相容性的問題

繼續閱讀

json傳輸資料解決中文亂碼問題

HDU 4609 3-idiots

回文樹學習小結

HDU 1402 A * B Problem Plus

關于 underscore 中模闆引擎的應用示範樣例

underscore 模闆标簽修改。

Ajax——模闆引擎

使用underscore的template自定義模闆

underscore模闆功能的使用和學習

查找檔案中的字元串

數組和類數組

[HTML5]自定義屬性 data-* 和 jQuery.data 詳解

七牛雲-C#SDK-上傳-前期準備

vue-cli簡介（中文翻譯）

Ajax發送和擷取json資料到Spring mvc 1.spring mvc後端2.web前段

JSONObject包導入異常 java.lang.NoClassDefFoundErrorweb項目的導入包的問題