宜宾网站建设公司

JavaScript快速入门-08-JSON

8 JSON

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

成都创新互联长期为上千客户提供的网站建设服务，团队从业经验10年，关注不同地域、不同群体，并针对不同对象提供差异化的产品和服务；打造开放共赢平台，与合作伙伴共同营造健康的互联网生态环境。为潜江企业提供专业的成都网站设计、网站建设，潜江网站改版等技术服务。拥有十年丰富建站经验和众多成功案例,为您定制开发。

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"
    ]
}

原文地址：https://www.jianshu.com/p/aca2b

本文同步在微信订阅号上发布，如各位小伙伴们喜欢我的文章，也可以关注我的微信订阅号：woaitest，或扫描下面的二维码添加关注：


网站名称：JavaScript快速入门-08-JSON
本文URL：http://ybzwz.com/article/dsojgpp.html

其他资讯