Javascript-JSON

2018-02-02 本文已影响0人 Tom36

一、语法

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

简单值：使用与JavaScript 相同的语法，可以在JSON 中表示字符串、数值、布尔值和null。但JSON 不支持JavaScript 中的特殊值undefined。
对象：对象作为一种复杂数据类型，表示的是一组无序的键值对儿。而每个键值对儿中的值可以是简单值，也可以是复杂数据类型的值。
数组：数组也是一种复杂数据类型，表示一组有序的值的列表，可以通过数值索引来访问其中的值。数组的值也可以是任意类型——简单值、对象或数组。

1、简单值

JSON表示字符串的方式

"Tom"

2、对象

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

var person = {
    name:"Tom",
    age:26
};

JSON中的对象：

//JSON中的对象
{
    "name":"Tom",
    "age":26
}

JSON中的对象与JS中的对象相比较有以下三个不同点：
1、没有声明变量（JSON 中没有变量的概念）
2、没有末尾的分号（因为这不是JavaScript 语句，所以不需要分号）。
3、对象的属性必须加双引号

3、数组

JSON 数组采用的就是JavaScript 中的数组字面量形式

var values = [24, "hi", true];

JSON中的数组：

// JSON中的数组
[23, "hi", true]

同样要注意，JSON 数组也没有变量和分号。

二、解析和序列化

1、把JavaScript对象序列化成JSON字符串

var book = {
    title:"Professional JavaScript",
    authors:["Tom"],
    edition:5,
    year:2015
};
var jsonText = JSON.stringify(book);

JSON.stringify(object[, replacer][, space])
这个方法接受三个参数
第一个参数是接收的对象，
第二个参数是个过滤器，可以是一个数组，也可以是一个函数。
第三个参数是一个选项，表示是否在JSON 字符串中保留缩进

过滤结果

当第二个参数是数组的时候,即如果过滤器参数是数组，那么JSON.stringify()的结果中将只包含数组中列出的属性

var book = {
    title:"Professional JavaScript",
    authors:["Tom"],
    edition:5,
    year:2015
};
var jsonText = JSON.stringify(book,["title","year"]);
console.log(jsonText); //{"title":"Professional JavaScript","year":2015}

当第二个参数是函数的时候

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
    </head>
    <body>
<script>
var book = {
    title:"Professional JavaScript",
    authors:["Tom","Jerry"],
    edition:5,
    year:2015
};
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;
    }
});
console.log(jsonText); //{"title":"Professional JavaScript","authors":"Tom,Jerry","year":5000}
</script>
    </body>
</html>

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

var book = {
    "title":"Professional JavaScript",
    "authors":["Tom"],
    edition:5,
    year:2015
};
var jsonText = JSON.stringify(book, null, 4);
console.log(jsonText);

{
    "title": "Professional JavaScript",
    "authors": [
        "Tom"
    ],
    "edition": 5,
    "year": 2015
}

toJSON

var book = {
    "title":"Professional JavaScript",
    "authors":["Tom"],
    edition:5,
    year:2015,
    toJSON:function(){
        return this.title;
    }
};
var jsonText = JSON.stringify(book);  
console.log(jsonText);  //"Professional JavaScript"

它是顶级对象，结果就是undefined。
toJSON()可以作为函数过滤器的补充，因此理解序列化的内部顺序十分重要。假设把一个对象传入JSON.stringify()，序列化该对象的顺序如下。
(1) 如果存在toJSON()方法而且能通过它取得有效的值，则调用该方法。否则，返回对象本身。
(2) 如果提供了第二个参数，应用这个函数过滤器。传入函数过滤器的值是第(1)步返回的值。
(3) 对第(2)步返回的每个值进行相应的序列化。
(4) 如果提供了第三个参数，执行相应的格式化。

把JSON字符串解析成Javascript对象

JSON.parse()方法

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
    </head>
    <body>
<script>
    var book = {
        "title":"Professional JavaScript",
        "authors":["Tom","Jerry"],
        edition:5,
        year:2015,
        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()); //2011
</script>
    </body>
</html>