• JSON.stringify(), JSON.parse(),toJSON()方法使用


    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>JSON.stringify(),
    JSON.parse(),toJSON()方法使用</title>
    </head>
    <body>
    <script>
    /*
    JSON.stringify(),将value(Object,Array,String,Number...)序列化为JSON字符串
    JSON.parse(), 将JSON数据解析为js原生值
    toJSON(),作为JSON.stringify中第二个参数(函数过滤器)补充
    */

    // JSON.stringify()
    /*@specify : serialization(序列化)
    @method : JSON.stringify(value,filter,indent);
    @return : JSON字符串

    @param : value {type :String|Object|String|Number|Boolean|null} {explain :传入的类型可以是列出的這些}
    @param : filter : {type : []|{}} {explain :过滤器可以是个数组,也可以是个函数}
    @param : indent : {type : Number | 特殊符号} {explain :如果是数字则代表空白符的个数,最多10个;也可以直接传入缩进的符号}
    */

    var gather = {
    id : 1314,
    name : 'pom',
    infor : {
    age : 20,
    sex : 'man',
    marry : false,
    identity : 622421,
    habit : ['篮球','台球','乒乓球','游戏',true]
    },
    family : ['妈妈','爸爸','弟弟'],
    likeGames : ['PCgame','Netgame']
    };
    var jsonText = JSON.stringify(gather,null,4);
    console.log(jsonText);
    /*{
    "id": 1314,
    "name": "pom",
    "infor": {
    "age": 20,
    "sex": "man",
    "marry": false,
    "identity": 622421,
    "habit": [
    "篮球",
    "台球",
    "乒乓球",
    "游戏",
    true
    ]
    },
    "family": [
    "妈妈",
    "爸爸",
    "弟弟"
    ],
    "likeGames": [
    "PCgame",
    "Netgame"
    ]
    }*/
    console.log(typeof(jsonText));//string
    // 第二个参数是数组,只会序列化返回数组里列出的名称
    var jsonText1 =JSON.stringify(gather,['id','family'],'=');
    console.log(jsonText1);
    /*{
    ="id": 1314,
    ="family": [
    =="妈妈",
    =="爸爸",
    =="弟弟"
    =]
    }
    */
    var jsonText2 = JSON.stringify(gather,function(key,val){
    switch(key){
    case 'id' :
    return 'id is ' + val;
    case 'family' :
    return val.join('@');
    case 'infor' :
    //infor的val 还可以使用JSON.stringify()
    //return JSON.stringify(val,["age","sex"]);
    return Object.prototype.toString.call(val).slice(8, -1);//Object
    // return Object.prototype.toString.call(val);//[object Object]
    case 'likeGames' :
    //通过返回undefined删除该属性
    return undefined;
    //一定要default,以便传入的其他值能正常的返回到序列化结果中。
    default :
    return val;
    }
    },'#');
    console.log(jsonText2);
    /*{
    #"id": "id is 1314",
    #"name": "pom",
    #"infor": "Object",
    #"family": "妈妈@爸爸@弟弟"
    }*/
    // toJSON()
    /*@specify :JSON.stringify()不能满足对某些对象进行自定义序列化的需求,可以通过对象那个上调用toJSON()方法
    @method : date.toJSON()
    @return : 返回任何序列化的值。*/

    // JSON.parse() ,eval_r() 也可以解析并返回js对象和数组等。但IE8以下浏览器会有安全隐患。
    /*@specify : 将json字符串解析为原生的javascript值。
    @method : JSON.parse(val,replacer)
    @param : val{type : String} {explain : 需要解析的json字符串}
    @param : replacer {type : function}
    {explain :和JSON.stringify()第二个参数类似,接受2个参数,key,val,不过是用来还原json串的函数}*/
    var products = {
    name:'aa',
    age:'23',
    toJSON:function(){
    return this.name;
    }
    }
    var prostr = JSON.stringify(products);
    console.log(prostr);//'aa'
    //obj中的relaeseDate对象序列化之后成了有效的json串
    var obj = {
    title : '对象的标题',
    type : 'primitive' ,
    releaseDate : new Date(2012,03,1)
    };
    //转化为json串
    var o = JSON.stringify(obj);
    console.log(o);//{"title":"对象的标题","type":"primitive","releaseDate":"2012-03-31T16:00:00.000Z"}
    //在parsedO中还原为一个Date对象(会基于相应的值创建一个新的Date对象,结果parsedO.releaseDate属性中保存了一个Date对象)
    var parsedO = JSON.parse(o,function(k,v){
    if(k == 'releaseDate'){
    return new Date(v);
    }else{
    return v;
    }
    });
    console.log(parsedO);
    /*Object {title: "对象的标题", type: "primitive", releaseDate: Sun Apr 01 2012 00:00:00 GMT+0800 (中国标准时间)}*/
    //可以调用getFullYear()
    console.log(parsedO.releaseDate.getFullYear()); //2012
    /*执行原理:
    toJSON()作为JSON.stringify中第二个参数(函数过滤器)补充,理解内部顺序很重要。
    假设把一个对象传入JSON.stringify() 序列化对象的顺序如下:
    (1)如果存在toJSON()方法而且能通过它取得有效的值,则调用该方默认顺序执行序列化
    (2)如果提供了第二个参数,应用这个函数过滤器,传入的函数过滤器)步返回的值。
    (3)对第(2)步 返回的每个值进行相应的序列化。
    (4)如果提供了第三个参数,执行相应的格式化操作。*/
    </script>
    </body>
    </html>

  • 相关阅读:
    .ellipsis 超过的部分显示省略号
    js 里面上一页和下一页
    CSS让你的IE浏览器崩溃(Crash your IE)作者:雪候鸟 来源: 风雪之隅
    元素居中显示
    jquery Carousel
    tabs 选择加载
    弹出窗
    下拉广告`
    opacity
    小波分析实验: 实验1 连续小波变换
  • 原文地址:https://www.cnblogs.com/studyh5/p/9229591.html
Copyright © 2020-2023  润新知