• json初接触


    <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>Document</title>
    </head>
    <body>
        
    </body>
    <script>
        //json的语法可以表示简单值(除undefined)、数组(有序的值的列表,可通过索引访问其中的项的值)、对象(无序键值对)类型的值
        // 注意对象的键也必须带双引号
        var jsonObj1 = {
            "name":"harold",
            "age":"20",
            "plan":{
                "time":"thisSummerVacation",
                "toDo":"Front-End intern"
            }
            
        };
        var jsonStr1 = '{"name":"harold","age":"20","plan":{"time":"thisSummerVacation","toDo":"Front-End intern"}}';
        var jsObj1 = {
            name:"linbudu",
            age:20,
            dream:"Rich",
            // toJSON:function(){
            //     return this.dream;
            // }
        };
        //解析与序列化,不同于XML-DOM文档-提取数据,而是JSON-JS对象
        // document.writeln(jsonObj1);要在解析为对象后才能这样做
        var analysis1 = JSON.stringify(jsObj1);
        // var analysis2 = JSON.parse(jsonObj1);//报错,返回的数据已经是object类型,不需要再进行JSON.parse()转换了,可以直接当作对象使用。
        var analysis2 = JSON.parse(jsonStr1);//[object Object]//将json字符串转为相应的js值
        //json对象也是对象,这个方法用于转换json字符串,关于字符串和对象的区别,会写在下面
        document.writeln(analysis1 + "</br>");//将一个js对象序列化为一个json字符串,默认不包含空格与缩进
        document.writeln(analysis2 + "</br>");
        for(var i in analysis2){
            document.writeln(analysis2[i] + "</br>");
        }
        //序列化选项 stringify()方法可接受的另外两个参数
        //1.过滤器:为数组时
        document.writeln(JSON.stringify(jsObj1,["name","age"]) + "</br>" );//只会输出包含的属性
        //2.过滤器为函数 第二个参数控制字符串缩进
        var analysis3 = JSON.stringify(jsObj1,function(key,value){
            switch(key){
                case "age":
                    return value + 4;
                case "dream":
                    return value + " and What?";
                default :
                    return value;
            }
        } , "---");
        document.write(analysis3 + "</br>");
        //实际上第一次调用这个函数过滤器时传入的键为空字符串,值为该对象
    
        //toJSON方法  为对象定义此方法 返回其自身的json数据格式 
    
        //理解:序列化一个对象的顺序:
        //1,存在toJSON方法且能够取得有效的值,就调用此方法,否则返回对象本身
        //2.若是提供了第二个参数,就应用过滤器,传入的值是第一步中返回的
        //3.对第二步中的值进行序列化
        //4.对第三个参数进行相应操作
    
        //parse()方法也可接受一个参数 不同于前面那个是过滤函数,这个则是还原函数
        var jsonObj2 = {
            "title":"1",
            "header":"2",
            "container":"3",
            "foot":"4",
            releaseDate:new Date(2019,4,10)
        };
        var jsonText = JSON.stringify(jsonObj2);//(js、json)对象--json字符串
    
        var revive = JSON.parse(jsonText,function(key,value){//从一个字符串中解析出json对象
            if(key == "releaseDate"){
                return new Date(value);
            }else{
                return value;
            }
        });
        var test = JSON.stringify(revive);//直接返回revive会是[object,Object],因为返回的是一个json对象
        document.writeln(test + "</br>");
    </script>
    </html>

    写的过程中遇到了一些疑惑的地方,写在下面:

    json对象:

    var jsonObj1 = {
            "name":"harold",
            "age":"20",
            "plan":{
                "time":"thisSummerVacation",
                "toDo":"Front-End intern"
            }
            
        };

    json字符串:

    var jsonStr1 = '{"name":"harold","age":"20","plan":{"time":"thisSummerVacation","toDo":"Front-End intern"}}';

    js对象:

    var jsObj1 = {
            name:"linbudu",
            age:20,
            dream:"Rich"
        };
    如果在JSON.parse()方法中传入一个json对象或是js对象,会出现
    Uncaught SyntaxError: Unexpected token o in JSON at position 1
    的报错,因为这个方法仅用于从字符串中解析出json对象



    两个序列化方法:
    var jsonText = JSON.stringify(jsonObj2);//(js、json)对象--json字符串

    var revive = JSON.parse(jsonText)//从一个字符串中解析出json对象


  • 相关阅读:
    javascript往textarea追加内容
    Java之Comparable接口和Comparator接口
    Java之iterator迭代器和iterable接口
    Java之hashSet实现引用类型的禁止重复功能
    Java之获取系统属性
    Java之String,StringBuffer,StringBuilder类
    Java之sleep和wait的区别
    Android开发之ADT中无Annotation Processin的解决办法
    Android开发之注解式框架ButterKnife在ADT中的设置
    Android开发UI之Action Bar
  • 原文地址:https://www.cnblogs.com/linbudu/p/10676550.html
Copyright © 2020-2023  润新知