JSON

JSON 是一种数据格式，用于传输结构化数据，多种计算机语言都有JSON的解析器和序列化器。

JavaScript中的JSON

1、数据类型

1）简单值

可以是 字符串，数值，布尔值，null，但不支持 js 中的 undefined

如：4，“hello”，true

2）对象

表示的是一组无序的键值对，每个键值对中的的值可以是简单值，或是复杂数据类型的值；对象中的键必须加双引号

{
    "name":"Tom",
    "age":26,
    "school":{
        "name":"schoolName",
        "loaction":"schoolLocation"
    },
    "colors":[
        "red",
        "yellow"
    ]
}

3）数组

表示一组有序的值，可以通过数字索引来访问。数组的值可以是简单值，或者是复杂数据类型的值

[
    23,
    "hello",
    {
        "title":"t1",
        "authors":"a1",
        "colors":["red","yellow"]
    },
    {
        "title":"t2",
        "authors":"a2",
        "colors":["red","yellow"]
    }
]

 

2、解析与序列化

早期的 JSON解析器基本上就是使用 JavaScript 的 eval() 函数，但 这个函数可能会有风险。

在 ECMAScript 5 中定义了 JSON 对象，用于处理 json 数据。JSON 是个全局对象，并包含两个方法 stringify() 和 parse() ，分别将 js 对象序列化成JSON字符串和 将JSON 字符串解析为 JavaScript 值

1）JSON.stringify(Object [, filter [, indent] ])：参数--》将要序列化的js对象，过滤器，序列化是每个级别的缩进空格数。序列化时 js 对象的所有函数和原型成员都会被忽略，并且值为 undefined 的任何属性也会被跳过

var person = {
            "name":"Tom",
            "age":26,
            "school":{
                "name":"schoolName",
                "loaction":"schoolLocation"
            },
            "colors":[
                "red",
                "yellow"
            ]
        };

    //1一般序列化
    var PText = JSON.stringify(person);
    console.log(PText);  // {"name":"Tom","age":26,"school":{"name":"schoolName","loaction":"schoolLocation"},"colors":["red","yellow"]}

    //2 加上过滤器，数组过滤器，序列化结果只会包含数组过滤器中的字段
    PText = JSON.stringify(person,["name","school"]);
    console.log(PText); // {"name":"Tom","school":{"name":"schoolName"}}

    //3 加上过滤器，函数过滤器，每个属性都会执行
    PText = JSON.stringify(person,function(key,value){
        switch (key){
            case "name":
                return "name is "+ value;
            case "color":
                return value.join(".");
            case "school":
                return undefined;
            default:
                return value;
        }

    });
    console.log(PText); // {"name":"name is Tom","age":26,"colors":["red","yellow"]}, 跳过 "school" 字段，因为值为undefined

    //4缩进序列化，换行缩进格式化
    var PText = JSON.stringify(person,null,4);
    console.log(PText);
    /*
    {
        "name": "Tom",
        "age": 26,
        "school": {
            "name": "schoolName",
            "loaction": "schoolLocation"
        },
        "colors": [
            "red",
            "yellow"
        ]
    }
    * */

 

还可以在 js 对象中定义toJSON()方法，返回自定义数据再序列化

  var person = {
            "name":"Tom",
            "age":26,
            "school":{
                "name":"schoolName",
                "loaction":"schoolLocation"
            },
            "colors":[
                "red",
                "yellow"
            ],
            toJSON:function(){
                return {
                        "school":{
                            "name":"schoolName",
                            "loaction":"schoolLocation"
                        },
                        "colors":[
                            "red",
                            "yellow"
                        ]};
            }
        };
 var PText = JSON.stringify(person); // {"school":{"name":"schoolName","loaction":"schoolLocation"},"colors":["red","yellow"]}

 

JSON.Stringify() 函数序列化对象的步骤如下：

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

2）如果提供了第二个参数，应用过滤器对步骤1得到的值进行过滤

3）对步骤2 得到的值进行序列化

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

 

2）JSON.parse(JSONString [, reviver])：参数--》需要转化的JSON字符串，还原函数。如果给出的字符串不是有效的JSON则会报错。

还原函数也接受两个参数键和值，如果还原函数返回 undefined 则表示要从结果删除相应的键。

var person = {
            "name":"Tom",
            "age":26,
            "school":{
                "name":"schoolName",
                "loaction":"schoolLocation"
            },
            "colors":[
                "red",
                "yellow"
            ],
            "date":new Date(2019,6,20)
        };

    var PText = JSON.stringify(person);
    var person2 = JSON.parse(PText);
    var person3 = JSON.parse(PText,function(key,value){
        if(key == "date"){
            return new Date(value);
        }else{
            return value;
        }
    });
    console.log(person);
    /*
    age: 26
    colors: (2) ["red", "yellow"]
    date: Sat Jul 20 2019 00:00:00 GMT+0800 (中国标准时间) {}
    name: "Tom"
    school: {name: "schoolName", loaction: "schoolLocation"}
    * */

    console.log(person2);
    /*
    age: 26
    colors: (2) ["red", "yellow"]
    date: "2019-07-19T16:00:00.000Z"
    name: "Tom"
    * */

    console.log(person3);
    /*
    age: 26
    colors: (2) ["red", "yellow"]
    date: Sat Jul 20 2019 00:00:00 GMT+0800 (中国标准时间) {}
    name: "Tom"
    school: {name: "schoolName", loaction: "schoolLocation"}
    * */