JS模块（JSON）

最新推荐文章于 2024-06-11 23:53:06 发布

弎屲

最新推荐文章于 2024-06-11 23:53:06 发布

阅读量275

点赞数

文章标签： json

本文链接：https://blog.csdn.net/cx9977/article/details/108662295

版权

JS模块（JSON）

对象的封装（繁琐方法）

//ES5
	//封装学生对象
	//张三 23 男 吃饭 睡觉
	//使用构造函数来封装
	//定义有参的构造函数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		
	</body>
</html>
<script type="text/jscript">
	function Student(name,age,sex){
		this.name=name;
		this.age=age;
		this.sex=sex;
		this.eat=function(){
			alert("吃饭");
		}
		this.sleep=function(){
			alert("睡觉");
		}
	}
	var s0=new Student("张三",18,"男")
	alert(s0.name);
	alert(s0.age);
	alert(s0.sex);
	s0.eat();
	s0.sleep();
	
	
	var o=new Object();
	o.name="aaa";
	o.age=12;
	alert(o.name);
	alert(o.age);
</script>

JSON概念

JSON: JavaScript Object Notation(JavaScript 对象表示法)

JSON 是存储和交换文本信息的语法。类似 XML。

JSON 比 XML 更小、更快，更易解析

JSON 指的是 JavaScript 对象表示法（JavaScript Object Notation）
JSON 是轻量级的文本数据交换格式
JSON 独立于语言：JSON 使用 Javascript语法来描述数据对象，但是 JSON 仍然独立于语言和平台。JSON 解析器和 JSON 库支持许多不同的编程语言。 目前非常多的动态（PHP，JSP，.NET）编程语言都支持JSON。
JSON 具有自我描述性，更易理解

JSON - 转换为 JavaScript 对象

JSON 文本格式在语法上与创建 JavaScript 对象的代码相同。

由于这种相似性，无需解析器，JavaScript 程序能够使用内建的 eval() 函数，用 JSON 数据来生成原生的 JavaScript 对象。

区别

与 XML 相同之处

- JSON 是纯文本
- JSON 具有"自我描述性"（人类可读）
- JSON 具有层级结构（值中存在值）
- JSON 可通过 JavaScript 进行解析
- JSON 数据可使用 AJAX 进行传输

与 XML 不同之处

- 没有结束标签
- 更短
- 读写的速度更快
- 能够使用内建的 JavaScript eval() 方法进行解析
- 使用数组
- 不使用保留字

为什么使用 JSON？

对于 AJAX 应用程序来说，JSON 比 XML 更快更易使用：
使用 XML
- 读取 XML 文档
- 使用 XML DOM 来循环遍历文档
- 读取值并存储在变量中

使用 JSON
- 读取 JSON 字符串
- 用 eval() 处理 JSON 字符串

JSON 语法

JSON 语法是 JavaScript 语法的子集。

JSON 语法规则

JSON 语法是 JavaScript 对象表示语法的子集。

数据在名称/值对中
数据由逗号分隔
大括号保存对象
中括号保存数组

JSON 名称/值对

JSON 数据的书写格式是：名称/值

JSON 值

数字（整数或浮点数）
字符串（在双引号中）
逻辑值（true 或 false）
数组（在中括号中）
对象（在大括号中）
null

JSON 数字：JSON 数字可以是整型或者浮点型：

JSON 对象：JSON对象在大括号（{}）中书写：对象可以包含多个名称/值

JSON 数组：JSON 数组在中括号中书写：数组可包含多个对象

JSON 布尔值：JSON 布尔值可以是 true 或者 false：

{ "flag":true }

JSON null：JSON 可以设置 null 值：

{ "runoob":null }

JSON 对象

对象语法

{ "name":"runoob", "alexa":10000, "site":null }

JSON 对象使用在大括号({})中书写。

对象可以包含多个 **key/value（键/值）**对。

key 必须是字符串，value 可以是合法的 JSON 数据类型（字符串, 数字, 对象, 数组, 布尔值或 null）。

key 和 value 中使用冒号(:)分割。

每个 key/value 对使用逗号(,)分割

访问对象值

你可以使用点号（.）来访问对象的值：

var myObj, x; myObj = { "name":"runoob", "alexa":10000, "site":null }; x = myObj.name;

