✿✿✿JavaScript --- JSON

最新推荐文章于 2024-07-12 16:42:46 发布

naoguaziteng

最新推荐文章于 2024-07-12 16:42:46 发布

阅读量753

点赞数

分类专栏：前端基础知识(HTML/CSS/JS) 文章标签： json 前端 javascript

本文链接：https://blog.csdn.net/naoguoteng/article/details/128408772

版权

前端基础知识(HTML/CSS/JS) 专栏收录该内容

21 篇文章 1 订阅

订阅专栏

JSON（ JavaScript Object Notation ）是用于存储和传输数据的格式（一种轻量级的数据交换格式），通常用于服务端向网页传递数据。 JSON 使用 JavaScript 语法，但是 JSON 格式仅仅是一个文本。文本可以被任何编程语言读取及作为数据格式传递。

JSON 格式在语法上与创建 JavaScript 对象代码是相同的。由于它们很相似，所以 JavaScript 程序可以很容易的将 JSON 数据转换为 JavaScript 对象。

2.JSON的语法规则

JSON有固定的语法格式，如果格式不对，就解析不了。以下 JSON 语法定义了 sites 对象: 3 条网站信息（对象）的数组。即对象 "sites" 是一个数组，包含了三个对象。每个对象为站点的信息（网站名和网站地址）。

{"sites":[
{"name":"Runoob", "url":"www.runoob.com"},
{"name":"Google","url":"www.google.com"},
{"name":"Taobao", "url":"www.taobao.com"}
]}

由上可知语法规则：（ 数据为键/值对 / 数据由逗号分隔 / 大括号保存对象 / 大括号保存对象 / 方括号保存数组 ）

JSON字符串，要有紧凑格式，不要有换行和空格，键要使用双引号引起来。
JSON 对象全部保存在大括号内。就像在 JavaScript 中, 对象可以保存多个键/值对。
JSON 数组保存在中括号内。就像在 JavaScript 中, 数组可以包含对象。


			var arr = [{
				"name": "张三",
				"age": 23,
				"sex": "女"
			}, {
				"name": "李四",
				"age": 24,
				"sex": "女"
			}, {
				"name": "王五",
				"age": 23,
				"sex": "男"
			}]

			for (index in arr) {
				var jsonObj = arr[index];
				for (key in jsonObj) {
					var value = jsonObj[key];
					alert(key + "====" + value);
				}
			}

JSON数据中属性的添加，修改和删除如下代码：

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			var person = {
				"name": "张三",
				"age": 23,
				"car": {
					"carName": "宝马",
					"carColor": "白色",
					"carPrice": 888888
				}
			}
			var name = person.car.carName;
			alert(name);
			//修改一个属性
			person.name = "李四";
			alert(person.name);
			//添加一个 属性
			person.sex = "女";
			console.log(person);
			//删除一个属性
			delete person.age;
			console.log(person);
			var shengfen = {
				"陕西省": ["西安", "商洛", "咸阳"]
			}
			var v = shengfen.陕西省[2];
			alert(v);
		</script>
	</head>
	<body>
	</body>
</html>

3.JSON 字符串转换为 JavaScript 对象

