【重温基础】16.JSON对象介绍

本文是 重温基础 系列文章的第十六篇。

今日感受：静。

系列目录：

• 【复习资料】ES6/ES7/ES8/ES9资料整理(个人整理)
• 【重温基础】1-14篇
• 【重温基础】15.JS对象介绍

本章节复习的是JS中的关于JSON对象相关知识。

前置知识：

JSON 是一种按照 JavaScript 对象语法的数据格式。

1.概念

概念有三点：

JSON 全称 JavaScript 对象表示法（JavaScript Object Notation）。

JSON 是 存储 和 交换文本信息 的语法。类似 XML 。

JSON 比 XML 更小、更快，更易解析。

———— 摘自 W3school JSON教程

JSON 使用 JavaScript 语法来描述数据对象，但是 JSON 仍然独立于语言和平台。 JSON 解析器和 JSON 库支持许多不同的编程语言。

2.语法

JSON 在使用过程中可作为一个 对象 或者 字符串 存在，当作为 对象 时，用于获取 JSON 中的数据，而作为 字符串 时常用于网络数据传输。

JSON 语法规则：

1. 数据在名称/值对中
2. 数据由逗号分隔
3. 花括号保存对象
4. 方括号保存数组

通常， JSON 数据书写格式是 名称/键值 ：

"name" : "pingan"

而 JSON 的值可以是 ：

1. 数字（整数或浮点数）
2. 字符串（在双引号中）
3. 逻辑值（ true 或 false ）
4. 数组（在方括号中）
5. 对象（在花括号中）
6. null

2.1 简单值

简单值可以是字符串:

"hello leo!"

也可以是数字,逻辑值：

2.2 对象类型

内容放在 花括号 内，是多个键值对。

JSON对象 与 js 对象的三个区别：

1. JSON对象 必须加双引号，而 js 对象属性名可以不加双引号。
2. JSON对象 没有变量声明，而 js 对象有。
3. JSON对象 没有分号，而 js 对象有。

// js 对象
var obj = {
    name : "pingan",
    age  : "25",
};
// json 对象
{
    "name" : "pingan",
    "age"  : "25",
    "box"  : [
        "a","b","c"
    ]
}

2.3 数组类型

内容放在 方括号 内。

JSON数组也没有分号和变量，常常可以把JSON数组和对象结合使用，构成更复杂的数据集合。

[
    {
        "name" : "leo",
        "age"  : 25,
        "box"  : ["a","b","c"]
    },
    {
        "name" : "pingan",
        "age"  : 25,
        "box"  : ["a","b","c"]
    }
]

3. 使用

JSON最常见的用法就是，从服务端获取JSON数据，再将JSON数据转成JavaScrip对象使用。

JSON对象有两个方法：

• JSON.stringify() ： 序列化操作，将 JavaScript对象 转换成 JSON字符串 。
• JSON.prase() ：反序列化操作，将 JSON字符串 解析成 JavaScript值 。

3.1 序列化操作

序列化操作常常使用 JSON.stringify() 。

简单例子:

let leo =  {
    name : "leo",
    age  : 25,
    box  : ["a","b","c"]
}
let pingan = JSON.stringify(leo);
console.log(pingan); // "{"name":"leo","age":25,"box":["a","b","c"]}"

注意：

JSON.stringify()
JavaScript对象
undefined

因此，最终的值都是有效的JSON数据类型的实例属性。

3.2 反序列化操作

序列化操作常常使用 JSON.parse() 。

简单例子：

let copyPingan = JSON.parse(pingan);
copyPingan; // {name: "leo", age: 25, box: Array(3)}

如果传入 JSON.parse() 的字符串不是有效的JSON，则会抛出错误。

注意：

虽然 pingan 和 copyPingan 属性相同，但两者独立，没有任何关系。

4.序列化选项

JSON.stringify() 除了要传入序列化对象作为参数，还可以接收其他两个参数，用来指定序列化JavaScript对象的方式：

1. 过滤器：可以是个 数组 ，也可以是个 函数 。
2. 选项：表示是否在 JSON字符串 中 保留缩进 。

单独或组合使用两者，可以更加全面深入的控制JSON的序列化。

4.1 过滤器

若过滤器的参数是 数组 ，则 JSON.stringify() 返回的结果将只包含数组中的属性：

var leo =  {
    name : "leo",
    age  : 25,
    box  : ["a","b","c"]
}
var pingan = JSON.stringify(leo,["name","age"]);
console.log(pingan); // "{"name":"leo","age":25}"

若过滤器的参数是 函数 ，则情况就不一样了，传入的函数需有两个参数（属性名和属性值）：

var leo =  {
    "name" : "leo",
    "age"  : 25,
    "box"  : ["a","b","c"]
}
var pingan = JSON.stringify(leo,function(key, value){
    switch(key){
        case "name":
            return "我叫" + value
        case "age":
            return value + "岁"
        default:
            return value
    }
});
console.log(pingan); // "{"name":"我叫leo","age":"25岁","box":["a","b","c"]}"

注意：使用 switch 的时候，必须指定 default 否则会返回 undefined 。

4.2 选项

JSON.stringify() 第三个参数是个选项，控制结果中的缩进和空白符。

1. 若选项只有一个值，则表示 每个级别缩进的空格数 ，最大值为 10 ，超过 10 则只会是 10 。

var leo =  {
    "name" : "leo",
    "age"  : 25,
    "box"  : ["a","b","c"]
}
var pingan = JSON.stringify(leo, null, 4);
console.log(pingan);
/*
"{
    "name": "leo",
    "age": 25,
    "box": [
        "a",
        "b",
        "c"
    ]
}"
*/

5.解析选项

JSON.parse() 可以接收一个函数作为参数，对每个键值对调用，为了跟 JSON.stringify() 的 过滤函数 区别，这个函数成为 还原函数 。

undefined

还原函数接收两个参数：属性名和属性值。

举例，在日期字符串转换为Date对象中，经常要用到还原函数：

var leo =  {
    "name" : "leo",
    "age"  : 25,
    "date" : new Date(1993, 9, 9)
}
var pingan = JSON.stringify(leo);
var copy = JSON.parse(pingan,function (key, value){
    // return key == "date" ? new Date(value) : value;
    if(key == "date"){
        return new Date(value);
    }else{
        return value; 
    }
})
console.log(copy);
// "{"name":"leo","age":25,"date":"1993-10-08T16:00:00.000Z"}"