JSON的解析和序列化

让学习“上瘾”,成为更好的自己!!!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>解析和序列化</title>
    <script>
    /*
        JSON数据结构可以解析为JavaScript对象!!
        JavaScript对象可以序列化成JSON字符串!!
        1,JSON对象
            a, ECMAScript 5对解析JSON的行为进行规范,定义了全局对象JSON
            b, 两个方法:stringify(): JavaScript对象可以序列化成JSON字符串
                        parse():JSON数据结构可以解析为JavaScript对象



        2,序列化选项(见下)
            JSON.stringify():除了要序列化的JavaScript对象外,还另外接收两个参数
                             --> 第一个参数是“过滤器”,可以是数组,函数
                             --> 第二个参数是“选项”,表示是否在JSON字符串中保留缩进



        3,解析选项(见下)
              JSON.parse():第一个参数为JSON字符串, 第二个为还原函数               


    
    */
    // stringify(): JavaScript对象可以序列化成JSON字符串
    
        // var book = {
        //     title:'predfasd JavaScript',
        //     author:[
        //         'kai',
        //         'lice'
        //     ],
        //     edition:3,
        //     year:2017
        // };
        // var jsonText = JSON.stringify(book);
        // console.log(jsonText);  
        // 【注意】 
        //   1,默认情况下,JSON.stringify()输出的JSON字符串不包括任何空字符或缩进
        //   2,在序列化JavaScript对象时,所有函数以及原型成员都会被忽略,不体现在结果中
        //   3,值为undefined的任何属性也都会被跳过。结果中都是值为有效的JSON 数据类型的实例属性

        // parse():JSON数据结构可以解析为JavaScript对象
        // var bookCopy = JSON.parse(jsonText);
        // console.log(bookCopy);
        // 这里的book和bookCopy是两个独立的,没有任何关系的对象


        // 2,序列化选项
        // a, 过滤结果
        // (1) 过滤器参数 --> 数组 ,结果将只包含数组中列出的属性
        // var book = {
        //     title:'predfasd JavaScript',
        //     author:[
        //         'kai',
        //         'lice'
        //     ],
        //     edition:3,
        //     year:2017
        // };  
        // var jsonText = JSON.stringify(book,['title', 'edition']);
        // console.log(jsonText);  // {"title":"predfasd JavaScript","edition":3}
        // console.log(typeof jsonText);  // string

        // (2) 过滤器参数 --> 过滤函数,接收两个参数,属性名和属性值。
        //                         可以根据属性名知道应该如何处理要序列化的对象中的属性
        //                  要序列化的对象中的每一个属性都要经过过滤器
        // var book = {
        //     title:'predfasd JavaScript',
        //     author:[
        //         'kai',
        //         'lice'
        //     ],
        //     edition:3,
        //     year:2017
        // };  

        // var jsonText = JSON.stringify(book, function(key, value){
        //     switch(key){
        //         case 'author':
        //             return value.join(',');
        //         case 'year':
        //             return 5000;
        //         case 'edition':
        //             return undefined;
        //         default:       // 这里一定要提供default 项,此时返回传入的值,以便其他值都能正常出现的结果中
        //             return value;
        //     }

        //     });
        // console.log(jsonText);
        
        // b, 字符串缩进
        // JSON.stringify()方法的第三个参数用于控制结果中的缩进和空白符,最多10个空格
        // (1) 参数是数值,表示每个级别缩进的空格数
        // var book = {
        //     title:'predfasd JavaScript',
        //     author:[
        //         'kai',
        //         'lice'
        //     ],
        //     edition:3,
        //     year:2017
        // };  
        // var jsonText = JSON.stringify(book, null, 4);
        // console.log(jsonText);
        // 结果中,JSON.stringify()也在字符串中插入换行符以提高可读性

        // (2) 参数是字符串,则这个字符串将在JSON输出结果的字符串中被用作“缩进字符” ,最长10个字符
        //    【建议】 在使用字符串的情况下,可以将缩进字符设置为制表符,或者两个短划线的任意字符
        // var book = {
        //     title:'predfasd JavaScript',
        //     author:[
        //         'kai',
        //         'lice'
        //     ],
        //     edition:3,
        //     year:2017
        // };  
        // var jsonText = JSON.stringify(book, null, '--');
        // console.log(jsonText);


        // c, toJSON()方法:返回调用对象自身的JSON数据格式,任意对象都可以添加toJSON()方法
        // var book = {
        //     title:'predfasd JavaScript',
        //     author:[
        //         'kai',
        //         'lice'
        //     ],
        //     edition:3,
        //     year:2017,
        //     toJSON:function(){
        //         return this;    // 这里,book对象被序列化成一个简单的字符串而不是对象
        //         // return this.title;
        //     }
        // };  
        // var jsonText = JSON.stringify(book);
        // console.log(jsonText);  // "predfasd JavaScript"
        // console.log(typeof jsonText);
        // 对于包含了toJSON()方法的对象:
        //  1, 包含该对象嵌入在另一个对象中,则会导致该对象的值为null
        //  2,  如果给对象是顶级对象(window对象),则结果为undefined
            // color = 'red';
            // toJSON = function(){
            //     return this;
            // }
            // console.log(window.color);
            // var jsonText = JSON.stringify();
            // console.log(jsonText);  // undefined
        
        // toJSON()作为函数过滤器的补充
        // 一个对象传入JSON.stringify(),此时,序列化该对象的顺序为:
        // toJSON()  --> 第二个参数 --> 第三个参数
       

        // 解析选项
        // 第二个参数:还原函数
        // 返回undefined  --> 从结果中删除相应的键
        // 返回其他值  --> 将该值插入结果中
        var book = {
            title:'predfasd JavaScript',
            author:[
                'kai',
                'lice'
            ],
            edition:3,
            year:2017,
            releaseDate: new Date(2011, 11, 1)
        };  

        var jsonText = JSON.stringify(book);
        console.log(jsonText);

        var bookCopy = JSON.parse(jsonText, function(key, value){
            if (key == 'releaseDate'){
                return new Date(value);

            }else{
                return value;
            }

        });

        console.log(bookCopy);
        console.log(bookCopy.releaseDate.getFullYear());  // 2011
        var date = new Date("2011-11-30T16:00:00.000Z");
        console.log(date);
        console.log(typeof date);



    
    </script>
</head>
<body>
    
</body>
</html>
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值