轻量级数据格式——JSON

待我称王封你为后i 2024-04-18 03:38 45阅读 0赞

在很久很久以前，XML是互联网上传输数据的标准  
但是大家普遍反映XML太繁琐  
再后来，随着Web的发展  
人们发现JSON作为JavaScript语法的子集使用更方便  
于是JSON就成为了标准  
现在大家都把JSON作为通信的数据格式

## JSON基本语法 ##

JSON：JavaScript Object Notation，JavaScript对象表示法）  
JSON语法大体分为三种类型值

**简单类型值**：可表示字符串、数字、布尔值和null  
**对象**：复杂数据类型，表示无序键值对  
**数组**：复杂数据类型，表示有序值列表

**注意JSON不支持undefined、不支持函数**

## 简单类型值 ##

单独的基本类型值也可以看做JSON  
语法与JavaScript相同  
只有一点要注意  
在我们JavaScript中字符串可以用双引号表示，也可以用单引号表示  
但是JSON中的字符串格式**必须使用双引号**

## 对象 ##

由于JSON是JavaScript语法的子集  
所以我主要说一下不太一样的地方  
先看一下我们常用的对象字面量声明格式

> var man = \{  
> name: ‘payen’,  
> sex: ‘male’,  
> age: 19  
> \};

我们JavaScript中对象可以给属性加引号也可以不加  
（为了区分普通对象与JSON对象，通常不加引号）  
但在JSON中对象要求给属性加（双）引号  
我们上面的对象在JavaScript中也可以这么写，完全等价

> var man = \{  
> “name”: “payen”,  
> “sex”: “male”,  
> “age”: 19  
> \};

而用JSON表示上面的对象就是

> \{  
> “name”: “payen”,  
> “sex”: “male”,  
> “age”: 19  
> \}

（JSON中没有变量的概念，没有分号）  
当然JSON中对象的值也可以是对象  
不管多么复杂的JSON，对象的键（属性）都要加（双）引号

## 数组 ##

虽然在我们JavaScript中，数组严格来说属于对象  
但我们通常都把它们区别对待  
我们通用的声明数组字面量的方法

> var value = \[123, ‘abc’, true\];

JSON也是相同的语法

> \[123, “abc”, true\]

**再次强调，JSON没有变量和分号**

通常来说，数组和对象是JSON的最外层形式  
通过数组、对象以及简单类型值能够构造各式各样的JSON数据格式

## JSON解析与序列化 ##

## JSON对象 ##

很早之前的JSON解析器用的是JavaScript的eval()  
但是它是有风险的，可能会执行恶意代码  
ES5规范了解析JSON的行为  
定义了全局对象JSON  
它有两个方法

> stringify()  
> JavaScript对象 –> JSON字符串  
> parse()  
> JSON字符串 –> JavaScript对象

最基本的用法当然就是  
我们把要转换的变量作为参数穿进去  
举个例子（这个例子会一直用）

下面我们看看控制台打印  
![在这里插入图片描述][2019090310160837.png]  
可以看到JSON.stringify真的返回了JSON字符串  
我们无引号还有单引号的属性在JSON字符串中都变成了双引号  
并且属性值为undefined或者函数的属性被自动忽略了  
（原型成员更是被忽略掉)

虽然JSON.stringify()在对象中遇到undefined、function（也包括ES6的symbol）会自动被忽略  
但是数组不一样  
数组没有对象绝情把它们一脚踢开，而是返回null

console.log(JSON.stringify([123, undefined, null, function(){}]));

可以看到返回为

\[123,null,null,null\]  
下面我们来看看这两个函数更深的用法

## stringify序列化 ##

这个方法除了填待序列化对象之外，还可以接受两个参数  
其一是一个过滤器，可以是数组，也可以是函数  
其二是可以指定JSON字符串的缩进

## 过滤器 ##

## 数组过滤器 ##

数组的形式比较简单，我们可以指定我们想要的对象属性  
还是我们上面的例子

var str = JSON.stringify(man,['name','sex']);
    console.log(str);

\{“name”:“payen”,“sex”:“male”\}

## 函数过滤器 ##

我们传入的函数接收连个参数，键（属性名）与值（属性值）  
返回的值就是相应键的值  
若函数返回undefined，属性会被忽略

![在这里插入图片描述][20190903102049173.png]

## 缩进 ##

**空格填充**  
另一个参数可以填写数字指定缩进的空格数（最大缩进10）

var str = JSON.stringify(man, null, 4);
    console.log(str);

![在这里插入图片描述][20190903102203719.png]  
**字符填充**  
我们也可以指定缩进字符

var str = JSON.stringify(man, null, "- - ");
    console.log(str);

![在这里插入图片描述][20190903102256175.png]

## parse解析 ##

JSON.parse也可以接受另一个参数，它是一个函数  
类似于上面序列化中过滤器的过滤函数  
它被称作还原函数，同样接受键和值作为参数  
首先我现在我们例子中的对象添加一个方法

var man = {
        ...,
        releaseDate: new Date(2016,11,11)
    }
    var str = JSON.stringify(man);
    console.log(str);

![在这里插入图片描述][20190903102427832.png]  
我们看到，由于Date对象存在toJSON()  
序列化之后调用了toJSON()  
我们看到了这样的字符串

console.log(JSON.parse(str));

![在这里插入图片描述][20190903102509308.png]  
这样的数据不是我们想要的  
这样的情况我们怎么处理呢？  
答案是使用还原函数  
可以这样做

结果为 2016 11 11  
这样我们就可以使用得到的时间数据了

## 小结 ##

没想到写了这么多  
JSON其实很简单  
就是一个轻量级的数据格式  
可以简化表示复杂数据结构的工作量  
主要要掌握ES5的全局对象JSON中的两个方法JSON.stringify()和JSON.parse()  
总结几个要记住的重点

**JSON.stringify()**  
用于把JavaScript对象转换为JSON字符串  
可填写额外两个参数-筛选数组/替换函数和指定缩进  
对象遇到undefined、function、symbol（ES6）会忽略  
数组遇到undefined、function、symbol（ES6）会返回null  
**JSON.parse()**  
用于把JSON字符串转换为JavaScript对象  
可填写额外一个参数-还原函数

[2019090310160837.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/719cb53227ac4ae7866d8408fe4809bc.png
[20190903102049173.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/0f2d0bdc7a7d415697b5e2c9a1726a0c.png
[20190903102203719.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/a148f2e8da2e4454ac3f51d51d5456c7.png
[20190903102256175.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/391859e6a29f4819b3c3e4281223d513.png
[20190903102427832.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/fd3046a1acf8492c9b4cd698e7a59a3c.png
[20190903102509308.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/3e944d4ef08745fe9c5b468107a91e66.png