[TOC]  ## JSON是對象數據類型的特殊數據格式。 JSON不是一個單獨的數據類型，它只是一種特殊的數據格式->它是對象數據類型 ``` var obj = {name:'ahhh',age:111}; ``` JSON格式的對象相對于普通的對象來說，只是把屬性名用雙引號包起來的 ``` var jsonObj = {"name":"ahhh","age":111}; ``` ## 方法 在window瀏覽器對象中，提供了一個叫做JSON的屬性，它里面提供了兩個方法 `window.JSON` >IE6~7下window下沒有JSON屬性 ### JSON.parse 把JSON格式的字符串轉換為JSON格式的對象 兼容IE6~7 ``` eval("("+str+")"); //->不要問為什么，一定要記住使用eval的話，不要忘記手動的加一個小括號 ``` ### JSON.stringify 把JSON格式的對象轉換為JSON格式的字符串 ``` console.log(JSON.stringify({name:'egg',age:111})) ``` 會自動添加上`""` ``` {"name":"egg","age":111} ``` >**注意：** 該方法無法stringify函數類型的數據 #### stringify會無視值為undefined的屬性 ``` console.log(JSON.stringify({user:undefined})) ``` 輸出會為`{}` 但是一個屬性的值為`null`時，它是認的，會輸出`{"user":null}` ## 綁定數據 ### 動態綁定 利用動態創建元素節點和把它追加到頁面中的方式實現數據綁定 ```javascript for(var i=0;i<ary.length;++i){ var cur = ary[i]; var oLi = document.createElement("li"); oLi.innerHTML = `<span>${i+4}</span>${cur.title}`; oUl.appendChild(oLi); } ``` 優勢：把需要動態綁定的內容一個個追加到頁面中，對原來的元素沒有任何影響 弊端：每當創建一個li，我們就添加到頁面中，引發一次DOM回流，最后引發回流的次數過多，影響我們的性能。 ### 字符串拼接 首先循環需要綁定的數據，然后把需要動態綁定的標簽以字符串的方式拼接到一起，拼接完成，統一的追加到頁面中->"字符串拼接綁定數據是我們以后工作中最常用的一種綁定數據的方式" ``` var str = ""; for(var i=0;i<ary.length;++i){ var cur = ary[i]; str += "<li>"; str += "<span>"+(i+4)+"</span>"; str+=curl.title; str+="</li>"; } oUl.innerHTML += str; //->oUl.innerHTML = oUl.innerHTML(把之前的三個li以字符串的方式獲取到)+str;(拼接完成的整體還是字符串，最后再把字符串統一的添加到頁面中，瀏覽器還需要把子串渲染成為對應的標簽) ``` 弊端：我們把新拼接的字符串添加到oUl時，原有的三個li的鼠標滑過效果都消失了（原來標簽綁定的事件都消失了） 優勢：事先把內容拼接好了，最后統一添加到頁面當中，只引發一次回流。 ## 注意事項