通常我们从服务器中读取的JSON 数据以及网页中显示数据，皆以字符串数据类型展示的。如果想要拿到JSON数据并使用，需要将JSON字符串转换为JavaScript 对象。使用 JavaScript 内置函数 JSON.parse() 进行转换。如：var obj = JSON.parse(text);

            //JSON对象
			var student = {
				"name": "张三",
				"age": 23,
				"sex": "男",
				"flag": true,
				"sal": 3.58
			}
			var name = student.name;
			alert(name);
			var jsonStr = '{"name": "李四","age": 23,"sex": "男","flag": true,"sal": 3.58}';

			//JSON对象和JSON字符的互转
			//把JSON字符串，转换成JSON对象
			var jsonObj = JSON.parse(jsonStr);
			var v = jsonObj.name;
			alert(v);

			var jsStirng = JSON.stringify(student);
			alert(jsStirng);

			//其他语言，比如Java,他要给前台返回JSON数据，只能是以JSON字符串返回，前台收到后，转换成JSON对象，取数据，JSON格式的字符串就成为我们网络传输首选的数据格式，轻巧，利用阅读和解析。
			var jStr =
				'{"data":{"yesterday":{"date":"8日星期一","high":"高温 35℃","fx":"东南风","low":"低温 25℃","fl":"<![CDATA[1级]]>","type":"多云"},"city":"商洛","forecast":[{"date":"9日星期二","high":"高温 34℃","fengli":"<![CDATA[2级]]>","low":"低温 25℃","fengxiang":"东南风","type":"小雨"},{"date":"10日星期三","high":"高温 31℃","fengli":"<![CDATA[2级]]>","low":"低温 23℃","fengxiang":"东南风","type":"多云"},{"date":"11日星期四","high":"高温 34℃","fengli":"<![CDATA[2级]]>","low":"低温 24℃","fengxiang":"西南风","type":"多云"},{"date":"12日星期五","high":"高温 35℃","fengli":"<![CDATA[2级]]>","low":"低温 24℃","fengxiang":"南风","type":"阴"},{"date":"13日星期六","high":"高温 35℃","fengli":"<![CDATA[2级]]>","low":"低温 23℃","fengxiang":"南风","type":"阴"}],"ganmao":"感冒低发期，天气舒适，请注意多吃蔬菜水果，多喝水哦。","wendu":"28"},"status":1000,"desc":"OK"}';
			var myObj = JSON.parse(jStr);
			var type = myObj.data.yesterday.type;
			alert(type);

4.常用的JSON相关的函数

函数	描述
JSON.parse()	用于将一个 JSON 字符串转换为 JavaScript 对象。
JSON.stringify()	用于将 JavaScript 值转换为 JSON 字符串。

5.JSON对象的遍历

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			var student = {
				"name": "张三",
				"age": 23,
				"sex": "男",
				"flag": true,
				"sal": 3.58,
			}
			//遍历对象
			for (key in student) {
				var value = student[key];
				alert(value);
			}
			var arr = ["aaa", "bbb", "ccc", "ddd"];
			for (index in arr) {
				var ele = arr[index];
				alert(ele);
			}
		</script>
	</head>
	<body>
	</body>
</html>

6.补充：JS中的this关键字

在全局作用域中的this以及全局作用域中定义的函数，函数中的this，还有定时器中的this，都代表window对象。
事件的处理函数中的this代表，绑定了该事件的元素对象。
构造函数中的this，代表的就是new的这个对象。

可以通过call方法来改变this的执行。

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<button id="btn">一个按钮</button>
	</body>
	<script>
		//全局作用域中,定义的函数，函数中的this 代表window对象
		function show() {
			alert(this);
		}
		
		//事件的处理函数中的this代表，绑定了该事件的元素对象
		var btn = document.getElementById("btn");
		btn.onclick = function() {
			alert(this == btn);
		}

		//定义构造函数
		function Person(name, age, sex) {
			//封装属性
			var myObj = this;
			this.pname = name;
			this.page = age;
			this.psex = sex;
			//封装功能
			this.eat = function(ename) {
				alert(ename);
				return myObj;
			}
		}
		//构造函数中的this，代表的就是你new的这个对象
		var p1 = new Person("李四", 24, "女");
		var obj = p1.eat("hehe");
		var jsonObj = {
			"name": "哈哈",
			"sleep": function(obj) {
				console.log(this == obj);
			}
		}
		jsonObj.sleep(jsonObj);

		//定时器中的this 也是window
		var show2 = function(obj) {
			alert(this.username);
		}

		setTimeout(show2({
			"username": "王老虎"
		}), 1000);
		var show3 = function(obj) {
			alert(this.username);
		}
		//通过call方法来改变this的执行
		setTimeout(show3.call({
			"username": "王老虎"
		}), 1000);
	</script>
</html>

(小编也在努力学习更多哟!以后再慢慢分享的啦!)

希望对友友们有所帮助!!!!

naoguaziteng

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
✿✿✿JavaScript --- JSON

1.JSON的简介2.JSON的语法规则3.JSON 字符串转换为 JavaScript 对象4.常用的JSON相关的函数5.JSON对象的遍历6.补充：JS中的this关键字 JSON（ JavaScript Object Notation ）是用于存储和传输数据的格式（一种轻量级的数据交换格式），通常用于服务端向网页传递数据。 JSON 使用 JavaScript 语法，但是 JSON 格式仅仅是一个文本。文本可以被任何编程语言读取及作为数据格式传递。JSON 格式在语法上与创建 Java
复制链接

扫一扫