前置知识：

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 对象有。

2.3 数组类型

内容放在方括号内。

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

3. 使用

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

JSON对象有两个方法：

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

3.1 序列化操作

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

简单例子:

注意：

默认情况下，JSON.stringify()输出的JSON字符串不包含任何空格字符或缩进，因此结果就像上面那样。序列化JavaScript对象时，所有函数及原型成员都会被忽略，不体现在结果上。值为undefined的任何属性都会被跳过。

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

3.2 反序列化操作

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

简单例子：

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

注意：

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

4.序列化选项

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

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

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

4.1 过滤器

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

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

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

4.2 选项

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

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

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

若还原函数返回undefined，则表示要从结果中删除对应的键。若还原函数返回其他值，则将该值插入结果中。

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

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

公众号：前端自习课

往期回顾

「JavaScript 从入门到精通」1.语法和数据类型

「JavaScript 从入门到精通」2.流程控制和错误处理

「JavaScript 从入门到精通」3.循环和迭代

「JavaScript 从入门到精通」4.函数

「JavaScript 从入门到精通」5.表达式和运算符

「JavaScript 从入门到精通」6.数字

「JavaScript 从入门到精通」7.时间对象

「JavaScript 从入门到精通」8.字符串

「JavaScript 从入门到精通」9.正则表达式

「JavaScript 从入门到精通」10.数组

「JavaScript 从入门到精通」11.Map和Set对象

「JavaScript 从入门到精通」12.使用对象

「JavaScript 从入门到精通」13.迭代器和生成器

「JavaScript 从入门到精通」14.元编程

「JavaScript 从入门到精通」15.JS对象介绍