前端json格式的介紹，轉換以及解析

近幾日碰到json的問題比較多，我這裏做一個總結，比較淺顯簡單，希望能對那些前端小白有所幫助，能對json有一個認識，並且能簡單的處理json格式的內容。

例如最近碰到一個項目，項目需求如下：

用戶選擇一級下拉菜單，二級聯動，動態加載內容到二級菜單，並在下方內容處，隨着用戶下拉菜單選擇的內容動態加載相應內容。

實現的方法其實比較簡單：

• select部分：一級菜單選擇內容，ajax動態加載，因爲內容固定（地名類），我這裏所以直接解析json，寫入內容到option裏面，並且動態生成，其實是不太規範的。通常項目二級聯動部分裏面下拉菜單的內容是時常變化的，正確的操作應該如下：一級菜單select選擇內容，馬上ajax傳值到後端，後端相應的查表，返回json格式數據到前端，前端解析，並寫入內容到option裏面。
• 下方內容處的動態生成：與二級聯動類似，一級菜單或者二級菜單select選擇內容，馬上ajax傳值到後端，後端相應的查表，返回json格式數據到前端，前端解析，並寫入內容到下方內容填充處。實現無刷新頁面動態生成。

繞來繞去，前後端的聯繫都離不開 json 和 xml，而 json 和 javescript 簡直是天造地設的一對，json 的優點我就不敘述了。

下面簡單總結下json的相關用法，有三塊內容：

1、JSON的基本數據格式     2、json字符串轉json格式     3、json格式轉json字符串。

一、JSON的基本數據格式

1.JSON對象（JSONObject）

簡單一點的：

{"name":"西蘭花的春天" , "age":26 , "male":true}

複雜一點：

{  
   "name":"西蘭花的春天", 
   "age":"26", 
   "male":"true",
   "company":{ "name":"Helen", "city":"杭州", "country":"中國" }
}

2.JSON數組（JSONArray ）

簡單一點的：

[
   { "name":"陳總", "age":"40", "male":"true" },
   { "name":"孫xx", "age":"24", "male":"false" },
   { "name":"高xx", "age":"30", "male":"true" },
   { "name":"陳xx", "age":"30", "male":"true" },
   { "name":"張xx", "age":"30", "male":"true" }
]

複雜一點的:

