✿✿✿JavaScript --- JSON

news2024/11/8 18:49:55

目录

1.JSON的简介

2.JSON的语法规则

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

4.常用的JSON相关的函数

5.JSON对象的遍历

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

1.JSON的简介

        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>

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

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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/108742.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Android studio配置大内存，编译速度更快！

Android studio配置大内存，编译速度更快！

本文使用的是windows 10系统&#xff0c;Android studio 版本是Android Studio Chipmunk | 2021.2.1&#xff08;松鼠&#xff09; 目录为什么要配置大内存&#xff1f;默认内存是多少&#xff1f;如何扩大内存配置&#xff1f;这个配置保存在哪个文件&#xff1f;文件在哪里&a…
阅读更多...
二叉树10：二叉树的最小深度

二叉树10：二叉树的最小深度

主要是我自己刷题的一些记录过程。如果有错可以指出哦&#xff0c;大家一起进步。 转载代码随想录 原文链接&#xff1a; 代码随想录 leetcode链接&#xff1a;111. 二叉树的最小深度 题目&#xff1a; 给定一个二叉树&#xff0c;找出其最小深度。 最小深度是从根节点到最近…
阅读更多...
Asp.Net Core实现最基本的Http服务

Asp.Net Core实现最基本的Http服务

概述 和.NetFramework时代不同&#xff0c;Core是可以自承载的&#xff0c;也就说开发好的Web项目&#xff0c;可以打包成exe直接运行的&#xff0c;而不必放到IIS这样的环境中。接下来&#xff0c;我们写点代码&#xff0c;体验一下Asp.Net Core自带的Http功能。 初体验 所谓…
阅读更多...
嵌入式微功耗RTU的功能与特点介绍、技术参数详情

嵌入式微功耗RTU的功能与特点介绍、技术参数详情

平升电子嵌入式微功耗RTU&#xff0c;可灵活嵌入至各类仪表、传感器和工业设备中&#xff0c;定时采集设备数据并通过4G/5G/NB-IoT远传至监管软件&#xff0c;实现设备联网。 嵌入式微功耗RTU设计小巧、方便集成&#xff0c;微功耗运行&#xff0c;支持标准水资源/水文/环保/M…
阅读更多...
Biotin-PEG-AC,Biotin-PEG-Acrylate,生物素PEG丙烯酸酯线性杂双功能PEG试剂

Biotin-PEG-AC,Biotin-PEG-Acrylate,生物素PEG丙烯酸酯线性杂双功能PEG试剂

英文名称&#xff1a;Biotin-PEG-AC&#xff0c;Biotin-PEG-Acrylate 中文名称&#xff1a;生物素-聚乙二醇-丙烯酸酯 生物素-聚乙二醇-丙烯酸酯是一种含有生物素和丙烯酸酯的线性杂双功能聚乙二醇试剂。它是一种有用的带有PEG间隔基的交联或生物结合试剂。生物素能与亲和素和…
阅读更多...
智创万物，数赢未来——如何助推数智时代的发展浪潮

智创万物，数赢未来——如何助推数智时代的发展浪潮

数智化核心特征 可视化 消费者的行为可以看得见&#xff0c;生产者的行为也可以看得见。产业互联网或者消费互联网非常重要的一点就是要对消费者行为和生产者行为的可视化&#xff0c;其背后是数字化的力量。 可量化 可量化意味着企业家可以对管理流程进行改造&#xff0c;…
阅读更多...
echarts的legend——图例样式的配置

echarts的legend——图例样式的配置

认识图例&#xff1a; 以上几张图表中&#xff0c;红色圆圈部分即图例 echarts图表中的图例&#xff0c;有形状&#xff0c;颜色&#xff0c;位置等等各种样式的不同配置。 echarts官网配置项手册里有非常详细的内容&#xff0c;我们挑几种常用的看看&#xff0c;加深对legend属…
阅读更多...
深度学习——物体检测算法：R-CNN，SSD,YOLO（笔记）

深度学习——物体检测算法：R-CNN，SSD,YOLO（笔记）

一&#xff0c;R-CNN 1.区域卷积神经网络R-CNN 首先从输入图像中提取若干个锚框&#xff0c;并标注好它们的类别和偏移量。然后用卷积神经网络对每一个锚框进行前向传播抽取特征。最后用每个提议区域的特征来预测类别和边界框。 ①使用启发式搜索算法来选择锚框 ②使用预训练…
阅读更多...
【第一周学习——认识 O(N*logN) 的排序[ 归并排序 、堆排序、快速排序 ]

【第一周学习——认识 O(N*logN) 的排序[ 归并排序 、堆排序、快速排序 ]

