Javascript JSON

JSON只是一种字符串数据格式，使用它的不仅仅是Javascript。

语法

JSON可以表示三种类型的值：简单值、对象、数组

简单值

以下是JSON可以辨识的简单值例子：

5
"Hello World!"
false
null

*注意：
1. undefined不被支持
2. 字符串必须使用双引号，单引号会导致语法错误

对象

在Javascript中，我们可以用对象字面量的方式创建一个对象：

var person = {
    name: "Sue",
    age:  "18"
}

但JSON要求给属性加双引号，上述对象转换成合法的JSON字符串格式：

{
    "name": "Sue",
    "age":  "18"
}

*注意：
1. 属性加双引号
2. 没有变量声明
3. 没有末尾分号
4. 属性的值可以是前面介绍的简单值，也可以是对象或数组
5. 2、3点同样适用于简单值和数组

数组

在Javascript中，我们可以创建一个如下数组：

var names = ["Sue", "Jane", "Ben"]

上述数组转换成合法的JSON字符串格式：

["Sue", "Jane", "Ben"]

我们可以将数组、简单值、对象嵌套使用，创建更加复杂的JSON字符串，比如：

{
    "teachers": [
        { "name": "Sue", "age": 18, "students": [1, 45, 60]},
        { "name": "Ben", "age": 25, "students": [2, 31, 40]}
    ],
    "students": [
        { "id": 1, "name": "Jane"},
        { "id": 2, "name": "Lee"}
    ]
}

解析与序列化

在JSON之前，web传输格式化数据都是使用XML，Javascript要想拿到XML中的数据，要先将其转换成DOM，而后从中提取数据，相比之下，JSON就显得非常简单。

eval

早期解析JSON一般使用eval()，比如：

eval({"name": "Sue"})
{name: "Sue"}

但这种方式存在风险，因为服务器返回的数据很有可能存在恶意代码，只要被解析成合法的Javascript语法，就会被执行，比如：

eval("alert('Sue')")

因此不建议使用eval()来解析JSON字符串。
早期浏览器中，可以使用https://github.com/douglascrockford/JSON-js来解析JSON字符串。

JSON对象

在IE 8+、 Firefox 3.5+、 Safari 4+、 Chrome、Opera 10.5+中，ECMAScript定义了全局对象JSON。

stringify

用于把Javascript对象序列化为JSON字符串。
*注意：
1. 值为undefined的属性会被忽略
2. 函数及原型成员会被忽略
3. 不包含缩进和空格字符（比如逗号后的空格）

举个例子：

function Person(name, secret) {
    this.name = name;
    this.secret = secret;
    this.makeFriends = function() {
        return this.secret;
    }
}
Person.prototype.sayHi = function() {
    return this.name;
}
var me = new Person("Sue", undefined)
me.makeFriends()
// undefined
me.sayHi()
// "Sue"
var meJSON = JSON.stringify(me);
// "{"name":"Sue"}"

上述例子中，我们创建了一个Person实例me，其中secret属性为undefined，包含makeFriends方法和一个原型成员sayHi，这些都没有被添加到生成的JSON字符串中。
这个方法可以使我们不必在乎Javascript语法与JSON语法的差异，尽管创建合法的Javascript对象。

parse

用于把JSON字符串序列化为Javascript值。

var meCopy = JSON.parse(meJSON)
// {name: "Sue"}

*注意：me与meCopy是两个独立的对象，实际编程中，可以使用stringify parse实现对象的拷贝。

stringify 选项

JSON.stringify()的第一个参数是要序列化的对象，后面还可以加两个参数，分别是过滤器和选项。
1. 过滤器
过滤器可以是数组，也可以是函数，如果是数组，JSON.stringify()的结果中将保留数组中的属性，比如：

function Person(name, age, secret) {
    this.name = name;
    this.age = age;
    this.secret = secret;
}
var me = new Person("Sue", 18, "none");
var meJSON = JSON.stringify(me, ["name", "age"])
meJSON
// "{"name":"Sue","age":18}"

如果过滤器是一个函数，会给这个函数传入两个参数，分别是属性名和属性值，根据需要返回要添加到JSON中的属性值，如果为undefined，会移除该属性，比如：

var me = new Person("sue", 25, ["girl", "1024", "Beauty"])
function process(key, value) {
    switch(key) {
        case "name":
            return value.charAt(0).toUpperCase() + value.slice(1);
        case "age":
            return 18;
        case "secret":
            return undefined;
        default:
            return value;
    }
}
var meJSON = JSON.stringify(me, process)
meJSON
// "{"name":"Sue","age":18}"

1. 字符串缩进
   第三个参数用于控制结果中的缩进和空白符，如果这个参数是一个数值，那么它表示每个级别缩进的空格数，比如：

var meJSON = JSON.stringify(me, process, 4)
undefined
meJSON
"{
    "name": "Sue",
    "age": 18
}"

*注意：
1. 只要传入了缩进数，结果就会包含换行符，因为只缩进却不换行没什么意义。
2. 最大缩进为10，如果超过10， 转换为10

如果第三个参数是一个字符串，那么将使用这个字符串作为缩进，这个字符串可以是制表符或其他任意字符，如果超过10位，则仅前10位有效，比如：

var meJSON = JSON.stringify(me, process, "\t")
meJSON
"{
    "name": "Sue",
    "age": 18
}"

var meJSON = JSON.stringify(me, process, "****")
meJSON
"{
****"name": "Sue",
****"age": 18
}"

1. toJSON
   当需要为某种对象添加自定义的序列化方法时，可以给对象定义toJSON()方法，比如：

Person.prototype.toJSON = function() {
    return this.name;
}
var me = new Person("sue", 25, ["girl", "1024", "Beauty"])
JSON.stringify(me, process, "\t")
// ""sue""

上述例子中，我们在Person的原型中添加了toJSON方法，发现调用JSON.stringify时，只序列化了name属性。
序列化的内部顺序如下：
No. 1 如果存在toJSON()，而且它能返回有效的值，则调用它，否则，返回对象本身
No. 2 如果提供了过滤器参数，则基于第一步返回的值调用过滤器
No. 3 序列化第二步的返回值
No. 4 如果提供了缩进，则格式化第三步的返回值

parse 选项

JSON.parse()可以接收第二个参数，这个参数是一个还原函数，将在每个键值对上调用，这个函数接收两个参数，分别是键和值，返回处理过的值，比如：

var birth = new Date(1993, 10, 24)
JSON.stringify(birth)
// ""1993-11-23T16:00:00.000Z""
var birthJSON = JSON.stringify(birth)
var birthCopy = JSON.parse(birthJSON, function(key, value) {
    return new Date(value)
})
birthCopy.getFullYear()
// 1993