{
   "helen":{
      "技術部":[
         {
            "人員":"5",
            "男人":"4",
            "女人":"1",
            "人員構成":{
               "帶頭大哥":{ "技術總監":"陳xx" },
               "前端":[
                  {
                     "前端1":"孫美女",
                     "前端1特點":"技術天才",
                     "前端2":"西蘭花的春天",
                     "前端2特點":"技術大天才"
                  }
               ],
               "後端":[
                  {
                     "後端1":"陳xx",
                     "後端1特點":"技術瘋子",
                     "後端2":"張xx",
                     "後端2特點":"技術瘋子"
                  }
               ]
            }
         },
         {
            "人員":"2",
            "男人":"2",
            "女人":"0",
            "人員構成":{
               "帶頭大哥":{ "運營總監":"張xx" },
               "運營":[
                  {
                     "運營1":"孫xx",
                     "運營1特點":"技術天才",
                  }
               ]
            }
         }
      ]
   }

json 的數據格式嚴格意義上應該遵守其規則，鍵和值加引號，該加中括號加中括號，改加大括號加大括號，錯誤的書寫直接導致後面解析方法 JSON.parse()報錯，當然了，eval('(' + str + ')')則會通過，詳情看後面的json解析。

二、json對象和json字符串的轉換

1. 首先要明白什麼是json對象，什麼是json字符串。

json格式：

{"name":"西蘭花的春天" , "age":26 , "male":true}

json字符串格式：

'{"name":"西蘭花的春天" , "age":26 , "male":true}'

可以看出它們的區別在於外面多了一對引號，json字符串之所以叫json字符串，因爲字符串的格式符合json的格式，所以叫做json字符串，可以alert（typeof（xxx））一下，    結果也是：string。

2. json字符串轉json對象

（1）調用parse方法：

var jsonString='{"name":"西蘭花的春天","age":"26"}' //json字符串
var ToObject=JSON.parse(jsonString);
console.log(bToObject.name);//西蘭花的春天

這裏注意一下:

瀏覽器(Firefox，chrome，opera，safari，ie9，ie8)支持parse方法轉換，而ie8兼容。ie7，ie6則需要加載一個json2.js的腳本文件，則可以使用stringify()和parse()方法。

下載鏈接：https://github.com/douglascrockford/JSON-js

（2）調用eval方法：

var jsonString = '{"name":"西蘭花的春天","age":"26"}' //json字符串
var ToObject = eval( '(' + jsonString + ')' );
console.log( bToObject.name );//西蘭花的春天

（3）jQuery插件支持的轉換方式： 

$.parseJSON() :     jQuery.parseJSON(),可以將json字符串轉換成json對象 

var jsonString = '{"name":"西蘭花的春天","age":"26"}' //json字符串
console.log( $.parseJSON( jsonString ).name );//西蘭花的春天

還有許多方法，如js的方法解析，這裏不多做論述，目前parse方法用的比較多，這裏講一下eval：

先放一個鏈接，https://www.zhihu.com/question/20591877，你可以去評判下eval的好壞。我的理念是，程序的編寫應該有點哲學的思想，萬物無絕對，辯證的看問題纔是最客觀的，不偏不倚，前端有時候帶點中庸思想不會錯。

好了，這裏我只講json裏用到eval的好壞。

• 好處：eval太強大，什麼都能給你解析出來。
• 缺點：錯誤的json格式也可以解析出來，不安全，很容易讓一些用戶在json字符串中注入了向頁面插入木馬鏈接的腳本。

如下：

var jsonString = "{ name:'西蘭花的春天',age:'26',}";
var obj = eval( '(' + jsonString + ')' );
console.log( obj );

輸出結果：

我這裏json字符串格式都是錯誤的，單引號，無引號，句末有逗號，結果還是成功輸出。

在看一例：

var jsonString = '{ name:"西蘭花的春天",age:alert("西蘭花的春天")}';
var obj = eval( '(' + jsonString + ')' );
console.log( obj );

結果出現彈窗，並且打印出結果

可見eval還是有點不好的，包容錯誤造成不必要的麻煩。

下面看一個我項目中的例子:

json:

{
   "helen":{
      "技術部":[
         {
            "人員":"5",
            "男人":"4",
            "女人":"1",
            "人員構成":{
               "帶頭大哥":{ "技術總監":"陳xx" },
               "前端":[
                  {
                     "前端1":"孫美女",
                     "前端1特點":"技術天才",
                     "前端2":"西蘭花的春天",
                     "前端2特點":"技術大天才"
                  }
               ],
               "後端":[
                  {
                     "後端1":"陳xx",
                     "後端1特點":"技術瘋子",
                     "後端2":"張xx",
                     "後端2特點":"技術瘋子"
                  }
               ]
            }
         }
      ]
   }
}

js:

    <script>
   $( document ).ready( readyHandler );
   function readyHandler()
   {
      $.get( "helen.json", function( data )
      {
         console.log( data );

	console.log( data.helen.技術部[ 0 ].人員構成.前端[ 0 ].前端2 );

} ); } </script> 我這裏直接讀取的項目文件下的json文件裏的內容，內容爲json數據格式，不用解析，直接可以拿來用，怎麼在複雜的json格式裏取到我想要的值，其實很簡單。

我前幾日碰到json數組數組格式或者複合格式的就出錯，苦於怎麼取值，後來研究了一會明白一個道理：

複雜的json裏有JSON對象和json數組，取對象我們直接.xxx就可以了，取數組那一層其實只要.xx[i]即可，一層一層剝離下去，細心點就不會錯，明白這個道理就舉一反三了，也沒什麼難得，就這麼回事。

三、json格式轉json字符串

好了，有去就有回，有來就有往，json格式當然也可以轉json字符串，就這麼幾個方法，如下：

1.使用toJSONString()

var jsonObj = {"name":"西蘭花的春天" , "age":26 , "male":true};
var jsonString  = jsonObj.toJSONString();//將JSON對象轉化爲JSON字符
alert(jsonString);

2.全局方法JSON.stringify()

var jsonObj = { "name": "西蘭花的春天", "age": 26, "male": true };
var jsonString = JSON.stringify( jsonObj );//將JSON對象轉化爲JSON字符
alert( jsonString );

注意：在ie6，ie7，ie8兼容模式下，要加載json2.js 腳本，他們方法都來自json.js包，其他高版本ie或其他高版本瀏覽器不加載json2.js 也可正常運行全局方JSON.stringify()，而toJSONString()執行則要求加載json2.js 腳本。

好了，以上就是我關於json的總結，比較具體，涉及到複雜問題則要具體事例具體解決了，json格式的處理其實很簡單，我這裏也就不囉嗦了，若有出錯之處，還望指出。