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对象


原文地址:https://www.cnblogs.com/linbudu/p/10676550.html