轻量级数据格式——JSON

今天这数学实在看不下去
来换换脑子，写写前端
今天就写一个小知识JSON

---

在很久很久以前，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对象

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

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

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

var man = {    'name': "payen", <--    sex: "male", <--    "age": 19,    "school": {        "name": 'HUST',        "sex": undefined, <--        "location": function(){} <--    }}var str = JSON.stringify(man);console.log(str);console.log(typeof str);

下面我们看看控制台打印

可以看到JSON.stringify真的返回了JSON字符串
我们无引号还有单引号的属性在JSON字符串中都变成了双引号
并且属性值为undefined或者函数的属性被自动忽略了
（原型成员更是被忽略掉）

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

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

---

我们可以用JSON.parse还原为JavaScript对象

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

下面我们来看看这两个函数更深的用法

stringify序列化

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

过滤器

数组过滤器

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

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

函数过滤器

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

var str = JSON.stringify(man, function(key, value){    if(key == 'name'){        return 'abc';    }    if(key == 'sex'){        return;    }    return value;});console.log(str);

注意这里最后一定要写return value; 才能正常显示其他值
如果使用了switch语句就写default: return value;

缩进

空格填充

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

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

字符填充

我们也可以指定缩进字符

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

toJSON()方法

可能有些时候stringify不够满足我们的需求
这时我们可以给对象定义toJSON()方法
（但仍然是调用stringify()方法）
返回自身的JSON的数据格式
原生Date对象有默认toJSON()返回日期字符串（同Date中方法toISOString()结果相同）

我们可以给我们的对象添加一个toJSON属性

var man = {    ...,    toJSON: function(){        return this.school;    }}var str = JSON.stringify(man);console.log(str);

这里再多说一句
很多同学误认为toJSON()返回的是JSON字符串
其实不是的
toJSON()返回的应该是一个适当的值，然后由JSON.stringify()对其进行序列化
所以toJSON()是返回一个能够被字符串化的安全JSON值
下面我们来看看调用JSON.stringify()发生了什么

序列化对象顺序

• 如果对象有toJSON()并且能获得有效值，优先调用，否则返回对象本身
• 若有第二个参数，对上一步返回的对象应用过滤器
• 对上一步返回的每个值进行相应序列化
• 若有第三个参数，执行序列化

parse解析

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

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

我们看到，由于Date对象存在toJSON()
序列化之后调用了toJSON()
我们看到了这样的字符串

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

这样的数据不是我们想要的
这样的情况我们怎么处理呢？
答案是使用还原函数

---

可以这样做

var msg = JSON.parse(str,function(key, value){    if(key == 'releaseDate'){        return new Date(value);    }else{        return value;    }})console.log(msg.releaseDate.getFullYear(),            msg.releaseDate.getMonth(),            msg.releaseDate.getDate());

这样我们就可以使用得到的时间数据了

小结

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

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

==主页传送门==