共计 3231 个字符，预计需要花费 9 分钟才能阅读完成。
本文是 重温基础 系列文章的第十六篇。今日感受：静。
系列目录：
【复习资料】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 语法规则：
数据在名称 / 值对中
数据由逗号分隔
花括号保存对象
方括号保存数组
通常，JSON 数据书写格式是名称 / 键值：
“name” : “pingan”
而 JSON 的值可以是：
数字（整数或浮点数）
字符串（在双引号中）
逻辑值（true 或 false）
数组（在方括号中）
对象（在花括号中）
null
JSON 常常有三种类型：三种类型：简单之，对象和数组。必须注意：JSON 字符串必须是双引号，单引号会语法错误。
2.1 简单值
简单值可以是字符串:
“hello leo!”
也可以是数字, 逻辑值：
1
2.2 对象类型
内容放在花括号内，是多个键值对。JSON 对象 与 js 对象的三个区别：
JSON 对象 必须加双引号，而 js 对象属性名可以不加双引号。
JSON 对象 没有变量声明，而 js 对象有。
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() 输出的 JSON 字符串不包含任何空格字符或缩进，因此结果就像上面那样。
序列化 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 对象的方式：
过滤器：可以是个数组，也可以是个函数。
选项：表示是否在 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() 第三个参数是个选项，控制结果中的缩进和空白符。
若选项只有一个值，则表示每个级别缩进的空格数，最大值为 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”}”
参考文章：
W3school JSON 教程
《JavaScrip 高级程序设计》
本部分内容到这结束
Author
王平安
E-mail
pingan8787@qq.com
博 客
www.pingan8787.com
微 信
pingan8787
每日文章推荐
https://github.com/pingan8787…
JS 小册
js.pingan8787.com
