JSON 简述
- JSON (JavaScript Object Notation)--JS 对 象导航，是一种轻量级的数据交换格式
- JSON采用完全独立于语言的文本格式，是理想的数据交换语言，易于人阅读和编写，同时也易于机器解析和生成(一般用于提升网络传输速率)。
- 在 JavaScript 中处理 JSON 数据不须要任何特殊的 API 或工具包，可以直接使用
- Java 后台操作 Json 较常用的类库有：net-sf-Json、Gson、Jackson、FastJson 等，其中 Gson 与FastJson 无疑是其中的佼佼者之一
JSON 语法
- JSON 语法是 JavaScript 对象表示语法的子集，可以直接使用。
- 一个花括号表示一个JSON对象，{}表示一个JSON对象，[{}] 表示json数组
- 键与值用冒号分隔，每个数据之间用逗号分隔；
- 使用方括号保存 JSON 数组，数组值使用“,”分割；
- JSON 数据使用’”键”：”值”’ 形式，其中键名必须是字符串，而值 可以是以下任意类型：
- 数值（整数，浮点数）
- 字符串（在双引号中）
- 逻辑值（true/false）
- 数组（在方括号中）
- 对象（在花括号中）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- BootCDN提供了很多如JQuery、Chart.js、ECarts.js等等，BootCDN官网地址：http://www.bootcdn.cn/-->
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<style type="text/css">
</style>
<!-- 以下都是常见的写法之一
1、{}表示一个JSON对象，[{}] 表示json数组
2、键必须使用双引号，值是字符串时也要使用双引号
3、数据直接使用 逗号分隔，-->
<script type="text/javascript">
let json1 = {"name": "华安", "age": 35};
let json2 = [{"name": "华安", "age": 35}, {"name": "宁王", "age": 55}];
let json3 = {"name": "华安", "age": 35, "wife": {"name": "九娘", "age": 18, "isMarry": true}};
let json4 = {"name": "华安", "age": 35, "flatyear": [1856, 1857, 1858, 1859]};
let json5 = {
"name": "华安",
"age": 35,
"servant": [{"id": "9521", "name": "小桌子"}, {"id": null, "name": "小凳子"}]
};
// JSON是js内置的对象，stringify方法将json对象转为json格式的字符串
console.log("json1："+JSON.stringify(json1));
console.log("json2："+JSON.stringify(json2));
console.log("json3："+JSON.stringify(json3));
console.log("json4："+JSON.stringify(json4));
console.log("json5："+JSON.stringify(json5));
</script>
</head>
<body>
</body>
</html>
JSON 对象 CRUD
- 在 Java 后台使用 Gson、FastJson 等库来操作 JSON 是非常方便的，前台 JS 中有时也需要进行 创建JSON对象，然后 增加、修改、删除、查看等操作。
对象创建
<!-- 以下都是常见的写法之一 -->
<script type="text/javascript">
// 创建一个空的json对象
let jsonObj1 = {};
// 创建一个空数组，可用于存放json对象，js中的数组长度是可变的
let jsonArr = [];
</script>添加属性
- 添加属性时，如果key已经存在，则直接覆盖
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- BootCDN提供了很多如JQuery、Chart.js、ECarts.js等等，BootCDN官网地址：http://www.bootcdn.cn/-->
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<style type="text/css">
</style>
<script type="text/javascript">
// 创建一个空的json对象
let jsonObj1 = {};
//添加属性与取值相对应，同样是两种方式，推荐第二种 []
jsonObj1.name = "华安";
jsonObj1["age"] = 35;
console.log("jsonObj1：" + JSON.stringify(jsonObj1));
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- BootCDN提供了很多如JQuery、Chart.js、ECarts.js等等，BootCDN官网地址：http://www.bootcdn.cn/-->
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<style type="text/css">
</style>
<script type="text/javascript">
// 创建一个空的数组对象,用于存放 json 对象
let jsonArray = [];
for (let i = 0; i < 2; i++) {
let jsonObj = {};
// json 对象操作属性推荐方式["key"]，不用".key"
jsonObj["name"] = "华安" + i;
jsonObj["age"] = 35;
// 数组对象也是js内置的对象,push方法为数组添加元素
jsonArray.push(jsonObj);
}
console.log("jsonObj："+JSON.stringify(jsonArray));
</script>
</head>
<body>
</body>
</html>
删除属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- BootCDN提供了很多如JQuery、Chart.js、ECarts.js等等，BootCDN官网地址：http://www.bootcdn.cn/-->
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<style type="text/css">
</style>
<script type="text/javascript">
let json1 = {"name": "华安", "age": 35};
console.log(JSON.stringify(json1));
// 删除name属性
delete json1.name;
console.log(JSON.stringify(json1));
// 删除age属性
delete json1["age"];
console.log(JSON.stringify(json1));
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- BootCDN提供了很多如JQuery、Chart.js、ECarts.js等等，BootCDN官网地址：http://www.bootcdn.cn/-->
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<style type="text/css">
</style>
<script type="text/javascript">
let json2 = [{"name": "华安", "age": 35}, {"name": "宁王", "age": 55}];
console.log(JSON.stringify(json2));
// 删除json数组第一个json对象的name属性
delete json2[0].name;
console.log(JSON.stringify(json2));
// 删除json数组第二个json对象的age属性
delete json2[1]["age"];
console.log(JSON.stringify(json2));
</script>
</head>
<body>
</body>
</html>
修改属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- BootCDN提供了很多如JQuery、Chart.js、ECarts.js等等，BootCDN官网地址：http://www.bootcdn.cn/-->
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<style type="text/css">
</style>
<script type="text/javascript">
let json2 = [{"name": "华安", "age": 35}, {"name": "宁王", "age": 55}];
console.log(JSON.stringify(json2));
// 为json对象添加属性时，如果属性已经存在，在直接覆盖
json2[0]["name"] = "华太师";
json2[1]["age"] = "66";
console.log(JSON.stringify(json2));
</script>
</head>
<body>
</body>
</html>
查看属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- BootCDN提供了很多如JQuery、Chart.js、ECarts.js等等，BootCDN官网地址：http://www.bootcdn.cn/-->
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<style type="text/css">
</style>
<script type="text/javascript">
let json2 = [{"name": "华安", "age": 35, "isMarry": true, "addr": null}, {"name": "宁王", "age": 55, "addr": "西湖"}];
console.log(JSON.stringify(json2));
let loopJsonObj = null;
// 循环json 数组对象
for (let i = 0; i < json2.length; i++) {
// 取 json 对象
loopJsonObj = json2[i];
// json 对象取值，[key]、.key两种方式； key 不存在时返回 undefined
console.log(loopJsonObj["name"] + ":" + loopJsonObj.age + ":" + loopJsonObj["isMarry"] + ":" + loopJsonObj["addr"]);
}
</script>
</head>
<body>
</body>
</html>
JSON. parse()
- JSON.parse() 方法用于将一个 JSON 字符串转换为 JSON 对象
-
语法：JSON.parse(text[, reviver])
-
参数说明：
- text:必需， 一个有效的 JSON 字符串。
- reviver: 可选，一个转换结果的函数， 将为对象的每个成员调用此函数。
- 返回值：返回给定 JSON 字符串转换后的对象。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- BootCDN提供了很多如JQuery、Chart.js、ECarts.js等等，BootCDN官网地址：http://www.bootcdn.cn/-->
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
// 手写一个具有json格式的字符串，此时里面value无论什么类型，都必须加双引号
let jsonStr = "{\"id\":\"9527\",\"name\":\"华安\",\"isMarry\":\"true\"}";
// 将json字符串转换json对象
let jsonObj = JSON.parse(jsonStr);
console.log(jsonObj["id"] + "::" + jsonObj["name"]+"::"+jsonObj["isMarry"]);
</script>
</head>
<body>
</body>
</html>
JSON. stringify()
- JSON.stringify() 方法用于将 JavaScript 值转换为 JSON 字符串。
- 语法：JSON.stringify(value[, replacer[, space]])
- 参数说明：
- value:必需， 要转换的 JavaScript 值（通常为对象或数组）。
- 返回值：返回包含 JSON 文本的字符串。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- BootCDN提供了很多如JQuery、Chart.js、ECarts.js等等，BootCDN官网地址：http://www.bootcdn.cn/-->
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
let json1 = {"name": "华安", "age": 35};
let json2 = [{"name": "华安", "age": 35}, {"name": "宁王", "age": 55}];
// 将json 对象转为 json 字符串
let jsonStr1 = JSON.stringify(json1);
// 将json 数组转为 json 字符串
let jsonStr2 = JSON.stringify(json2);
console.log("jsonStr1："+jsonStr1);
console.log("jsonStr2:"+jsonStr2);
</script>
</head>
<body>
</body>
</html>