你也可以使用中括号（[]）来访问对象的值：

var myObj, x; myObj = { "name":"runoob", "alexa":10000, "site":null }; x = myObj["name"];

循环对象

你可以使用 for-in 来循环对象的属性：

var myObj = { "name":"runoob", "alexa":10000, "site":null }; for (x in myObj) {    document.getElementById("demo").innerHTML += x + "<br>"; }

在 for-in 循环对象的属性时，使用中括号（[]）来访问属性的值：

var myObj = { "name":"runoob", "alexa":10000, "site":null }; for (x in myObj) {    document.getElementById("demo").innerHTML += myObj[x] + "<br>"; }

嵌套 JSON 对象

JSON 对象中可以包含另外一个 JSON 对象

myObj = {    "name":"runoob",    "alexa":10000,    "sites": {        "site1":"www.runoob.com",        "site2":"m.runoob.com",        "site3":"c.runoob.com"    } }

你可以使用点号(.)或者中括号([])来访问嵌套的 JSON 对象

x = myObj.sites.site1; // 或者 x = myObj.sites["site1"];

修改值

你可以使用点号(.)来修改 JSON 对象的值：

myObj.sites.site1 = "www.google.com";

使用中括号([])来修改 JSON 对象的值

myObj.sites["site1"] = "www.google.com";

删除对象属性

使用 delete 关键字来删除 JSON 对象的属性

delete myObj.sites.site1;

使用中括号([])来删除 JSON 对象的属性

delete myObj.sites["site1"]

JSON 数组

JSON 数组在中括号中书写
JSON 中数组值必须是合法的 JSON 数据类型（字符串, 数字, 对象, 数组, 布尔值或 null）
JavaScript 中，数组值可以是以上的 JSON 数据类型，也可以是 JavaScript 的表达式，包括函数，日期，及 undefined。

JSON 对象中的数组

对象属性的值可以是一个数组：

{ "name":"网站", "num":3, "sites":[ "Google", "Runoob", "Taobao" ] }

使用索引值来访问数组：

x = myObj.sites[0];

循环数组

使用 for-in 来访问数组：

for (i in myObj.sites) {    x += myObj.sites[i] + "<br>"; }

使用 for 循环：

for (i = 0; i < myObj.sites.length; i++) {    x += myObj.sites[i] + "<br>"; }

嵌套 JSON 对象中的数组

JSON 对象中数组可以包含另外一个数组，或者另外一个 JSON 对象：

使用 for-in  来循环访问每个数组：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
</html>
<script type="text/jscript">
	var s = {
		"name": "sanwa",
		"age": 18,
		"sex": "男",
		"sal": 14500,
		"car": {
			"kind": "wa",
			"color": "white",
			"price": 800000
		},
		"a": [33, 77, 33, 77]
	}
	//取JSON的数据 键找值
	alert(s.name);
	alert(s.car.color);
	alert(s.a[2]);
	
	//JSON数组
	var J=[
		{
			"name": "sanwa",
			"age": 18,
			"sex": "男",
			"sal": 14500,
		},
		{
			"name": "san",
			"age": 18,
			"sex": "男",
			"sal": 14500,
		},
		{
			"name": "wa",
			"age": 18,
			"sex": "男",
			"sal": 14500,
		}
	];
	
</script>

修改数组值

使用索引值来修改数组值：

myObj.sites[1] = "Github";

删除数组元素

使用 **delete** 关键字来删除数组元素：

delete myObj.sites[1];

JSON嵌套遍历

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
</html>
<script type="text/jscript">
	var s = {
		"name": "sanwa",
		"age": 18,
		"sex": "男",
		"sal": 14500,
		"car": {
			"kind": "wa",
			"color": "white",
			"price": 800000
		},
		"a": [33, 77, 33, 77]
	}
	for (key in s) {
		alert(s[key]);
	}

	//JSON数组
	var J = [{
			"name": "sanwa",
			"age": 18,
			"sex": "男",
			"sal": 14500
		},
		{
			"name": "san",
			"age": 18,
			"sex": "男",
			"sal": 14500
		},
		{
			"name": "wa",
			"age": 18,
			"sex": "男",
			"sal": 14500
		}
	];
	for (var i = 0; i < j.length; i++) {
		var jj = j[i];
		for (key in jj) {
			alert(jj[key]);
		}
	}
