[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的鼠标滑过效果都消失了（原来标签绑定的事件都消失了） 优势：事先把内容拼接好了，最后统一添加到页面当中，只引发一次回流。 ## 注意事项