web前端之JavaScript高级程序设计九：JSON

web前端之JavaScript高级程序设计九：JSON

关于 JSON，最重要的是要理解它是一种数据格式，不是一种编程语言。虽然具有相同的语法形式，但 JSON 并不从属于 JavaScript。而且，并不是只有 JavaScript 才使用 JSON，毕竟 JSON 只是一种数据格式。很多编程语言都有针对 JSON 的解析器和序列化器。

语法：

JSON 的语法可以表示以下三种类型的值。

 简单值：使用与 JavaScript 相同的语法，可以在 JSON 中表示字符串、数值、布尔值和 null。但 JSON 不支持 JavaScript 中的特殊值 undefined。

 对象：对象作为一种复杂数据类型，表示的是一组无序的键值对儿。而每个键值对儿中的值可以是简单值，也可以是复杂数据类型的值。

 数组：数组也是一种复杂数据类型，表示一组有序的值的列表，可以通过数值索引来访问其中的值。数组的值也可以是任意类型——简单值、对象或数组。

JSON 不支持变量、函数或对象实例，它就是一种表示结构化数据的格式，虽然与 JavaScript 中表示数据的某些语法相同，但它并不局限于 JavaScript 的范畴。

简单值：

最简单的 JSON 数据形式就是简单值。例如，下面这个值是有效的 JSON 数据：5，这是表示数字5。“Hello,JSON”，这是表示字符串“Hello,JSON”。布尔值和 null 也是有效的 JSON 形式。

对象：

JSON 中的对象与 JavaScript 字面量稍微有一些不同。下面是一个 JavaScript 中的对象字面量：

var person={
"name":"FZW",
"age":21,
};

json表示上述对象的方式如下：

{
"name":"FZW",
"age":21,
}

与 JavaScript 的对象字面量相比， JSON 对象有两个地方不一样。首先，没有声明变量（JSON 中没有变量的概念）。其次，没有末尾的分号（因为这不是 JavaScript 语句，所以不需要分号）。对象的属性必须加双引号，这在 JSON 中是必需的。属性的值可以是简单值，也可以是复杂类型值，因此可以像下面这样在对象中嵌入对象：

{
"name": "Nicholas",
"age": 29,
"school": {
"name": "Merrimack College",
"location": "North Andover, MA"
}
}

这个json里面嵌入了school对象，虽然里面包含着两个name属性，但是它们属于两个不同的对象，然而在同一个对象中是不能出现两个一样的属性的。

数组：

JSON 中的第二种复杂数据类型是数组。 JSON 数组采用的就是 JavaScript 中的数组字面量形式。例如，下面是 JavaScript 中的数组字面量：

var values = [25, “hi”, true];

在 JSON 中，可以采用同样的语法表示同一个数组：

[25, “hi”, true]

同样要注意， JSON 数组也没有变量和分号。把数组和对象结合起来，可以构成更复杂的数据集合：

[
{
"title": "Professional Ajax",
"authors": [
"Nicholas C. Zakas",
"Jeremy McPeak",
"Joe Fawcett"
],
edition: 1,
year: 2007
},
{
"title": "Professional JavaScript",
"authors": [
"Nicholas C. Zakas"
],
edition: 1,
year: 2006
}
]

解析与序列化：

JSON 之所以流行，拥有与 JavaScript 类似的语法并不是全部原因。更重要的一个原因是，可以把JSON 数据结构解析为有用的 JavaScript 对象。与 XML 数据结构要解析成 DOM 文档而且从中提取数据极为麻烦相比， JSON 可以解析为 JavaScript 对象的优势极其明显。就以上一节中包含一组图书的 JSON数据结构为例，在解析为 JavaScript 对象后，只需要下面一行简单的代码就可以取得第三本书的书名：

books[2].title

当然，这里是假设把解析 JSON 数据结构后得到的对象保存到了变量 books 中。再看看下面在 DOM结构中查找数据的代码：

doc.getElementsByTagName(“book”)[2].getAttribute(“title”)

JSON对象：

JSON 对象有两个方法： stringify()和 parse()。在最简单的情况下，这两个方法分别用于把JavaScript 对象序列化为 JSON 字符串和把 JSON 字符串解析为原生 JavaScript 值。

var book = {
title: "Professional JavaScript",
authors: [
"Nicholas C. Zakas"
],
edition: 3,
year: 2011
};
var jsonText = JSON.stringify(book);

这个例子使用 JSON.stringify()把一个 JavaScript 对象序列化为一个 JSON 字符串，然后将它保存在变量 jsonText 中。默认情况下， JSON.stringify()输出的 JSON 字符串不包含任何空格字符或缩进，因此保存在 jsonText 中的字符串如下所示：

{“title”:”Professional JavaScript”,”authors”:[“Nicholas C. Zakas”],”edition”:3,”year”:2011}

将 JSON 字符串直接传递给 JSON.parse()就可以得到相应的 JavaScript 值。例如，使用下列代码就可以创建与 book 类似的对象：

var bookCopy = JSON.parse(jsonText);

序列化选项：

实际上， JSON.stringify()除了要序列化的 JavaScript 对象外，还可以接收另外两个参数，这两个参数用于指定以不同的方式序列化 JavaScript 对象。第一个参数是个过滤器，可以是一个数组，也可以是一个函数；第二个参数是一个选项，表示是否在 JSON 字符串中保留缩进。单独或组合使用这两个参数，可以更全面深入地控制 JSON 的序列化。

