本文是 重温基本 系列文章的第十六篇。
本日感觉：静。

系列目次：

• 【温习材料】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

JSON常常有三种范例：
三种范例：简朴之，对象和数组。
必需注重：JSON字符串必需是双引号，单引号会语法毛病。

2.1 简朴值

简朴值可所以字符串:

"hello leo!"

也可所以数字,逻辑值：

1

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

注重：

1. 默许状况下，JSON.stringify()输出的JSON字符串不包括任何空格字符或缩进，因而效果就像上面那样。
2. 序列化JavaScript对象时，一切函数及原型成员都会被疏忽，不体现在效果上。
3. 值为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"}"

参考文章：

1. W3school JSON教程
2. 《JavaScrip高等程序设计》

本部分内容到这完毕

迎接关注微信民众号【前端自习课】天天清晨，与您一同进修一篇优异的前端手艺博文 .