JSON简单了解

var obj = {
            name:"小茗同学",
            age: 21,
            job:["跑步","游泳"],
            str:{
                book:"猫和老鼠",
                web:"Google Chrome"
            },
            arr:[{look:"海绵宝宝"},{eat:"有馅馒头"},{drink:"脉动"}]
        }
        var j = JSON.stringify(obj);
        console.log(j);

使用字符字面量创建一个对象obj,键值对形式表示-->key : value

使用JSON.stringify(object);将JS对象序列化成JSON对象,结果:

 

 观察结果属性名都加上了双引号

 

要想体验更好那么给JSON.stringify()传入参数

JSON.stringify(obj,null," ");

观察结果:

 

JSON.stringify()有三个参数:

1.value,要序列化成JSON字符串的值

2.replacer(可选):可以是函数,数组,null,

如果传入的是函数,那么序列化的值都要经过函数的转化和处理.

如果是数组,那么只有在这个数组中的属性名才会被序列化到最终的JSON字符串里,

如果是null,那么将全部属性都序列化成为JSON字符串

3.space(可选):这里只缩进多少字符

如是传入数字,就代表缩进几个字符---->JSON.stringify(obj,null,2)--->表示缩进了两个字符.这里最高可传入10

如果传入字母,那么缩进的空格用字母表示 ---->JSON.stringify(obj,null,"a")观察:

 

 

利用第二个参数控制筛选对象的值

JSON.stringify(obj,["name","job"],2);

如果传入一个函数

 

var obj = {
            name:"小茗同学",
            age: 21,
            job:["跑步","游泳"],
            str:{
                book:"猫和老鼠",
                web:"Google Chrome"
            },
            arr:[{look:"海绵宝宝"},{eat:"有馅馒头"},{drink:"脉动"}]
        }
        function Con(key,value){
            if(typeof value === 'string'){
                return value.toUpperCase();
            }
            return value;
        }
        var j = JSON.stringify(obj,Con,2);
        console.log(j);

 

观察结果

 

 

只有"web":"GOOGLE CHROME"变为大写.

精准控制序列化,可以使用toJSON()方法控制序列化的值

var obj = {
            name:"小茗同学",
            age: 21,
            job:["跑步","游泳"],
            str:{
                book:"猫和老鼠",
                web:"Google Chrome"
            },
            arr:[{look:"海绵宝宝"},{eat:"有馅馒头"},{drink:"脉动"}],
            toJSON : function(){
                return {
                    "str" : this.str,
                    "arr" : this.arr
                };

            }
        }
var j = JSON.stringify(obj,null,2);
        console.log(j);

调用toJSON方法的返回值会被序列化成为JSON字符串.

 

拿到一个JSON格式的字符串，我们直接用JSON.parse()把它变成一个JavaScript对象:

var obj = {
            name:"小茗同学",
            age: 21,
            job:["跑步","游泳"],
            str:{
                book:"猫和老鼠",
                web:"Google Chrome"
            },
            arr:[{look:"海绵宝宝"},{eat:"有馅馒头"},{drink:"脉动"}],
        }
        var jso = JSON.stringify(obj);//序列化为JSON字符串
        console.log(JSON.parse(jso));

先是把obj对象序列化为JSON字符串,然后再用JSON.parse()方法转化为JS对象.

 

JSON.parse()也可以接受一个函数,实际上这个函数和JSON.stringify()方法中的函数签名都是相同的---->它们都接受两个参数,一个是键和一个值,而且都需要返回一个值.

var obj = {
                    "name" : "小茗同学",
                    "age" : "twenty-one",
                    "hobby" : "book",
                    "interest" : "tansoole",
                    releaseDate : new Date(2018, 05 , 10)
                };
        var j = JSON.stringify(obj);
        var bookCopy = JSON.parse(j,function(key,value){
            if(key == 'releaseDate'){
                return new Date(value);
            }else{
                return value;
            }
        })
        console.log(bookCopy.releaseDate.getFullYear());

为obj对象新增一个 releaseDate属性,该属性保存着一个Date对象,这个对象在经过序列化之后变成有效的JSON字符串,然后经过解析又在bookCopy中还原成为一个Date对象

 在函数遇到releaseDate键时,会基于相应的值创建一个新的Date对象,bookCopy.releaseDate属性会保存一个Data对象.也是因此,才能调用getFullYear()方法

 

存储用户创建的一个对象,并且,即使在浏览器关闭后仍能恢复该对象.

var session = {
            "screens" : [],
            "state" : true
        };
        session.screens.push({"name":"screensaA","width":450,"height":120});
        session.screens.push({"name":"screensaB","width":750,"height":220});
        session.screens.push({"name":"screensaC","width":150,"height":320});
        session.screens.push({"name":"screensaD","width":350,"height":420});
        session.screens.push({"name":"screensaE","width":750,"height":520});
        session.screens.push({"name":"screensaF","width":650,"height":620});

        //使用JSON.stringify()转化为json字符串
        //然后使用localStroage 保存在session
        localStorage.setItem("session",JSON.stringify(session));
        //然后转换通过JSON.stringify生成的字符串,该字符串以JSON格式保存在localStroage里
        var restoredSession = JSON.parse(localStorage.getItem("session"));
        console.log(restoredSession);