本文是 重温基础 系列文章的第十六篇。 今日感受:静。
本章节复习的是JS中的关于JSON对象相关知识。
前置知识:
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 对象有。
-
// js 对象
-
var obj = {
-
name : "pingan",
-
age : "25",
-
};
-
// json 对象
-
{
-
"name" : "pingan",
-
"age" : "25",
-
"box" : [
-
"a","b","c"
-
]
-
}
2.3 数组类型
内容放在 方括号
内。
JSON数组也没有分号和变量,常常可以把JSON数组和对象结合使用,构成更复杂的数据集合。
-
[
-
{
-
"name" : "leo",
-
"age" : 25,
-
"box" : ["a","b","c"]
-
},
-
{
-
"name" : "pingan",
-
"age" : 25,
-
"box" : ["a","b","c"]
-
}
-
]
3. 使用
JSON最常见的用法就是,从服务端获取JSON数据,再将JSON数据转成JavaScrip对象使用。
JSON对象有两个方法:
-
JSON.stringify()
: 序列化操作,将 JavaScript对象
转换成 JSON字符串
。 -
JSON.prase()
:反序列化操作,将 JSON字符串
解析成 JavaScript值
。
3.1 序列化操作
序列化操作常常使用 JSON.stringify()
。
简单例子:
-
let leo = {
-
name : "leo",
-
age : 25,
-
box : ["a","b","c"]
-
}
-
let pingan = JSON.stringify(leo);
-
console.log(pingan); // "{"name":"leo","age":25,"box":["a","b","c"]}"
注意:
- 默认情况下,
JSON.stringify()
输出的JSON字符串不包含任何空格字符或缩进,因此结果就像上面那样。 - 序列化
JavaScript对象
时,所有函数及原型成员都会被忽略,不体现在结果上。 - 值为
undefined
的任何属性都会被跳过。
因此,最终的值都是有效的JSON数据类型的实例属性。
3.2 反序列化操作
序列化操作常常使用 JSON.parse()
。
简单例子:
-
let copyPingan = JSON.parse(pingan);
-
copyPingan; // {name: "leo", age: 25, box: Array(3)}
如果传入 JSON.parse()
的字符串不是有效的JSON,则会抛出错误。
注意:
虽然 pingan
和 copyPingan
属性相同,但两者独立,没有任何关系。
4.序列化选项
JSON.stringify()
除了要传入序列化对象作为参数,还可以接收其他两个参数,用来指定序列化JavaScript对象的方式:
- 过滤器:可以是个数组,也可以是个函数。
- 选项:表示是否在
JSON字符串
中保留缩进。
单独或组合使用两者,可以更加全面深入的控制JSON的序列化。
4.1 过滤器
若过滤器的参数是数组,则 JSON.stringify()
返回的结果将只包含数组中的属性:
-
var leo = {
-
name : "leo",
-
age : 25,
-
box : ["a","b","c"]
-
}
-
var pingan = JSON.stringify(leo,["name","age"]);
-
console.log(pingan); // "{"name":"leo","age":25}"
若过滤器的参数是函数,则情况就不一样了,传入的函数需有两个参数(属性名和属性值):
-
var leo = {
-
"name" : "leo",
-
"age" : 25,
-
"box" : ["a","b","c"]
-
}
-
var pingan = JSON.stringify(leo,function(key, value){
-
switch(key){
-
case "name":
-
return "我叫" + value
-
case "age":
-
return value + "岁"
-
default:
-
return value
-
}
-
});
-
console.log(pingan); // "{"name":"我叫leo","age":"25岁","box":["a","b","c"]}"
注意:使用 switch
的时候,必须指定 default
否则会返回 undefined
。
4.2 选项
JSON.stringify()
第三个参数是个选项,控制结果中的缩进和空白符。
- 若选项只有一个值,则表示每个级别缩进的空格数,最大值为
10
,超过 10
则只会是 10
。 -
var leo = {
-
"name" : "leo",
-
"age" : 25,
-
"box" : ["a","b","c"]
-
}
-
var pingan = JSON.stringify(leo, null, 4);
-
console.log(pingan);
-
/*
-
"{
-
"name": "leo",
-
"age": 25,
-
"box": [
-
"a",
-
"b",
-
"c"
-
]
-
}"
-
*/
5.解析选项
JSON.parse()
可以接收一个函数作为参数,对每个键值对调用,为了跟 JSON.stringify()
的 过滤函数
区别,这个函数成为 还原函数
。
- 若还原函数返回
undefined
,则表示要从结果中删除对应的键。 - 若还原函数返回其他值,则将该值插入结果中。
还原函数接收两个参数:属性名和属性值。
举例,在日期字符串转换为Date对象中,经常要用到还原函数:
-
var leo = {
-
"name" : "leo",
-
"age" : 25,
-
"date" : new Date(1993, 9, 9)
-
}
-
var pingan = JSON.stringify(leo);
-
var copy = JSON.parse(pingan,function (key, value){
-
// return key == "date" ? new Date(value) : value;
-
if(key == "date"){
-
return new Date(value);
-
}else{
-
return value;
-
}
-
})
-
console.log(copy);
-
// "{"name":"leo","age":25,"date":"1993-10-08T16:00:00.000Z"}"
参考文章:
- W3school JSON教程
- 《JavaScrip高级程序设计》