JSON简介
JSON 是一种结构化的数据格式,作用是前后端交换数据的一种方式…
JavaScript
的语法相类似,并不从属于 JavaScript
,毕竟只是一种数据格式。
JSON
的解析器和序列化器。
JSON 中数据类型
JSON的语法可以包含以下三种类型的值:
- 简单值:简单值和
JavaScript
中的基本类型差不多,除了undefined
之外,字符串、数字、布尔值和null
JSON都支持。 - 对象: 对象是一种复杂数据类型,表示一组无序的键值对。
- 数组: 数组也是一种复杂的数据类型,表示一组有序的键值对。数组中的值可以是任何类型:简单值、对象和数组。
JSON
数据和JavaScript
中的数据相比,有两个不同的点:
- JSON字符串必须使用双引号( 单引号会报错 );
- JSON数组没有变量和分号。
JSON传递的数据通常都是数组和对象加起来的比较复杂的数据类型。例如:
[
{
"title": "book1",
"authors": [
"Jhon", "mark"
]
"edition": 3,
"year": 2015
},
{
"title": "book2",
"authors": [
"Jhon", "mark"
]
"edition": 4,
"year": 2017
},
{
"title": "book3",
"authors": [
"Jhon", "mark"
]
"edition": 5,
"year": 2019
}
]
以上我们就创建的是一个 JSON
数组,数组中有三个元素( 全都是对象 ),对象中还包含了数组。。。
JSON序列化
JSON
序列化就是将 JavaScript
中的对象序列化为一个 JSON
字符串。
使用的方法是 stringify()
,可以接受的参数一个或者是三个。
-
若是一个参数,则该参数就是想要序列化的对象。
-
如果是三个参数( 后面两个参数可选 ),第二个参数代表的是一个过滤器,可以是一个数组也可以是一个函数;
-
第三个参数是表示是否在序列化的
JSON
字符串中保留缩进以及缩进值( 最大是10
)。
使用方法:
//创建一个正常的JS对象
var book1 = {
"title": "book1",
"authors": [
"Jhon", "mark"
],
"edition": 3,
"year": 2015
};
//将此对象序列化为JSON字符串,并保留在JSONText字符串中
var JSONText = JSON.stringify(book1);
//输出序列化之后的JSON字符串
console.log(JSONText);
//检测序列化之后的数据类型
console.log("序列化之后的数据类型" + typeof JSONText);
以上代码输出是序列化后的字符串以及该数据的类型是:
{"title":"book1","authhor":["Jhon","mark"],"edition":3,"year":2015}
序列化之后的数据类型 : string
下面介绍是第二个参数和第三个参数的使用,虽然不经常用到,尤其是第二个参数。
第二个参数简称 过滤器
,简单理解就是控制一个对象中的那些属性属性和方法被序列化,而其他的不被序列化。可以是一个数组,也可以是一个函数。
1. 当参数为一个数组时
例如,假如我们只需要将上述 book1
对象中的 edition
和 year
属性进行序列化:
//创建一个正常的JS对象
var book1 = {
"title": "book1",
"authors": [
"Jhon", "mark"
]
"edition": 3,
"year": 2015
};
//将此对象序列化为JSON字符串,并保留在JSONText字符串中
var JSONText = JSON.stringify(book1, ["edition", "year"]);
console.log(JSONText);
//检测序列化之后的数据类型
console.log("序列化之后的数据类型" + typeof JSONText);
以上代码输出就是只包含 edition
和 year
键值对儿的 JSON
字符串:
{"edition":3,"year":2015}
序列化之后的数据类型 : string
2. 当参数是一个函数时
使用方法:
//创建一个正常的JS对象
var book1 = {
"title": "book1",
"authors": [
"Jhon", "mark"
],
"edition": 3,
"year": 2015
};
//将此对象序列化为JSON字符串,并保留在JSONText字符串中
var JSONText = JSON.stringify(book1, function(key, value) {
swith (key) {
case "author" :
return value.join(",");
case "edition" :
return undefined;
case "year" :
return 5000;
default :
return value;
}
};
console.log(JSONText);
//检测序列化之后的数据类型
console.log("序列化之后的数据类型" + typeof JSONText);
输出如下:
{"title":"book1","authhor":["Jhon","mark"],"year":5000}
序列化之后的数据类型 : string
这个函数的意思是对于 JavaScript
中的对象的每一个键值对都执行该函数。
- 如果键值是
author
,则将原本的数组转换成字符串,以,
分隔; - 如果键值是
edition
, 返回值是undefined
,意味在序列化的时候删除该属性; - 一定要提供
default
项,以便其他的值都能正常的出现在结果中。
第三个参数代表的是序列化后的缩进值
之前不加第三个参数的时候序列化后的 JSON
字符串没有缩进,也没有空格,为了提高可读性,我们一般需要第三个参数,使得序列化后字符串进行缩进。
例如在每个级别上缩进4个空格:
//创建一个正常的JS对象
var book1 = {
"title": "book1",
"authors": [
"Jhon", "mark"
]
"edition": 3,
"year": 2015
};
//将此对象序列化为JSON字符串,并保留在JSONText字符串中
var JSONText = JSON.stringify(book1, null, 4);
console.log(JSONText);
//检测序列化之后的数据类型
console.log("序列化之后的数据类型" + typeof JSONText);
输出为:
{
"title": "book1",
"authhor": [
"Jhon",
"mark"
],
"edition": 3,
"year": 2015
}
序列化之后的数据类型 : string
JSON 解析
以上所谈的是将 javasccipt
对象序列化为 JSON
字符串,当然还可以将 JSON
字符串解析为 javascript
对象。
使用的方法是 JSON.parse()
。
该方法可以接受一个参数或者是两个参数。
1. 一个参数时
如果该方法只使用了一个参数,则表示的是 JSON
字符串,返回值是原 JSON
字符串表示的原 JavaScript
对象的一个副本。
例如:
var book = {
"title": "book1",
"authors": [
"Jhon", "mark"
],
"edition": 3,
"year": 2015
};
var JSONText = JSON.stringify(book);
console.log(JSONText);
console.log("将对象序列化之后的数据类型:" + typeof JSONText);
var bookCopy = JSON.parse(JSONText);
console.log(bookCopy);
console.log("再将序列化之后的JSON字符串解析为JS对象后的数据类型:" + typeof bookCopy);
输出如下:
{"title":"book","authors":["Jhon","mark"],"edition":3,"year":2015}
将对象序列化之后的数据类型:string
Object { title: "book", authors: (2) […], edition: 3, year: 2015 }
再将序列化之后的JSON字符串解析为JS对象后的数据类型:object
2. 两个参数时
JSON.parse()
方法可以接受第二个参数。
第二个参数是一个函数,将在每一个键值对上调用。被称为 还原函数
。
如果还原函数的返回值是 undefined
,则表示要从结果中删除对应的键及其值;如果返回其他值,则该值插入到结果中。
var book = {
"title": "book1",
"authors": [
"Jhon", "mark"
],
"edition": 3,
"year": 2015,
"releaseDate": new Date(2011, 11, 1)
};
var JSONText = JSON.stringify(book);
var bookCopy = JSON.parse(JSONText, function (key, value) {
if (key == "releaseDate") {
return new Date(value);
} else {
return value;
}
});
console.log(bookCopy.releaseDate.getFullYear());
以上代码先是为 book
对象新增一个 releaseDate
属性, 该属性保存着一个 Date
对象。
这个对象在经过序列化之后变成了有效的JSON字符串,然后经过解析又在 bookCopy
中还原为一个 Date
对象。
还原函数在遇到 releaseDate
键时, 会基于相应的值创建一个新的 Date
对象。结果就是 bookCopy.releaseDate
属性中保存着一个 Date
对象。
正因为如此,才能基于这个对象调用 getFullYear
方法。