过滤结果：

如果过滤器参数是数组，那么 JSON.stringify()的结果中将只包含数组中列出的属性。来看下面的例子。

var book = {
title: "Professional JavaScript",
authors: [
"Nicholas C. Zakas"
],
edition: 3,
year: 2011
};
var jsonText = JSON.stringify(book,["title","edition"]);

JSON.stringify()的第二个参数是一个数组，其中包含两个字符串： “title”和”edition”。这两个属性与将要序列化的对象中的属性是对应的，因此在返回的结果字符串中，就只会包含这两个属性：

{“title”:”Professional JavaScript”,”edition”:3}

如果第二个参数是函数，行为会稍有不同。为了改变序列化对象的结果，函数返回的值就是相应键的值。不过要注意，如果函数返回了undefined，那么相应的属性会被忽略。

var book = {
title: "Professional JavaScript",
authors: [
"Nicholas C. Zakas"
],
edition: 3,
year: 2011
};
var jsonText = JSON.stringify(book,function(key,value){
switch(key){
case "authors":
return value.join(",");
case "year":
return 5000;
case "edition":
return undefined;
default:
return value;
}
});

这里，函数过滤器根据传入的键来决定结果。如果键为”authors”，就将数组连接为一个字符串；如果键为”year”，则将其值设置为 5000；如果键为”edition”，通过返回 undefined 删除该属性。最后，一定要提供 default 项，此时返回传入的值，以便其他值都能正常出现在结果中。实际上，第一次调用这个函数过滤器，传入的键是一个空字符串，而值就是 book 对象。序列化后的 JSON 字符串如下所示：

{“title”:”Professional JavaScript”,”authors”:”Nicholas C. Zakas”,”year”:5000}

字符串缩进：

JSON.stringify()方法的第三个参数用于控制结果中的缩进和空白符。如果这个参数是一个数值，那它表示的是每个级别缩进的空格数。例如，要在每个级别缩进 4 个空格

var book = {
title: "Professional JavaScript",
authors: [
"Nicholas C. Zakas"
],
edition: 3,
year: 2011
};
var jsonText = JSON.stringify(book,null,4);

toJSON()方法：

有时候， JSON.stringify()还是不能满足对某些对象进行自定义序列化的需求。在这些情况下，可以给对象定义 toJSON()方法，返回其自身的 JSON 数据格式。原生 Date 对象有一个 toJSON()方法，能够将 JavaScript的 Date 对象自动转换成 ISO 8601日期字符串（与在 Date 对象上调用 toISOString()的结果完全一样）。

可以为任何对象添加 toJSON()方法

var book = {
title: "Professional JavaScript",
authors: [
"Nicholas C. Zakas"
],
edition: 3,
year: 2011,
toJSON:function(){
return this.title;
}
};
var jsonText=JSON.stringify(book);

以上代码在 book 对象上定义了一个 toJSON()方法，该方法返回图书的书名。与 Date 对象类似，这个对象也将被序列化为一个简单的字符串而非对象。可以让 toJSON()方法返回任何值，它都能正常工作。比如，可以让这个方法返回 undefined，此时如果包含它的对象嵌入在另一个对象中，会导致它的值变成 null，而如果它是顶级对象，结果就是 undefined。toJSON()可以作为函数过滤器的补充，因此理解序列化的内部顺序十分重要。假设把一个对象传入 JSON.stringify()，序列化该对象的顺序如下。

(1) 如果存在 toJSON()方法而且能通过它取得有效的值，则调用该方法。否则，返回对象本身。

(2) 如果提供了第二个参数，应用这个函数过滤器。传入函数过滤器的值是第(1)步返回的值。

(3) 对第(2)步返回的每个值进行相应的序列化。

(4) 如果提供了第三个参数，执行相应的格式化。

无论是考虑定义 toJSON()方法，还是考虑使用函数过滤器，亦或需要同时使用两者，理解这个顺序都是至关重要的。

解析选项：

JSON.parse()方法也可以接收另一个参数，该参数是一个函数，将在每个键值对儿上调用。为了区别 JSON.stringify()接收的替换（过滤）函数（replacer），这个函数被称为还原函数（reviver），但实际上这两个函数的签名是相同的——它们都接收两个参数，一个键和一个值，而且都需要返回一个值。

如果还原函数返回undefined，则表示要从结果中删除相应的键；如果返回其他值，则将该值插入到结果中。在将日期字符串转换为 Date 对象时，经常要用到还原函数。例如：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>解析选项</title>
<script type="text/javascript">
var book = {
title: "Professional JavaScript",
authors: [
"Nicholas C. Zakas"
],
edition: 3,
year: 2011,
releaseDate:new Date(2011,11,1)
};
var jsonText=JSON.stringify(book);
var bookCopy=JSON.parse(jsonText,function(key,value){
if(key=="releaseDate"){
return new Date(value);
}else{
return value;
}
});
alert(bookCopy.releaseDate.getFullYear());
</script>
</head>
<body>

</body>
</html>

以上代码先是为 book 对象新增了一个 releaseDate 属性，该属性保存着一个 Date 对象。这个对象在经过序列化之后变成了有效的 JSON 字符串，然后经过解析又在 bookCopy 中还原为一个 Date对象。还原函数在遇到”releaseDate”键时，会基于相应的值创建一个新的 Date 对象。结果就是bookCopy.releaseDate 属性中会保存一个 Date 对象。正因为如此，才能基于这个对象调用getFullYear()方法。