JS JSON

学了JS这么久，终于碰到了一个没听说过的东西-JSON。但是它又不是完全陌生的，和之前的知识联系得也很紧密。 下面且听我一一道来。

一、由来

学此知识点应有XLM基础，我们都知道，XML，优势非常多，但开发人员还是觉得这种微型的数据结构还是过于繁琐、冗长。由此，为了解决这个问题，JSON的结构化数据出现了。

二、语法

JSON和XML类型，都是一种结构化的数据表示方式。JSON的语法可以表示三种类型的值，分别是简单值、对象和数组。

1、简单值

100、"Lee"这两个量就是JSON的表示方法，一个是JSON数值，一个是JSON字符串。布尔值和null也是有效的形式。

2、对象

我们与JavaScript对象字面量进行比较。

JavaScript对象字面量表示法：

var box={       name:"Lee";       age:100};

而JSON中的对象表示法需要加上双引号，并且不存在赋值运算和分号：

{       "name":"Lee",                  "age":100}

3、数组

同上比较来进行学习

JavaScript数组字面量表示法：

var box=[100,'Lee',true];

而JSON中的数组表示法同样没有变量赋值和分号：

[100,"Lee",true]

当然，这三者也可以结合起来形成最常用的形式。

拓展：

一般情况下，我们可以把JSON结构数据保存到一个文本文件里。

模拟加载JSON文本文件的数据，并且赋值给变量：

var box='[{"name":"a","age":1},{"name":"b","age":2}]';

三、解析

早期采用的是eval()函数，但这种方法即不安全，可能会执行一些恶意代码。所以ECMAScript5对解析JSON的行为进行桂发，定义了全局对象JSON。那么我们就要考虑浏览器兼容性的问题了。这个完全没有必要担心，不支持的浏览器可以通过一个开源库json.js来模拟执行。那具体是怎样解析的呢？

JSON对象提供了两个方法，一个是将原生JavaScript值转为JSON字符串：stringfy()；另一个是将JSON字符串转换为JavaScript原生值：parse()。

例子：

1、parse()

var box='[{"name":"a","age":1},{"name":"b","age":2}]';   var json=JSON.parse(box);alert(json);

2、stringfy()

var box=[{name:'a',age:1},{name:'b',age:2}];        var json=JSON.stringify(box);alert(json);

四、序列化

以上面为基础，序列化JSON的过程中，stringify()方法还提供了二个参数，第一个参数可以是一个数组，也可以是一个函数，用于过滤结果。第二个参数表示是否在JSON字符串中保留缩进。如果不需要保留缩进，不填即可。如果不需要过滤结果，但又要保留缩进，则将过滤结果的参数设置为null。

例子：

1、参数为数组

var box=[{name:'a',age:1,height:177},{name:'b',age:2,height:188}];var json=JSON.stringify(box,['name','age'],4);alert(json);

2、参数为函数

var box=[{name:'a',age:1,height:177},{name:'b',age:2,height:188}];var json=JSON.stringify(box,function(key,value){switch(key){case 'name':return 'Mr.'+value;case 'age':return value+'岁';default:return value;;}},4);alert(json);

3、toJSON()方法

var box=[{name:'a',age:1,height:177,toJSON:function(){return this.name;}},{name:'b',age:2,height:188,toJSON:function(){return this.name;}}];var json=JSON.stringify(box);alert(json);

4、parse()与stringify()同理，就不再举例。

小结：

         知识里所谓的新旧知识是有联系的，在学习新的知识的时候与旧的知识相结合，会组建起一张记忆深刻的知识网。比较中学习更有利于知识的消化和吸收。JSON，你懂了吗？