JSON学习（二）——语法及数据类型

最新推荐文章于 2021-12-29 09:21:49 发布

Fiona Tracy

最新推荐文章于 2021-12-29 09:21:49 发布

阅读量121

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_44998686/article/details/110286736

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

思维导图

在这里插入图片描述

简单代码

// 对象
{
	key1: value1,
	key2: value2,
	...
}
// 数组
[
	{
		key1: value1,
		key2: value2
	},
	{
		key3: value3,
		key4: value4
	}
]

对象代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<p id="demo">
			学习JSON
			<br />
		</p>
	</body>
	<script type="text/javascript">
	//定义temp变量，里面有对象，且对象里面嵌套三个对象
		var temp = {
			"name": "Fiona",
			"sex": "female",
			"hobbies": {
				"1": "sleeping",
				"2": "eating",
				"3": "dangcing"
			}
		};
		//定义一个函数，进行输出
		function ReadJSON() {
			//输出到网页界面，只有名称，没有值
			for (i in temp) {
				document.getElementById("demo").innerHTML += i + "<br>";
			}
			//输出到网页界面，只值无名称
			for (i in temp.hobbies) {
				document.getElementById("demo").innerHTML += temp.hobbies[i] + "<br>";
			}
			//按F12，输出整个temp到控制台
			console.log("输出整个temp");
			for (i in temp) {
				console.log(i+":"+ temp[i]);
			}
			// 按F12， 输出到控制台
			console.log("输出兴趣");
			var arr = temp.hobbies;
			for (i in arr) {
				console.log(arr[i]);
			}
			//改变值之后再看看
			console.log("输出修改后的hobbies");
			temp.hobbies["1"] = "studying";
			var arr = temp.hobbies;
			for (i in arr) {
				console.log(arr[i]);
			}
			//删除对象属性
			console.log("输出删除后的hobbies");
			delete arr["1"];
			for (i in arr) {
				console.log(arr[i]);
			}
		}
		//调用函数
		ReadJSON();
	</script>
</html>

数组代码

<script type="text/javascript">
		var arr = {
			"name": "网址",
			"num": 3,
			"sites": [
				"Google",
				"Runoob",
				"Taobao"
			]
		}
		var x = arr.sites[0];
		console.log(x);
		
		function ReadJSON() {
			for (i in arr.sites) {
				console.log(arr.sites[i]);
			}
		}
	</script>

嵌套 JSON 对象中的数组

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
	<script type="text/javascript">
		// 定义一个JSON变量,里面含有数组、对象
		var obj = {
			"1": "value1",
			"2": "value2",
			count: 3,
			// 数组结构JSON对象，可以嵌套使用
			person: [{
					id: 1,
					name: "张三"
				},
				{
					id: 2,
					name: "李四"
				}
			],
			// 对象结构JSON对象
			object: {
				id: 1,
				msg: "对象里的对象"
			}
		};
		//从JSON中读数据
		function ReadJSON() {
			alert(obj["1"]);
			alert(obj["2"]);
			// alert(obj.person[0]["name"])
			alert(obj.person[0].name);
			// alert(obj.object["msg"])
			alert(obj.object.msg);
		}

		//向JSON中写数据
		function Add() {
			obj.sex = "男"; //obj["sex"]="男"
		}
		//修改JSON中count的值
		function update() {
			obj.count = 10; //obj["count"]=10
		}
		//删除JSON中的数据
		function Delete() {
			delete obj.count;
		}
		//遍历JSON对象
		function Traversal() {
			for (var c in obj) {
				console.log(c + ":", obj[c]);
			}
		}
		// ReadJSON();
		Add();
		Traversal();
		update();
		Traversal();
		Delete();
		Traversal();
	</script>
</html>

利用双重循环访问的：

<script type="text/javascript">
	var myObj = {
		"name": "网站",
		"num": 3,
		"sites": [{
				"name": "Google",
				"info": ["Android", "Google 搜索", "Google 翻译"]
			},
			{
				"name": "Runoob",
				"info": ["菜鸟教程", "菜鸟工具", "菜鸟微信"]
			},
			{
				"name": "Taobao",
				"info": ["淘宝", "网购"]
			}
		]
	}
	// for-in 来循环访问每个数组(双重循环)
	function ReadJSON2() {
		for (i in myObj.sites) {
			console.log(myObj.sites[i]);
			for (j in myObj.sites[i].info) {
				console.log(myObj.sites[i].info[j]);
			}
		}
	}
	ReadJSON2();
</script>

反思

学到了JSON的基本语法和数据类型，学会了如何定义JSON、使用JSON、JSON的相关操作以及访问JSON对象和数组的方法。

Fiona Tracy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JSON学习（二）——语法及数据类型

思维导图简单代码// 对象{ key1: value1, key2: value2, ...}// 数组[ { key1: value1, key2: value2 }, { key3: value3, key4: value4 }]“对象”代码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title&g
复制链接

扫一扫

专栏目录