文章目录
JSON基础文章荐读
这些都是我写过的文章，特别是第一篇文章，荐读。
- 《JSON入门详解(一)》
- 《Pandas高效加载JSON文件》
- 《Java对象数据的XML和JSON表示》
- 《Java中的JSON类库》
- 《用Jackson进行JSON序列化/反序列化操作》
- 《在JavaScript中使用JSON进行序列化、反序列化操作》
JavaScript创建JSON对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JSON</title>
</head>
<body>
<h1>员工信息</h1>
<p>
ID: <span id="js_id"></span><br/>
Name: <span id="js_name"></span><br/>
Age: <span id="js_age"></span><br/>
Email: <span id="js_email"></span><br/>
</p>
<script>
var jsonObj= {
"id":"1111",
"name":"王富贵",
"age":"30",
"email":"[email protected]"
};
document.getElementById("js_id").innerHTML=jsonObj.id
document.getElementById("js_name").innerHTML=jsonObj.name
document.getElementById("js_age").innerHTML=jsonObj.age
document.getElementById("js_email").innerHTML=jsonObj.email
</script>
</body>
</html>
JSON与XML的那些事
有关于第三篇文章——《Java对象数据的XML和JSON表示》，这篇文章主要是实例的演示，下面讲讲JSON与XML的异同，以及为什么选择JSON更好。
JSON与XML的相同之处
- 都是纯文本
- 都具有自我描述性，我们能够理解其含义
- 都具有嵌套的层次结构
- 都可通过JavaScript进行解析，Java等语言也支持解析二者
- 包含的数据都可使用AJAX（Asynchronous Javascript And XML）进行传输
JSON与XML的不同之处
- JSON没有结束标签，XML严格遵循格式化
- JSON更简洁
- JSON读写速度更快
- JSON能够使用JavaScript内置的eval()函数进行解析
- JSON能使用数组
- JSON不使用保留字
AJAX相关JSON与XML
- AJAX应用程序解析XML的流程：
1.读取XML文档
2.使用XML DOM来循环遍历文档
3.读取值并存储在变量中 - AJAX应用程序解析JSON的流程：
1.读取JSON字符串
2.使用eval()处理JSON字符串
=> 对于AJAX应用程序来说，JSON比XML可以更便捷。
JSON与XML的解析
XML需要使用XML解析器来解析，JSON可以使用标准的JavaScript函数来解析，这也是二者最大不同之一了。
- JSON.parse()：将一个 JSON 字符串转换为 JavaScript 对象。
- JSON.stringify()：于将 JavaScript 值转换为 JSON 字符串。
JSON核心知识
JSON语法规则概述
- 大括号（{}）保存对象的K-V对
- 中括号（[]）保存数组，同类多种元素
- 在K-V对中存储数据
- K-V对中的数据用逗号（,）分隔，K与V之间用冒号（:）分隔
- 六种类型：
- 数字（integer or float）
- 字符串（""）
- 逻辑值（true or false）
- 数组（[]）
- 对象（{}）
- null
JSON对象相关
JSON访问K-V对的对象值
上面的代码可以按照名称访问JSON对象值。
<p>
ID: <span id="js_id"></span><br/>
Name: <span id="js_name"></span><br/>
Age: <span id="js_age"></span><br/>
Email: <span id="js_email"></span><br/>
</p>
读取id属性为例，还有如下两种写法：
- 使用点号（.）访问：
var a = jsonObj.id; - 使用数组式方括号（[]）访问：
var a = jsonObj["id"];
JSON循环读取对象
我们可以使用 for-in 来循环对象读取对象属性和值（参考Java的 for-each 循环）：
for (a in jsonObj) {
document.getElementById("attribute").innerHTML += a + "：" + jsonObj[a]+ "<br>";
}
完整代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JSON</title>
</head>
<body>
<h1>员工信息</h1>
<p id="attribute"></p>
<script>
var jsonObj= {
"id":"1111",
"name":"王富贵",
"age":"30",
"email":"[email protected]"
};
for (a in jsonObj) {
document.getElementById("attribute").innerHTML += a + "：" + jsonObj[a]+ "<br>";
}
</script>
</body>
</html>
运行示例：
JSON修改对象的值
可以直接用点（.）运算符或者方括号（[]）来访问并修改对象的值。
下面的代码，把“王富贵”的名字，改成了“陈二狗”：
jsonObj.name="陈二狗";
完整代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JSON</title>
</head>
<body>
<h1>员工信息</h1>
<p id="attribute"></p>
<script>
var jsonObj= {
"id":"1111",
"name":"王富贵",
"age":"30",
"email":"[email protected]"
};
jsonObj.name="陈二狗";
for (a in jsonObj) {
document.getElementById("attribute").innerHTML += a + "：" + jsonObj[a]+ "<br>";
}
</script>
</body>
</html>
运行示例：
JSON删除对象的值
可以使用delete关键词+点（.）运算符或者方括号（[]）来访问并删除对象的值。
下面的代码，删除了王富贵的年龄和Email：
delete jsonObj.age;
delete jsonObj["email"];
完整代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JSON</title>
</head>
<body>
<h1>员工信息</h1>
<p id="attribute"></p>
<script>
var jsonObj= {
"id":"1111",
"name":"王富贵",
"age":"30",
"email":"[email protected]"
};
delete jsonObj.age;
delete jsonObj["email"];
for (a in jsonObj) {
document.getElementById("attribute").innerHTML += a + "：" + jsonObj[a]+ "<br>";
}
</script>
</body>
</html>
运行示例：
JSON数组相关
数组和对象相似，包括访问、修改、删除的点号（.）和删除的delete关键词。
不过，使用属性名+方括号的访问方式被换成了使用索引数字+方括号的访问方式（参考其他编程语言）
JSON嵌套问题
之前也说了，可以大括号小括号随便嵌套。
读or改的话，只需要符合上面说的访问语法，逐层使用点号即可。
谈谈怎么去理解这个嵌套关系☆☆☆
我想用Java面向对象的知识来说明一下。
-
先说为什么是大括号，为什么是中括号？
系统中可能存在同一类型的很多对象，他们实际上是“平级”的，这时，相当于是数组中存储的多个元素，所以要使用方括号（[]）。
而每个类规定了其对象应该具有的属性，属性有类型，也有其取值，所以K-V对儿表达的正是这种属性名:属性值的关系，它是一个对象内部的。 -
接下来谈谈为什么会嵌套呢？
四种情况吧：- 元素的类型可能是引用类型的，引用类型的对象可能含有某种属性，该属性还是引用类型，这时就出现了层次的嵌套，这是字典套字典，即大括号套大括号。
- 数组可能不是一维的，二维数组是一维的一维数组，所以存在数组套数组，即中括号套中括号。
- 数组的元素可能是引用类型的，该类型可能有很多属性，这就是数组套字典，即中括号套大括号。
- 字典元素的属性中可能有数组，这就是字典套数组，即大括号套中括号。
如此，我们不难理解嵌套的实际意义了。
JSON与String的转换
JSON 通常用于与服务端交换数据。通过网络接收服务器端发来的JSON是String，而通过网络发往服务器的JSON也是String，但我们处理的是JSON，所以设计JSON与String的转换。
转换函数是这样的：
- JSON.parse()：String => JSON
- JSON.stringify()：JSON => String
JSON.parse()
语法格式：
JSON.parse(text[, reviver])
参数说明：
| 参数名称 | 参数意义 | 是否必选 |
|---|---|---|
| text | 有效的JSON字符串 | √ |
| reviver | 每个成员都会调用的、用于转换结果的函数 | × |
实例：
接收到数据：
var str = '{"id":"1111", "name":"王富贵", "age":"30", "email":"[email protected]"}';
JSON.parse()：
var jsonObj = JSON.parse(str);
JSON.stringify()
语法格式：
JSON.stringify(value[, replacer[, space]])
参数说明：
| 参数名称 | 参数意义 | 是否必选 |
|---|---|---|
| value | 要转换的JavaScript值（通常为对象或数组） | √ |
| replacer | 用于转换结果的函数或数组 | × |
| space | 文本添加缩进、空格和换行符 | × |
space参数：
- 值为10以下整数表示这么多空格
- 值为10以上整数表示10个空格
- 可以用其他分隔符表示比如"\t"
实例：
接收到数据：
var jsonObj = {"id":"1111", "name":"王富贵", "age":"30", "email":"[email protected]"};
JSON.parse()：
var str = JSON.stringify(jsonObj);
注意事项：
JSON不允许包含函数，JSON.stringify()会删除JavaScript对象的函数，包括key和value。
真的不建议使用函数，如果非要用，也要先将函数转换为字符串再用。
JSON与Date对象的处理
JSON不能存储Date对象！
如果我们想要存储Date对象，需要将其转换为字符串，再将字符串转换为Date对象。
JSON文件后缀
- JSON文件的文件类型：".json"
- JSON文本的MIME类型：“application/json”
JSON学习工具
JSON语法验证器
JSON在线解析器
推荐菜鸟教程的JSON在线解析器，支持如下功能：
- 格式化
- 压缩
- 验证
- JSON→XML
- JSON→CSV
- JSON→YAML
