美文网首页JavaScript
JavaScript快速入门-08-JSON

JavaScript快速入门-08-JSON

作者: Surpassme | 来源:发表于2022-08-30 23:19 被阅读0次

    8 JSON

        因平时工作时,使用JSON的场景比较多,其JSON语法不再介绍,仅介绍在JavaScript中JSON的解析和序列化。

    8.1 JSON 对象

        JSON对象有两个方法:

    • stringify():将JavaScript序列化为JSON字符串
    • parse():将JSON解析为原生JavaScript值
    let personInfo={
        name:"Surpass",
        age:28,
        location:"Shanghai",
        from:"Wuhan",
        to:"Nanjing"
    };
    
    let jsonText=JSON.stringify(personInfo);
    let jsonObj=JSON.parse(jsonText);
    console.log(jsonText); // {"name":"Surpass","age":28,"location":"Shanghai","from":"Wuhan","to":"Nanjing"}
    console.log(jsonObj); // {name: 'Surpass', age: 28, location: 'Shanghai', from: 'Wuhan', to: 'Nanjing'}
    

        注意事项如下所示:

    • 在序列化JavaScript对象时,所有函数和原型成员都会在结果中省略,值为undefined的任何属性也会被跳过,最终得到的就是所有实例属性均为有效JSON数据类型的表示
    • JSON.parse()传入的JSON字符串无效,则会导致抛出错误

    8.2 序列化选项

        JSON.stringify()方法除了要序列化的对象,还可以接收两个参数,单独或组合使用这些参数可以更好地控制JSON序列化

    • 第一个参数是过滤器,可以是数组或函数
    • 第二个参数是用于缩进结果JSON字符串的选项

    8.2.1 过滤结果

    • 1.过滤器为数组

        如果第二个参数是一个数组,那么JSON.stringify()返回的结果只会包含该数组中列出的对象属性。

    let personInfo={
        name:"Surpass",
        age:28,
        location:"Shanghai",
        from:"Wuhan",
        to:"Nanjing"
    };
    
    let jsonText=JSON.stringify(personInfo,["name","from"]);
    console.log(jsonText); // {"name":"Surpass","from":"Wuhan"}
    
    • 2.过滤器是函数

        如果第二个参数是一个函数,则函数接收两个参数:属性名(key)和属性值(value)。可以根据key决定要对其属性执行什么操作。key始终是字符串,当值不属于某个键/值对时则为空字符串。否则返回的值就是相应key对应的值。若返回undefined会导致属性被忽略。代码如下所示:

    let personInfo={
        name:"Surpass",
        age:28,
        location:"Shanghai",
        from:"Wuhan",
        to:"Nanjing"
    };
    
    let jsonText=JSON.stringify(personInfo,(key,value)=>{
       switch (key) {
           case "name":
               return value+"@";
           case "from":
               return value+"+";
            case "age":
                return value+28;
            case "location":
                return undefined;
           default:
               return value;
       }
    });
    
    console.log(jsonText);
    

    输出结果如下所示:

    {"name":"Surpass@","age":56,"from":"Wuhan+","to":"Nanjing"}
    

    8.2.2 字符串缩进

        JSON.stringify()方法的第三个参数控制缩进和空格。在这个参数是数值时,表示每一级缩进的空格数。示例代码如下所示:

    let personInfo={
        name:"Surpass",
        age:28,
        location:"Shanghai",
        from:"Wuhan",
        to:"Nanjing"
    };
    
    let jsonText=JSON.stringify(personInfo,(key,value)=>{
       switch (key) {
           case "name":
               return value+"@";
           case "from":
               return value+"+";
            case "age":
                return value+28;
            case "location":
                return undefined;
           default:
               return value;
       }
    },4);
    
    console.log(jsonText);
    

    输出结果如下所示:

    {
        "name": "Surpass@",
        "age": 56,
        "from": "Wuhan+",
        "to": "Nanjing"
    }
    

    最大缩进值为10,大于10 的值会自动设置为10
    如果缩进参数是一个字符串而非数值,那么JSON字符串中就会使用这个字符串而不是空格来缩进

    let personInfo={
        name:"Surpass",
        age:28,
        location:"Shanghai",
        from:"Wuhan",
        to:"Nanjing"
    };
    let jsonText=JSON.stringify(personInfo,null,"++++");
    console.log(jsonText);
    

    输出结果如下所示:

    {
    ++++"name": "Surpass",
    ++++"age": 28,
    ++++"location": "Shanghai",
    ++++"from": "Wuhan",
    ++++"to": "Nanjing"
    }
    

    8.3 解析选项

        JSON.parse()方法也可以接收一个额外的参数,这个函数会针对每个键/值对都调用一次,也接收两个参数属性名(key)和属性值(value),同时也需要返回值。如果函数返回undefined,则结果中删除相应的键。如果返回了其他任何值,则该值就会成为相应键的值插入到结果中。

    let personInfo={
        name:"Surpass",
        age:28,
        location:"Shanghai",
        from:"Wuhan",
        to:"Nanjing",
        neighbour:["Surpass"]
    };
    
    let neighbourArray=["Kevin","Tina","Jeniffer"];
    
    let jsonText=JSON.stringify(personInfo);
    
    let jsonObj=JSON.parse(jsonText,
        (key,value)=> key == "neighbour" ? neighbourArray:value
    );
    
    console.log(JSON.stringify(jsonObj,null,4));
    

    输出结果如下所示:

    {
        "name": "Surpass",
        "age": 28,
        "location": "Shanghai",
        "from": "Wuhan",
        "to": "Nanjing",
        "neighbour": [
            "Kevin",
            "Tina",
            "Jeniffer"
        ]
    }
    

    相关文章

      网友评论

        本文标题:JavaScript快速入门-08-JSON

        本文链接:https://www.haomeiwen.com/subject/auvrnrtx.html