【重温基础】16.JSON对象介绍
本文是 重温基础 系列文章的第十六篇。
今日感受：静。
系列目录：
本章节复习的是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高级程序设计》
本部分内容到这结束
| Author | 王平安 |
|---|---|
| pingan8787@qq.com | |
| 博 客 | www.pingan8787.com |
| 微 信 | pingan8787 |
| 每日文章推荐 | https://github.com/pingan8787/Leo_Reading/issues |
| JS小册 | js.pingan8787.com |
