最近碰到json的問題比較多，做個總結，比較簡單，也比較入門，希望能幫助那些職場初級前端能對json有一個新的認識，若有錯誤之處，歡迎指正。
就拿最近的一個項目做例子：
項目模塊需求：
用戶選擇一級下拉菜單，同時二級菜單內容動態顯示，並且二級聯動下方的內容部分動態生成相應查詢內容。
實現起來也很簡單：
用戶選擇一級下拉菜單時，傳值到後臺，後臺查表處理後，返回json格式數據到前端，前端再對json做處理，在二級菜單下拉框裏生成option內容，並且在下方內容空白處，動態生成查詢內容。
其實，可以看出前端後端之間離不開json和xml，json作爲前後端的橋樑有着諸多優勢，並且json和javescript簡直是天造地設的一對，js處理json是十分方便的事情。下面我就來簡單介紹一下json以及它的用法。
以下分爲四塊內容：
1. json的數據格式 2. json字符串轉json數據對象 3. json數據對象轉json字符串 4. json的取值
一、.json的數據格式
1.JSON對象（JSONObject）
簡單一點的：
{"name":"西蘭花的春天" , "age":"26" , "male":"true"}
複雜一點的：
{
"name":"西蘭花的春天",
"age":"26",
"male":"true",
"address":{ "name":"helen", "city":"杭州", "country":"中國" }
}
2.JSON數組（JSONArray）
簡單一點的：
[
{ "name":"西蘭花的春天", "age":"30", "male":"true" },
{ "name":"孫xx", "age":"30", "male":"false" },
{ "name":"陳xx", "age":"30", "male":"true" },
{ "name":"張x", "age":"30", "male":"true" }
]
複雜一點的：
{
"helen":{
"技術運營部":[
{
"人員":"5",
"男人":"4",
"女人":"1",
"人員構成":{
"帶頭大哥":"陳xx",
"前端":[
{
"前端1":"孫xx",
"前端1特點":"技術天才",
"前端2":"西蘭花的春天",
"前端2特點":"技術天才"
}
],
"後端":[
{
"後端1":"陳xx",
"後端1特點":"技術天才",
"後端2":"張x",
"後端2特點":"技術天才"
}
]
}
},
{
"人員":"2",
"男人":"2",
"女人":"0",
"人員構成":{
"帶頭大哥":"張xx",
"運維":[
{
"運維1":"孫xx",
"運維1特點":"技術天才"
}
]
}
}
]
}
}
標準JSON的合法符號：{(左大括號) }(右大括號) "(雙引號) :(冒號) ,(逗號) [(左中括號) ](右中括號)，也就是說json格式裏面嚴格意義上鍵值要加雙引號，每個鍵值對之間要加逗號，末尾不能有逗號，中括號和大括號要合理使用。
json格式如實不規範使用，則會導致JSON.parse()解析錯誤，一定程度上，也會導致eval()方法報錯。
二、json字符串轉json數據對象
（1）JSON.parse()方法
JSON.parse()方法只支持IE8/Firefox3.5+/Chrome4/Safari4/Opera10 以上版本
ie8(兼容模式),ie7和ie6沒有JSON對象，推薦採用JSON官方的方式，引入json2.js。
var jsonStr = '{"name":"西蘭花的春天" , "age":"26" , "male":"true"}'; var jsonObj = JSON.parse( jsonStr ); console.log( jsonObj );
（2）eval()方法
解析JSON數據的最常用方法是使用javascript的eval()方法，ie8(兼容模式),ie7和ie6也可以使用eval()將字符串轉爲JSON對象
var jsonStr = '{"name":"西蘭花的春天" , "age":"26" , "male":"true"}'; var jsonObj = eval( '(' + jsonStr + ')' ); console.log( jsonObj );
（3）$.parseJSON方法
var jsonStr = '{"name":"西蘭花的春天" , "age":"26" , "male":"true"}'; var jsonObj = $.parseJSON( jsonStr ); console.log( jsonObj );
（4）new Function方法
var jsonStr = '{"name":"西蘭花的春天" , "age":"26" , "male":"true"}'; function toJson( jsonStr ) { var jsonObj = (new Function( "return " + jsonStr ))(); console.log( jsonObj ); return jsonObj; }
這裏注意一下：
1.運用時候需要除了eval()以外需要json2.js包。鏈接下載地址：https://github.com/douglascrockford/JSON-js
2.json2.js會在瀏覽器原生支持JSON.parse的時候選用原生版本，而且它跟ES5是API兼容的。在ES5還沒完全普及的現狀下，John Resig推薦用json2.js主要是爲了現在就能用跟ES5兼容的API。
3.這裏我重點提一下eval
eval在項目中要慎重使用，關於eval的好壞我不做評價，我覺得前端開發一定要有哲學思想，需要辯證的看待問題，凡事沒有絕對的好壞，編程的語言選擇必須切實根據實際項目來做取捨，思維要有彈性，這裏放個鏈接，有興趣可以去看一下：https://www.zhihu.com/question/20591877
這裏我就提一下用eval解析會碰到的問題
1.如下所示
var jsonStr = '{"name":"西蘭花的春天" , "age":"26" , "male":"true"}'; var jsonObj = eval( jsonStr ); console.log( jsonObj );則報錯：
在看下面：
alert(eval("{}")) // return undefined alert(eval("({})"));// return object[Object]
加上圓括號的目的是迫使eval函數在處理JavaScript代碼的時候強制將括號內的表達式（expression）轉化爲對象，而不是作爲語 句（statement）來執行。舉一個例子，例如對象字面量{}，如若不加外層的括號，那麼eval會將大括號識別爲JavaScript代碼塊的開始 和結束標記，那麼{}將會被認爲是執行了一句空語句。所以下面兩個執行結果是不同的。
再把eval()改爲：eval（‘（‘+json+’）’）格式：
var jsonStr = '{"name":"西蘭花的春天" , "age":"26" , "male":"true"}'; var jsonObj = eval( '(' + jsonStr + ')' ); console.log( jsonObj );
則成功輸出。2.若是如下所示解析：
var jsonStr = '{name:"西蘭花的春天" ;age:"26" ; male:"true"}'; var jsonObj = eval( jsonStr ); console.log( jsonObj );
一旦一個對象有了若干個 key，比如{ name:"西蘭花的春天" ;age:"26" ; male:"true" }，就有三個 label 語句，將
"name" ，age以及male分別看做是語句，語句之間只能用分號連接！（表達式之間才能用逗號），會返回最後一個的值，所以改成上面這樣也是沒有問題的。
3.若是如下所示解析：
var jsonStr = "{'name':'西蘭花的春天' , 'age':'26' , 'male':alert('西蘭花的春天')}"; var jsonObj = eval( '(' + jsonStr + ')' ); console.log( jsonObj );
我們發現
jsonStr其實不是嚴格意義上的json格式，eval還是解析出來了，而JSON.parse()方法解析時則會報錯，我麼可以看出，eval十分強大，但也涉及到安全性問題，惡意用戶可在往json里加入木馬腳本，故能不用eval就不要採納。
三、json數據對象轉json字符串
（1）JSON.stringify(obj) 方法
var jsonObj = { 'name': "西蘭花的春天", "age": "26", "male": "true" }; var str = JSON.stringify( jsonObj ); console.log( str );（2）obj.toJSONString()方法
var jsonObj = { 'name': "西蘭花的春天", "age": "26", "male": "true" }; var str = jsonObj.toJSONString(); console.log( str );注意：
以上兩個方法，只能在IE8或者以上，toJSONString() ， 必須要引入json.js，如要在ie8兼容模式以下版本使用，則要加載json2.js拓展，所以說侷限性都比較高。不過，個人建議使用JSON.stringify(obj) 方法比較好。
四、json的取值
{
"helen":{
"技術運營部":[
{
"人員":"5",
"男人":"4",
"女人":"1",
"人員構成":{
"帶頭大哥":"陳xx",
"前端":[
{
"前端1":"孫xx",
"前端1特點":"技術天才",
"前端2":"西蘭花的春天",
"前端2特點":"技術天才"
}
],
"後端":[
{
"後端1":"陳xx",
"後端1特點":"技術天才",
"後端2":"張x",
"後端2特點":"技術天才"
}
]
}
},
{
"人員":"2",
"男人":"2",
"女人":"0",
"人員構成":{
"帶頭大哥":"張xx",
"運維":[
{
"運維1":"孫xx",
"運維1特點":"技術天才"
}
]
}
}
]
}
}
<script> $( document ).ready( readyHandler ); function readyHandler() { $.get( "helen.json", function( data ) //data作爲參數傳入 { //若我要取到"前端2"的值 console.log( data.helen.技術運營部[ 0 ].人員構成.前端[ 0 ].前端2 ); } ); } </script>
這裏獲取的json直接就是json標準格式，不需要解析，直接取值。
如下，成功輸出我要的值：西蘭花的春天
原先我取值的時候總是出錯，後來花了幾分鐘想了下，明白其中的道理。json解析取值，簡單點去想，就是複雜json由json對象和json數組混合構成，取值就像剝洋蔥，一層一層下去，碰到對對象，就用.xx方法，碰到數組，就用.x[i]方法，心細一點，別寫錯，肯定不會錯，無論多複雜的json，都是這麼操作這，沒什麼難度把。
至此，json大致說完了，比較簡單易懂，也沒什麼難度，就這麼回事，希望看完能有所幫助。
