javascript基础练习——json格式

最新推荐文章于 2025-12-20 21:53:04 发布

原创最新推荐文章于 2025-12-20 21:53:04 发布 · 4.2k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript #HTML

javaWeb 专栏收录该内容

33 篇文章

订阅专栏

这篇博客介绍了JSON格式在JavaScript中用于数据传输的特点，并通过两个练习展示了如何创建和操作JSON对象。练习1创建了一个班级对象，包含学生姓名和性别。练习2定义了一个包含部门和员工信息的数组，展示如何遍历并打印员工的姓名、部门和技能。

json格式

在Javascript表示对象的简写，格式非常的轻量，因此将这个格式称为json格式，被用于传输数据使用的一种格式。

练习1.定义一个班级对象，班级编号101，班级名称“计算机1101”，该班级有两个学生，姓名和性别分别时tom，男和rose，女，页面提示框显示班级所有学生姓名和性别。（分别使用两种方式编写创建对象）

<!doctype html>
<html lang="en">
 <head>
	<title>test1</title>
 </head>
 <body>
  <script>
	var classes={
		num:101,
		name:"计算机1101",
		student:[
		{
			name:"tom",
			sex:'男'
		},
		{
			name:"rose",
			sex:'女'
		}
		] //放到数组中
	};
	for(var i=0;i<classes.student.length;i++){
		alert("姓名："+classes.student[i].name+",性别："+classes.student[i].sex);
	}
	
  </script>
 </body>
</html>

页面提示框显示效果：

练习2.定义一个数组，装载如下数据后，打印每个员工的姓名、部门名称和技能名称。

部门编号	部门名称
5001	财务部
5002	研发部

员工编号	员工姓名		部门编号
101	张三丰		5001
102	郭靖		5002
员工编号		技能名称
101		Java
101		C++
102		C
102		Java

提示：在js中定义一个数组，存储两个员工对象，员工与部门是一对一，员工与技能是一对多。

<!doctype html>
<html lang="en">
 <head>
  <title>test2</title>
 </head>
 <body>
  <script>
	var depts=[
		{
			num:5001,
			name:"财务部",
			emps:[
				{number:101,name:"张三丰",skills:["Java","C++"]}
			]
		},
		{
			num:5002,
			name:"研发部",
			emps:[
				{number:102,name:"郭靖",skills:["C","Java"]}
			]
		}
		];
		for(var i=0;i<depts.length;i++){
			 for(var j=0;j<depts[i].emps.length;j++){
				document.write("员工姓名："+depts[i].emps[j].name+"，部门名称："+depts[i].name+"，技能名称：");
				for(var k=0;k<depts[i].emps[j].skills.length;k++){
					document.write(depts[i].emps[j].skills[k]+" ");
				}
				document.write("<br>");
			}
		}
  </script>
 </body>
</html>

显示效果：