JSON详解-使用示例
json
适用于现代 C++ 的 JSON。
项目地址:https://gitcode.com/gh_mirrors/js/json
免费下载资源
·
文章目录
JSON
- 概述:JSON全称 JavaScript Object Notation,是一种轻量级的数据交换格式、是一种纯文本。JSON相对于XML来说读写的速度更快。
- 作用:
- JSON 是用于存储和传输数据的格式
- JSON 通常用于服务端向网页传递数据
- 语法规则
- 数据为 键/值 对,一个名称对应一个值,中间用 “:”
- 数据由逗号分隔
- 大括号保存对象,对象可以保存多个 键/值 对
- 方括号保存数组
- JSON值
- 数字(整数或浮点数)
- 字符串(双引号中)
- 逻辑值(true 或 false)
- 数组(在中括号中),数组中可包含多个对象
- 对象(在大括号中)
- null
- JSON 文件
- JSON 文件的文件类型是 .json
- JSON 文本的 MIME 类型是 application/json
JSON 举例
{"student":[
{"name":"张三","address":"河南","age":20},
{"name":"李四","address":"北京","age":25},
{"name":"王五","address":"上海","age":30}
]}
student 是一个对象,里边有三条对象的信息
“name”:“张三” 等同于 JavaScript的 name=“张三”
// javascript 语法,等同于上述 json 案例
var student = [
{"name":"张三","address":"河南","age":20},
{"name":"李四","address":"北京","age":25},
{"name":"王五","address":"上海","age":30}
];
// 找到张三
student[0].name;
JSON 和 XML 对比
- 概述:JSON 和 XML 都用于接收 web 服务端的数据
- XML 实例,和上述 JSON 实例等同
<student>
<s>
<name>张三</name> <address>河南</address> <age>20</age>
</s>
<s>
<name>李四</name> <address>北京</address> <age>25</age>
</s>
<s>
<name>王五</name> <address>上海</address> <age>30</age>
</s>
</student>
- 不同之处
- JSON 不需要结束标签
- JSON 更加简短
- JSON 读写速度更快
- JSON 可以使用数组
- XML 需要使用 XML 解析器来解析,JSON 使用标准的 JavaScript 函数来解析。
JSON 对象
访问对象
-
方式一:使用 “.”
var student,username; student = {"name":"张三","address":"河南","age":30}; username = student.name;
-
方式二:使用 “[]”
var student,username; student = {"name":"张三","address":"河南","age":30}; username = student["name"];
循环对象
- “for-in”来循环对象的属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p id="demo"></p>
<script>
// student 是一个对象
var student = {"name":"张三","address":"河南","age":30};
// 此时的 x 是代表的 键值
for(x in student){
document.getElementById("demo").innerHTML += x + "--" + student[x] + "<br>";
}
</script>
</body>
</html>
嵌套 JSON 对象
-
实例
student{ "name":"张三", "address":"河南", "technologys":{ "t1":"Java", "t2":"Python", "t3":"Go" } }
-
访问
x = student.technologys.t1; // 或 x = student.technologys["t1"];
删除对象属性
-
使用 delete 关键字来删除 JSON 对象的属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <p id="demo"></p> <script> var student = { "name":"张三", "address":"河南", "technologys":{ "t1":"Java", "t2":"Python", "t3":"Go" } } // 删除 t3 这条数据 delete student.technologys.t3; // 此时 x 就是 代表 t1、t2,因为 t3 被删除了 for(x in student.technologys){ document.getElementById("demo").innerHTML += x + "--" + student.technologys[x] + "<br>"; } </script> </body> </html>
JSON 和 JavaScript 互相转换
- JSON.parse():将一个 JSON 字符串转换为 JavaScript 对象
- JSON.stringify():将 JavaScript 对象转换为 JSON 字符串
JSON.parse()
-
JSON 通常用于与服务端交换数据,在接收服务器数据时一般是字符串
-
语法
JSON.parse(text[,reviver])
text:必需,一个有效的 JSON 字符串
reviver:可选,一个转换结果的函数,将为对象的每个成员调用此函数
-
示例代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <p id="demo"></p> <script> var obj = JSON.parse('{"student":[\n' + ' {"name":"张三","address":"河南","age":20},\n' + ' {"name":"李四","address":"北京","age":25},\n' + ' {"name":"王五","address":"上海","age":30}\n' + ']}'); document.getElementById("demo").innerHTML = obj.student[0].name + ":" + obj.student[0].address; </script> </body> </html>
日期异常
- 概述:JSON 不能存储 Date 对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p id="demo"></p>
<script>
var text = '{"name":"张三","age":30,"address":"北京","createDate":"2024-01-01"}';
var obj = JSON.parse(text,function (key, value){
// 如果 key 等于 createDate 这个字符串,则返回日期对象
if(key == "createDate"){
return new Date(value);
} else{ // 否则返回 字符串值
return value;
}
});
document.getElementById("demo").innerHTML = obj.name + "创建日期:" + obj.createDate;
</script>
</body>
</html>
解析函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p id="demo"></p>
<script>
var text = '{"name":"清华大学","rank":"function(){return 1}","address":"北京"}';
var obj = JSON.parse(text);
// 字符串转函数
obj.rank = eval("("+ obj.rank +")");
document.getElementById("demo").innerHTML = obj.name + "学校排名:" + obj.rank();
</script>
</body>
</html>
注意:将 函数作为字符串存储,然后再将字符串转换为函数,eval 方法的使用可以往下看,下边有解释
JSON.stringify()
-
JSON 通常用于与服务端交换数据,在发送服务器数据时一般是字符串
-
语法
JSON.stringifg(value[,replacer[,space]]);
value:必需,要转换的 JavaScript 值(通常为对象或数组)
replacer:可选,用于转换结果的函数或数组
space:可选,文本添加缩进、空格和换行符,space是数字,指定数目的空格
-
示例代码,对象转换
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <p id="demo"></p> <script> // 这是一个 JavaScript 对象 var obj = {"name":"张三","address":"河南","age":30}; // 转换成一个 JSON字符串 var s = JSON.stringify(obj); document.getElementById("demo").innerHTML = s; </script> </body> </html>
-
示例代码,数组转换
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <p id="demo"></p> <script> var arr = [ {"name":"张三","address":"河南","age":30}, {"name":"李四","address":"湖北","age":35} ]; var s = JSON.stringify(arr); document.getElementById("demo").innerHTML = s; </script> </body> </html>
日期异常
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p id="demo"></p>
<script>
// 创建一个对象
var obj = {"name":"小哼","createDate":new Date(),"age":25};
// 对象转字符串
var s = JSON.stringify(obj);
document.getElementById("demo").innerHTML = s;
</script>
</body>
</html>
注意:将对象转换成了字符串,可以利用parse再转成对象
解析函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p id="demo"></p>
<script>
var obj = {"name":"小哼","age":function (){return 25}};
// 函数转换字符串
obj.age = obj.age.toString();
var s = JSON.stringify(obj);
document.getElementById("demo").innerHTML = s;
</script>
</body>
</html>
注意:函数转换字符串-使用 toString() 方法
JSON解析器
-
概述:eval() 函数可将 JSON 文本转换成 JavaScript 对象
-
语法
var obj = eval("(" + text + ")");
-
示例代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <p id="demo"></p> <script> // JSON 文本 var text = '{"student":[\n' + ' {"name":"张三","address":"河南","age":20},\n' + ' {"name":"李四","address":"北京","age":25},\n' + ' {"name":"王五","address":"上海","age":30}\n' + ']}'; // 调用 eval 函数,将 JSON 字符串转换成 JavaScript 对象 var obj = eval("("+ text +")"); document.getElementById("demo").innerHTML += obj.student[0].name; document.getElementById("demo").innerHTML += obj.student[1].address; </script> </body> </html>
GitHub 加速计划 / js / json
41.72 K
6.61 K
下载
适用于现代 C++ 的 JSON。
最近提交(Master分支:1 个月前 )
960b763e
4 个月前
8c391e04
6 个月前
更多推荐
已为社区贡献3条内容
所有评论(0)