JS json

最新推荐文章于 2025-11-26 18:40:17 发布

原创最新推荐文章于 2025-11-26 18:40:17 发布 · 193 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#JS #json

本文深入解析JavaScript对象的概念、创建方法及与JSON数据的区别与联系。通过实例演示了对象属性与方法的定义、访问与遍历，以及JSON数据的语法、字符串与对象的相互转换。最后展示了如何利用JSON数据生成表格。

第九章 json数据处理

第一节 javascript对象

1.概念

对象: 拥有具体的形象，包含特征(属性)和行为(方法)两个方面。以属性-值的方式来描述对象数据。

例如：

令狐冲这个人就是一个对象，他具有的属性:姓名,性别,年龄。他具有的行为:吃，喝，玩，学习。

奔驰车这个车也是一个对象，它具有的属性:品牌，价格，颜色。它具有的行为:跑，刹车，加油。

2.示例

创建js对象有两种方式：

第一种方式:new Object()

<!DOCTYPE html>
<html>
 <head>
  <title> my page </title>
  <style type="text/css">
 
  </style>

  <script type="text/javascript">
	//创建一个js对象
	var p =new Object();
	//点:对象属性访问符
	//属性可以动态创建
	p.name="令狐冲";
	p.sex="男";
	p.age =18;
	p.tall = 1.8;
	//自我介绍的方法
	p.introduce=function(){
		alert(this.name+" "+this.sex+" "+this.age+" "+this.tall);
	}
	//访问对象的name属性
	//alert(p.name);
	//用下标方式访问属性
	//alert(p["name"]);

	//调用对象的方法
	//p.introduce();

	//使用for迭代对象属性，遍历对象
	/*for(var x in p)
	{
		alert(x+" --- "+p[x]);
	}*/

	//使用Object.keys()获取对象的属性数组
	var keys = Object.keys(p);
	alert(keys+" "+keys.length);
	for(var i=0;i<keys.length;i++)
	{
		var k = keys[i];
		document.write(k+" ---> "+p[k]+"<br/>");
	}
  </script>
 </head>

 <body>
  
 </body>
</html>

第二种方式:{}

<!DOCTYPE html>
<html>
 <head>
  <title> my page </title>
  <style type="text/css">
 
  </style>

  <script type="text/javascript">
	//var p =new Object();
	//使用字面量{}创建js对象
	var p = {
		name:"张三",
		sex:"男",
		age:18,
		tall:1.7,
		show:function(){
			alert(this.name+" "+this.sex+" "+this.age+" "+this.tall);
		}
	};
	//使用.访问对象属性
	//alert(p.name);
	//使用索引方式访问属性,此时属性要加引号
	//alert(p["name"]);
	//调用对象的方法
	//p.show();
	for(var x in p)
	{
		alert(x+" --- "+p[x]);
	}
  </script>
 </head>

 <body>
  
 </body>
</html>

访问对象内容的方法:

	//访问对象的name属性
	//alert(p.name);
	//用下标方式访问属性
	//alert(p["name"]);

	//调用对象的方法
	//p.introduce();
	
	//使用for迭代对象属性，遍历对象
	/*for(var x in p)
	{
		alert(x+" --- "+p[x]);
	}*/

	//使用Object.keys()获取对象的属性数组
	var keys = Object.keys(p);
	alert(keys+" "+keys.length);
	for(var i=0;i<keys.length;i++)
	{
		var k = keys[i];
		document.write(k+" ---> "+p[k]+"<br/>");
	}

3.数组和对象的关系

数组本质上也是对象

<!DOCTYPE html>
<html>
 <head>
  <title> my page </title>
  <style type="text/css">
 
  </style>

  <script type="text/javascript">
	//var p=new Object();
	//p.name="张三";
	//p["name"]="张三";
	//alert(p.name);

	/*var ary = new Array();
	ary["a"]=100;
	ary["b"]=200;
	ary["c"]=300;

	//alert(ary.length);
	for(var x in ary)
	{
		alert(x+" "+ary[x]);
	}*/

	var ary =new Array();
	ary["第一排"]=["张三","李四","王武"];
	ary["第二排"]=["郭靖","黄蓉","洪七公"];

	alert(ary["第一排"]);
  </script>
 </head>

 <body>
  
 </body>