前言&#xff1a; &#x1f44f;作者简介&#xff1a;我是笑霸final&#xff0c;一名热爱技术的在校学生。 &#x1f4dd;个人主页&#xff1a;个人主页1 || 笑霸final的主页2 &#x1f4d5;系列专栏&#xff1a;《数据结构与算法》 &#x1f4e7;如果文章知识点有错误的地方&a…
阅读更多...
力扣(LeetCode)187. 重复的DNA序列(C++）

力扣(LeetCode)187. 重复的DNA序列(C++）

哈希表 直观思考&#xff0c;由于限定了答案长度 101010 &#xff0c;只需要一次遍历字符串&#xff0c;统计所有长度为 101010 的子串的出现次数(哈希表) &#xff0c;最后遍历哈希表&#xff0c;维护答案&#xff0c;记录出现 222 次(及以上)的字符串 。 class Solution { …
阅读更多...
【BBuf的CUDA笔记】二，解析 OneFlow BatchNorm 相关算子实现

【BBuf的CUDA笔记】二，解析 OneFlow BatchNorm 相关算子实现

0x1. 前言 在ResNet中&#xff08;https://github.com/pytorch/vision/blob/main/torchvision/models/resnet.py&#xff09;&#xff0c;关于BatchNorm的调用一共有两种模式&#xff0c;第一种是ReLU接在BN之后&#xff1a; out self.bn1(out) out self.relu(out)另外一种…
阅读更多...
MicFunPred——最新16S rRNA扩增子数据功能预测数据库

MicFunPred——最新16S rRNA扩增子数据功能预测数据库

近年来&#xff0c;基于扩增子测序进行物种的功能预测是研究微生物群落功能的主要方面&#xff0c;目前最常用的软件包括Tax4Fun以及PICRUSt2。关于这两款软件的使用方法详可参见凌波微课|扩增子研究第十六讲&#xff1a;扩增子测序结果中的物种功能预测。 Tax4Fun使用最近邻匹…
阅读更多...
2022年终总结-两年Androider的成长之路

2022年终总结-两年Androider的成长之路

金句分享 生活金句 1.可难道我们生命中做的每一件事不都是为了被爱得更多一点吗 2.这不只是一种对承诺的恐惧&#xff0c;也不是我缺乏关心和爱的能力&#xff0c;因为我做得到&#xff0c;只不过&#xff0c;老老实实讲。我想 我宁愿为了某件我擅长的事&#xff0c;我能表现…
阅读更多...
一个select死锁问题

一个select死锁问题

以下代码的输出结果&#xff1a; func main() {var wg sync.WaitGroupfoo : make(chan int)bar : make(chan int)wg.Add(1)go func() {defer wg.Done()select {case foo <- <-bar:default:println("default")}}()wg.Wait() }结果 解析 对于 select 语句&#…
阅读更多...
【Linux】进程信号

【Linux】进程信号

目录 一、什么是信号 二、信号产生的条件 1、键盘产生 2、进程异常 3、命令产生 4、软件条件 三、信号保存的方式 四、信号处理的方式 1、信号处理接口 2、信号处理时机 3、进程为什么要切换成为用户态才进行信号的捕获方法&#xff1f; 4、sigaction 五、可重入函…
阅读更多...
Java+MySQL基于ssm的会议交接平台

Java+MySQL基于ssm的会议交接平台

随着社会竞争压力的不断加强,企事业单位内部的会议都在不断的增加,有效的会议可以提高企事业内部的沟通,更好的做出符合战略目标的决策,但是传统的会议交接有一定的问题存在,首先就是必须面对面进行传达,其次就是对任务的安排和执行没有很好的记录,为了改变这些情况,于是我们提…
阅读更多...
信贷产品年终总结之贷后逾期分析

信贷产品年终总结之贷后逾期分析

自本月月初疫情全面放开后&#xff0c;身边的朋友基本都阳了一遍&#xff0c;希望正在浏览本篇文章的读者您是还没阳过的幸运儿。另外&#xff0c;今天也是冬至了&#xff0c;祝各位读者身边健康&#xff0c;远离羊群&#xff01; 最近我们分享了信贷业务年终总结系列的前2篇文…
阅读更多...
Python中转义字符是个啥

Python中转义字符是个啥

文章目录前言一、转义字符是什么&#xff1f;二、常见的转义字符有哪些&#xff1f;总结前言 昨天有粉丝问了我这个代码问题&#xff0c;如下图&#xff1a; 他很好奇代码都没有错误&#xff0c;怎么运行就报错&#xff0c;不知道有咩有小伙伴能看出问题在哪呢&#xff1f; 其…
阅读更多...
Cookie 和 Session 的工作流程

Cookie 和 Session 的工作流程

文章目录1.Cookie1.什么是Cookie2.Cookie可以干嘛3.Cookie实现登陆逻辑的流程2.session1.session是什么2.session有什么用3.session的工作流程3.Cookie 和 session的区别(重点)1.Cookie 1.什么是Cookie Cookie中存储的是字符串,是浏览器在本地持久化保存数据的一种方案 通过点…
阅读更多...
2023春招：Javaweb面试锦囊

2023春招：Javaweb面试锦囊

cookie 和 session 的区别&#xff1f;&#xff08;必会&#xff09; 存储位置不同 cookie 存放在客户端电脑&#xff0c;是一个磁盘文件。Ie 浏览器是可以从文件夹中找到。session 是存放在服务器内存中的一个对象。 chrome 浏览器进行安全处理&#xff0c;只能通过浏览器找…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023