在很久很久以前,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对象
最基本的用法当然就是
我们把要转换的变量作为参数穿进去
举个例子(这个例子会一直用)
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(){}]));
可以看到返回为
[123,null,null,null]
下面我们来看看这两个函数更深的用法
stringify序列化
这个方法除了填待序列化对象之外,还可以接受两个参数
其一是一个过滤器,可以是数组,也可以是函数
其二是可以指定JSON字符串的缩进
过滤器
数组过滤器
数组的形式比较简单,我们可以指定我们想要的对象属性
还是我们上面的例子
var str = JSON.stringify(man,['name','sex']);
console.log(str);
{“name”:“payen”,“sex”:“male”}
函数过滤器
我们传入的函数接收连个参数,键(属性名)与值(属性值)
返回的值就是相应键的值
若函数返回undefined,属性会被忽略
var str = JSON.stringify(man, function(key, value){
if(key == 'name'){
return 'abc';
}
if(key == 'sex'){
return;
}
return value;
});
console.log(str);
缩进
空格填充
另一个参数可以填写数字指定缩进的空格数(最大缩进10)
var str = JSON.stringify(man, null, 4);
console.log(str);
字符填充
我们也可以指定缩进字符
var str = JSON.stringify(man, null, "- - ");
console.log(str);
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());
结果为 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对象
可填写额外一个参数-还原函数