本文是 重温基础 系列文章的第十六篇。 今日感受：静。
本章节复习的是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高级程序设计》