</html>

省市级联

<!DOCTYPE html>
<html>
 <head>
  <title> my page </title>
  <style type="text/css">
 
  </style>

  <script type="text/javascript">
	var ary = new Array();
	ary["河南"]=["郑州","洛阳"];
	ary["河北"]=["石家庄","保定"];
	
	//加载省份
	function loadPro()
	{
		//获取省份下拉框
		var selProvince = document.getElementById("pro");
		for(var p in ary)
		{
			//alert(p);
			//创建option属性
			var opt = document.createElement("option");
			opt.innerHTML=p;
			opt.value=p;
			//将option元素添加到下拉框中
			selProvince.appendChild(opt);
		}
	}

	function loadCity()
	{
		//获取city下拉框
		var selCity = document.getElementById("city");
		//每次加载市之前先清空市的下拉框
		selCity.innerHTML="";

		//获取省份的值
		var province = document.getElementById("pro").value;
		//alert(province);
		//根据省份得到对应的市
		//alert(ary[province]);
		var citys = ary[province];
		

		for(var c in citys)
		{
			//获取对应属性索引的值
			var city = citys[c];
			//创建option元素
			var opt = document.createElement("option");
			opt.innerHTML=city;
			opt.value=city;
			//将市选项元素添加到市下拉框中
			selCity.appendChild(opt);
		}
	}


  </script>
 </head>

 <body οnlοad="loadPro()">
	省份:
	<select id="pro" οnchange="loadCity()">
		<option value="">请选择</option>
	</select>
	市:
	<select id="city">
	</select>
 </body>
</html>

第二节 json对象

1.概念

json: javascript对象表示法(javascript Object nonation)，使用轻量级的对象结构，从js对象演化而来，但在概念上与js对象有区别。json对象主要用于跨平台的数据传输。

语法:

var json对象 = {"属性1":值,"属性2":值};

说明: json对象用{}进行定义，其中属性必须用双引号括起来。值如果是字符串也必须用双引号括起来。另外，json中不能定义函数。

2.示例

 var p = {
	"name":"张三",
	"sex":"男",
	"age":18,
	"tall":1.7
  };

  alert(p["name"]+" "+p.name);

3.json字符串与js对象的转换

使用JSON.parse(字符串)将json格式字符串转为js对象

    //json格式的字符串
	var pStr = '{"name":"孙悟空","age":500}';
	//alert(pStr+" --> "+typeof(pStr));
	//JSON.parse()：将json格式的字符串转为javascript对象
	var pObj = JSON.parse(pStr);
	//alert(pObj+" --> "+typeof(pObj));
	//在火狐控制台输出
	console.log(pObj);

使用JSON.stringify(js对象),将js对象转为json格式字符串

	//js对象
	var pObj={name:"张三",age:100};
	//JSON.stringify():将js对象转为json字符串
	var pStr = JSON.stringify(pObj);
	alert(pStr);

第三节使用json数据生成表格

<!DOCTYPE html>
<html>
 <head>
  <title> my page </title>
  <style type="text/css">
 
  </style>

  <script type="text/template" id="temp">
	<tr>
		<td>name</td>
		<td>sex</td>
	</tr>
  </script>

  <script type="text/javascript">
  var stus = [
	{"name":"张三","sex":"男"},
	{"name":"李四","sex":"女"},
	{"name":"王五","sex":"女"},
	{"name":"赵六","sex":"男"}
  ];
  /*
  for(var i=0;i<stus.length;i++)
  {
	var s = stus[i];

	alert(s.name+" "+s.sex);
  }*/

  window.οnlοad=function(){
	  var tmp = document.getElementById("temp").innerHTML;

	  var str = "";
	  for(var i=0;i<stus.length;i++)
	  {
		var s = stus[i];
		str+=tmp.replace("name",s.name)
		        .replace("sex",s.sex)

	  }

	  //alert(str);
	  document.getElementById("tbd").innerHTML=str;
  }
  </script>
 </head>

 <body>
  <table border="1" align="center">
	<thead>
		<tr>
			<th>姓名</th>
			<th>性别</th>
		</tr>
	</thead>
	<tbody id="tbd">
		
	</tbody>
  </table>
 </body>
</html>