</script>

JSON.parse()

JSON 通常用于与服务端交换数据。

在接收服务器数据时一般是字符串。

我们可以使用 JSON.parse() 方法将数据转换为 JavaScript 对象。

语法

JSON.parse(text[, reviver])

参数说明：

**text:**必需，一个有效的 JSON 字符串。
reviver: 可选，一个转换结果的函数，将为对象的每个成员调用此函数。

JSON.stringify()

JSON 通常用于与服务端交换数据。

在向服务器发送数据时一般是字符串。

我们可以使用 JSON.stringify() 方法将 JavaScript 对象转换为字符串。

语法

JSON.stringify(value[, replacer[, space]])

参数说明：

value:

必需，要转换的 JavaScript 值（通常为对象或数组）。
replacer:

可选。用于转换结果的函数或数组。

如果 replacer 为函数，则 JSON.stringify 将调用该函数，并传入每个成员的键和值。使用返回值而不是原始值。如果此函数返回 undefined，则排除成员。根对象的键是一个空字符串：""。

如果 replacer 是一个数组，则仅转换该数组中具有键值的成员。成员的转换顺序与键在数组中的顺序一样。当 value 参数也为数组时，将忽略 replacer 数组。
space:

可选，文本添加缩进、空格和换行符，如果 space 是一个数字，则返回值文本在每个级别缩进指定数目的空格，如果 space 大于 10，则文本缩进 10 个空格。space 也可以使用非数字，如：\t。

JSON数据传输格式

浏览器和服务器 进行数据的交互时 经常采用JSON格式的数据进行交互
	其他语言要把JSON看成JSON格式的字符串
	JSON对象和JSON字符串的互转
	其他语言比如Java 把JSON对象作为字符串来看待
	后台返回给浏览器的数据，会以JSON字符串形式返回
	前台要把JSON字符串，转换成JOSN对象，才能进行键找值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
</html>
<script type="text/jscript">
   //JSON对象
	var s = {"name":"sanwa","age": 18,"sex": "男","sal": 14500}
	var sz = '{"name": "sanwa","age": 18,"sex": "男","sal": 14500}';
alert(s);
var o=JSON.parse(sz);
alert(o.name);
var str=JSON.stringify(sz);
alert(str);
</script>

JSON字符串与对象转换注意事项

	JSON字符串的格式较为严格
	步骤
	1. 将JSON字符串解析为JSON对象
	2.取值

	JSON字符串不要美化 不要有换行和空格，就要用紧凑格式。
	JSON对象键用双引号
	JSON字符串用单引号

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
</html>
<script type="text/jscript">
	//错误 解析失败
	var s = "{"name":"sanwa","age": 18,"sex": "男","sal": 14500}";
	//正确
	var sz = '{"name": "sanwa","age": 18,"sex": "男","sal": 14500}';

</script>

解析JSON请求

	//?后面的叫做请求参数
	//  https://autumnfish.cn/api/joke/list?num=1  后台接口：能给你给你返回数据的一个后台连接地址
	//  http://wthrcdn.etouch.cn/weather_mini?city=商洛

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
</html>
<script type="text/javascript">
	var jsonStr2 ='{"msg":"获取1条笑话","jokes":["想起上学一往事,一次自习课上有俩二货一起睡觉，不巧被校长逮个现行，便使劲拍玻璃大喊：“睡觉的给我出来！”俩二货被惊醒，但还是坐在原位不动，校长急了：“没听见？出来！”俩人还是不动，当时还以为俩人挺有追求的，突然有一个说：“等一下，脚麻了，站不起来。”"]}';
	var obj2 = JSON.parse(jsonStr2);
	alert(obj2.msg);
	var text = obj2.jokes[0];
	alert(text);
</script>

JSON 文件

JSON 文件的文件类型是 “.json”
JSON 文本的 MIME 类型是 “application/json”

待续…

弎屲

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS模块（JSON）

JS模块（JSON）对象的封装繁琐方法//ES5 //封装学生对象 //张三 23 男吃饭睡觉 //使用构造函数来封装 //定义有参的构造函数<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> </head> <body> </body></html>
复制链接

扫一扫