一文精通JSON
1.概述
JSON 是存储和交换文本信息的语法，类似 XML。
JSON 比 XML 更小、更快，更易解析。
- JSON 指的是 JavaScript 对象表示法
- JSON 是轻量级的文本数据交换格式
- JSON 独立于语言：JSON 使用 Javascript语法来描述数据对象，但是 JSON 仍然独立于语言和平台。JSON 解析器和JSON 库支持许多不同的编程语言。 目前非常多的动态（PHP，JSP，.NET）编程语言都支持JSON。
- JSON 具有自我描述性，更易理解
实例1：json格式数据
{
"sites": [
{ "name":"IMUSTCTF" , "url":"www.zzz.com" },
{ "name":"xxx" , "url":"www.xxx.com" },
{ "name":"yyy" , "url":"www.yyy.com" }
]
}
实例2：json在html中的实际应用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>json</title>
</head>
<body>
id:<span id="id"></span><br />
name:<span id="name"></span><br />
age:<span id="age"></span>
<script type="text/javascript">
var user = {
name:"dahe",
age:3,
id:1
};
document.getElementById('id').innerHTML = user.id
document.getElementById('name').innerHTML = user.name
document.getElementById('age').innerHTML = user.age
</script>
</body>
</html>
-----------------------------------
网页输出：
id:1
name:dahe
age:3
2.json语法
JSON 语法是 JavaScript 对象表示语法的子集。
- 数据在名称/值对中
- 数据由逗号分隔 （最后一个数据不加逗号）
- 大括号 {} 保存对象
- 中括号 [] 保存数组，数组可以包含多个对象
JSON 数据的书写格式是：
key : value
名称/值对包括字段名称（在双引号中），后面写一个冒号，然后是值：
"name" : "xxx"
JSON 值可以是：
- 数字（整数或浮点数）
- 字符串（在双引号中）
- 逻辑值（true 或 false）
- 数组（在中括号中）
- 对象（在大括号中）
- null
JSON 文件
- JSON 文件的文件类型是
.json - JSON 文本的 MIME 类型是
application/json
3.JSON vs XML
JSON 和 XML 都用于接收 web 服务端的数据。
JSON 和 XML在写法上有所不同，如下所示：
json:
{
"sites": [
{ "name":"dahe" , "url":"www.xxx.com" },
{ "name":"google" , "url":"www.xxx.com" },
{ "name":"微博" , "url":"www.xxx.com" }
]
}
xml:
<sites>
<site>
<name>dahe</name> <url>www.xxx.com</url>
</site>
<site>
<name>google</name> <url>www.xxx.com</url>
</site>
<site>
<name>微博</name> <url>www.xxx.com</url>
</site>
</sites>
JSON 与 XML 的相同之处：
- JSON 和 XML 数据都是 “自我描述” ，都易于理解。
- JSON 和 XML 数据都是有层次的结构
- JSON 和 XML 数据可以被大多数编程语言使用
JSON 与 XML 的不同之处：
- JSON 不需要结束标签
- JSON 更加简短
- JSON 读写速度更快
- JSON 可以使用数组
为什么 JSON 比 XML 更好？
XML 比 JSON 更难解析。
JSON 可以直接使用现有的 JavaScript 对象解析。
针对 AJAX 应用，JSON 比 XML 数据加载更快，而且更简单
4.JSON 对象
访问对象值
你可以使用点号（.）来访问对象的值：
var myObj, x;
myObj = { "name":"dahe", "alexa":10000, "site":null };
x = myObj.name;
你也可以使用中括号（[]）来访问对象的值：
var myObj, x;
myObj = { "name":"dahe", "alexa":10000, "site":null };
x = myObj["name"];
循环对象
你可以使用 for-in 来循环对象的属性：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>json</title>
</head>
<body>
<span id="data"></span><br />
<script type="text/javascript">
var user = {
name:"dahe",
age:3,
id:1
};
for (x in user){
document.getElementById('data').innerHTML += x + "<br />";
}
</script>
</body>
</html>
---------------------------
浏览器输出：
name
age
id
嵌套 JSON 对象
JSON 对象中可以包含另外一个 JSON 对象：
myObj = {
"name":"dahe",
"alexa":10000,
"sites": {
"site1":"www.xxx.com",
"site2":"m.yyy.com",
"site3":"c.zzz.com"
}
}
你可以使用点号(.)或者中括号([])来访问嵌套的 JSON 对象。
x = myObj.sites.site1;
// 或者
x = myObj.sites["site1"];
修改值
你可以使用点号(.)来修改 JSON 对象的值，也可以使用中括号([])来修改 JSON 对象的值：
myObj.sites.site1 = "www.google.com";
myObj.sites["site1"] = "www.google.com";
删除对象属性
我们可以使用 delete 关键字来删除 JSON 对象的属性：
delete myObj.sites.site1;
delete myObj.sites["site1"]
5.JSON 数组
{
"name":"网站",
"num":3,
"sites":[ "Google", "dahe", "Taobao" ]
}
我们可以使用索引值来访问数组：
x = myObj.sites[0];
你可以使用 for-in 来访问数组：
for (i in myObj.sites) {
x += myObj.sites[i] + "<br>";
}
嵌套 JSON 对象中的数组
myObj = {
"name":"网站",
"num":3,
"sites": [
{ "name":"Google", "info":[ "Android", "Google 搜索", "Google 翻译" ] },
{ "name":"imustctf", "info":[ "video", "arms", "pic" ] },
{ "name":"Taobao", "info":[ "淘宝", "网购" ] }
]
}
我们可以使用 for-in 来循环访问每个数组：
for (i in myObj.sites) {
x += "<h1>" + myObj.sites[i].name + "</h1>";
for (j in myObj.sites[i].info) {
x += myObj.sites[i].info[j] + "<br>";
}
}
6.stringify和parse
stringify
<script type="text/javascript">
var user = {
name:"dahe",
age:3,
sex:"男"
};
// 将js对象转换为json字符串
var str = JSON.stringify(user);
console.log(str);
</script>
可以看到，js对象已经转化为json字符串
parse
<script type="text/javascript">
var user = {
name:"dahe",
age:3,
sex:"男"
};
// 将js对象转换为json字符串
var str = JSON.stringify(user);
console.log(str);
// 将json字符串转换为js对象
var str2 = JSON.parse(str);
console.log(str2);
</script>
var text = '{ "name":"dahe", "initDate":"2022-04-26", "site":"http://imustctf.top"}';
var obj = JSON.parse(text);
obj.initDate = new Date(obj.initDate);
版权声明：本文教程基于菜鸟教程
