第九讲 JavaScript对象编程（五）

最新推荐文章于 2023-08-07 09:43:13 发布

鵼鷡

最新推荐文章于 2023-08-07 09:43:13 发布

阅读量65

点赞数 1

文章标签： javascript

本文链接：https://blog.csdn.net/llXlI/article/details/115439101

版权

系列课程目录

第九讲 JavaScript对象编程（五）

前言

JavaScript JSON对象

提示：以下是本篇文章正文内容，下面案例可供参考

一、JSON对象

1.初始JSON对象

JSON（JavaScript Object Notation）
JS对象表示法，是一种轻量级的数据交换格式
之所以是JS的对象表示法是因为JS的语法简洁，更易于利用和表达
JSON虽然使用JavaScript语法来描述数据对象，但是 JSON 仍然独立于语言和平台，它可以被任何编程语言读取以及作为数据格式传递。它是目前服务端与客户端交换数据中使用最为广泛的标准格式
在了解JSON对象之前，先让我们来了解一下JS对象：

//JS对象的格式
var person={
	height:'178cm',
	weight:'48kg',
	age:21,
	sex:'woman'
}

通过上面的格式我们可以得出，JS的对象的特征：
1、使用对象的具体“属性”需要用“{}”括起来
2、key:value的键值对格式
3、每个属性结束后用逗号分隔
4、值类型可以是常用的number、string、boolean、object、null

下面我们再来了解一下JS对象的具体访问

//JS对象一般有两种访问方式
//1、先声明后赋值
var person={}
person.weight='48kg'

//2以[]的方式使用变量赋值
var person={}
var x='weight'
person[x]='178cm'

当访问未定义的属性时会返回undefined

2.JS对象的复杂格式

JS对象有很多复杂格式，常见的主要有三种：

//1、其属性值也为对象（类似于二维数组）
var person{
	man:{
		sex:'man'
	}
	woman:{
		sex:'woman'
	}
}
//访问格式：person.woman.sex

//2、值为数组
var date{
	number:[1,4,2,74,3],
	String:['fxg','wsr','zs']
}
//访问格式：date.String[0]

//值为函数
var date={
	show:function(){
		console.log('show date');
	}
}
//访问方法：date.show()

3.JSON对象的格式

JSON对象有两种格式：

//对象格式
{
	"height":'178cm',
	"weight":'47kg',
	"age":24,
	"sex":true
}
//数组对象格式
[
{
	"name":'Tom',
	"height":'178cm',
	"weight":'47kg',
	"age":24,
	"sex":true
},
{
	"name":'Jack',
	"height":'168cm',
	"weight":'43kg',
	"age":22,
	"sex":false
}
]

上面介绍了这么多，我们不禁产生了疑惑，JS和JSON有什么区别吗？
既然都提出来了，那么两者肯定都是有区别的。
首先我们应该明确的一点就是：
JS对象！=JSON
先要明白：JSON只是一种数据传输格式，它本身传递的就是数据，且可以被任何程序处理，而JS对象只能通过JS脚本引擎处理。两者在广义上不能等同

4.JS与JSON对象的转换

JSON.stringify():JS对象转换为JSON格式

JSON.stringify({id:1,name:'Tom'})

JSON.parse():将JSON字符串转换为JS对象

var str='{"id":1,"name":'Tom'}'
var obj=JSON.parse(str)

拓展：
统计数组中元素出现次数；

var arr=[4,8,9,2,4,7,5,9,8,6,5]
var result=arr.reduce(function(a,b){
	if(b in a){
		a[b]++;
	}else{
		a[b]=1
	}
	return a;
},{})

拓展：
使用sort对JSON排序：

var date=
[
{name：'TOM',age：50},
{name：'Jack',age：17},
{name：'Bob',age：23}
]
date.sort(function(a,b){
	return a.age=b.age
})

二、课堂作业

1.按照要求完成任务

如下（示例）：

在这里插入图片描述

2.解析代码

任务9-1

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			var text = "<tr><td>序号</td><td>事项</td><td>时间</td></tr>";
			var arr = [];
			var sltext = "";
			var count = 1;
			var things = [{
				thing: [],
				time: [],
			}]

			function tj() {
				if (!(things[0]["time"].includes(document.getElementById("time").value))) {
					things[0]["thing"].push(document.getElementById("vl").value)
					things[0]["time"].push(document.getElementById("time").value)
					text += "<tr>"
					text += "<td>" + count + "</td>" + "<td>" + things[0]["thing"][things[0]["thing"].length - 1] + "</td>" +
						"<td>" + things[0]["time"][things[0]["time"].length - 1] + "</td>"
					text += "</tr>"
					sltext += "<option value='" + count + "'>" + count + "</option>"
					document.getElementById("yxj1").innerHTML = sltext
					document.getElementById("yxj2").innerHTML = sltext
					count++
					document.getElementById("zhi").innerHTML = text
				}

			}

			function sc() {
				text = ""
				sltext = ""
				var obj = document.getElementById("yxj1");
				var index = obj.selectedIndex;
				things[0]["thing"].splice(index, 1)
				things[0]["time"].splice(index, 1)
				for (var i = 0; i < things[0]["thing"].length; i++) {
					text += "<tr>"
					text += "<td>" + (i + 1) + "</td>" + "<td>" + things[0]["thing"][i] + "</td>" + "<td>" + things[0]["time"][
						i] + "</td>"
					text += "</tr>"
					sltext += "<option value='" + (i + 1) + "'>" + (i + 1) + "</option>"
				}
				document.getElementById("yxj1").innerHTML = sltext
				document.getElementById("yxj2").innerHTML = sltext
				count--
				document.getElementById("zhi").innerHTML = text
			}

			function gx() {
				text = ""
				var obj = document.getElementById("yxj2");
				var index = obj.selectedIndex;
				things[0]["thing"].splice(index, 1, document.getElementById("gl").value)
				things[0]["time"].splice(index, 1, document.getElementById("gtime").value)
				for (var i = 0; i < things[0]["thing"].length; i++) {
					text += "<tr>"
					text += "<td>" + (i + 1) + "</td>" + "<td>" + things[0]["thing"][i] + "</td>" + "<td>" + things[0]["time"][
						i] + "</td>"
					text += "</tr>"
				}
				document.getElementById("zhi").innerHTML = text
			}
		</script>
		待办事项
		<input type="text" name="" id="vl" value="" /><br />
		时间
		<input type="text" name="" id="time" value="" />
		<input type="button" name="" id="tj" value="添加" onclick="tj()" />
		<br>删除第
		<select id="yxj1">

		</select>
		个项目
		<input type="button" name="" id="sc" value="删除" onclick="sc()" />
		<br>
		修改第
		<select id="yxj2">

		</select>
		个项目为<br>
		事项
		<input type="text" name="" id="gl" value="" />
		时间
		<input type="text" name="" id="gtime" value="" />
		<input type="button" name="" id="gx" value="更新" onclick="gx()" />
		<table border="1" id="zhi">
		</table>
	</body>
</html>