[JavaScript]JSON对象

news/2024/10/30 23:24:09/

eval函数

eval函数能将一个字符串当做一段JS代码解释并执行。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>window.eval("var i=100")//var i=100//控制台输出100console.log(i);</script>
</body>
</html>

JSON概述

1.什么是JSON?

JavaScript Object Notation(JavaScript标记对象),简称JSON。

JSON是一种轻量级的数据交换格式。

轻量级:体现在JSON的体积小,但可以表示的数据很多。

数据交换:例如C语言查询数据库之后(JDBC),拼接了一个JSON格式的字符串。C语言通过网络的方式传给了Java。Java语言接收到了这个JSON字符串之后,开始解析JSON,获取JSON中的数据。这样C语言和Java语言就完成了数据的交换。

在现代的开发中,能够做数据交换的有两个:JSON、XML,他们都是非常标准的数据交换格式。XML体积大,解析难度大,一般和钱有关系,严谨的系统都会采用XML进行数据交换。JSON体积小,解析更容易。XML和JSON相比来说,XML的语法严格,JSON的语法相对松散。

2.在JavaScript中,JSON是以对象的形式存在的。

3.在JavaScript中,怎么定义JSON格式的对象,怎么访问对象的属性?

语法格式:

var jsonObj={"属性名":属性值,"属性名":属性值,"属性名":属性值,......
}

属性值可以是任意类型。

JSON是一种无类型对象,直接用一个大括号包起来就是一个JSON对象。

4.注意:在JS中[]和{}有什么区别?

  • [] 是数组对象

  • {} 是JSON对象

<script>var emp = {"empno": 7369,"ename": "smith","sal": 800}//访问方式1console.log(emp.empno);//访问方式2console.log(emp["empno"]);
​var person = {"name": "张三","sex": false,"aihao": ["抽烟", "喝酒", "烫头"]}console.log(person.name);console.log(person.sex ? "男" : "女");var aihaos = person.aihao;for (var i = 0; i < person.aihao.length; i++) {console.log(aihaos[i]);}</script>

 

 

<script>// var addr = {//     "city": "北京",//     "street": "大兴"// }// var user = {//     "username": "zhangsan",//     "password": "123456",//     "address": addr// }var user = {"username": "zhangsan","password": "123456","address": {"city": "北京","street": "大兴"}}
​console.log(user.username + "居住在" + user.address.city);</script>

 

 

描述全班学生的JSON对象

设计一个JSON格式的数据能够表示全班人数和每个学生信息。

<script>var students = {"total": 3,"data": [{ "name": "zhangsan", "age": 20 },{ "name": "lisi", "age": 19 },{ "name": "wangwu", "age": 21 }]}//访问以上的JSON对象,将总人数取出,将每个学生的信息取出console.log("总人数:"+students.total);//访问每一个学生数据var arr=students.data;for(var i=0;i<arr.length;i++){var student=arr[i];console.log(student.name+","+student.age);}     </script>

 

JSON用于交换数据

<script>//java和JavaScript两个语言的数据交换//双引号中是一个普通字符串,这个字符串是java给浏览器的,\"转义为'var fromJavaJSON = "{\"name\":\"zhangsan\",\"age\":20}";//将JSON格式的字符串转为JSON对象,转换成JSON对象的目的是取数据//这样js和java之间两种不同的编程语言就完成了数据交换window.eval("var stu=" + fromJavaJSON)console.log(stu.name + "," + stu.age);
</script>

 

解析JSON动态生成表格

<!DOCTYPE html>
<html lang="en">
​
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
​
<body><script>//从java过来一个JSON格式的字符串var fromJava = "{\"total\": 3,\"data\": [{ \"name\": \"zhangsan\", \"age\": 20 },{ \"name\": \"lisi\", \"age\": 19 },{ \"name\": \"wangwu\", \"age\": 21 }] }";window.onload = function () {document.getElementById("btn").onclick = function () {//解析上面的json格式的字符串,将解析出来的数据放到tbody中window.eval("var json=" + fromJava)//设置总记录条数document.getElementById("totalSpan").innerHTML = json.total;//拼接HTMLvar studentArray = json.data;var html = "";for (var i = 0; i < studentArray.length; i++) {var s = studentArray[i];html += "<tr>";html += "<td>" + (i + 1) + "</td>";html += "<td>" + s.name + "</td>";html += "<td>" + s.age + "</td>";html += "</tr>";}//将以上拼接的HTML设置到tbody中document.getElementById("stutbody").innerHTML = html;}}</script><input type="button" value="查询学生信息列表" id="btn"><table border="1px" width="40%"><tr><th>序号</th><th>姓名</th><th>年龄</th></tr><tbody id="stutbody"><!-- <tr><td>1</td><td>张三</td><td>19</td></tr><tr><td>2</td><td>李四</td><td>20</td></tr> --></tbody></table>总记录条数:<span id="totalSpan">0</span>
</body>
​
</html>

 

 


http://www.ppmy.cn/news/70200.html

相关文章

什么是Java中的阻塞队列?它有什么作用?

在Java中&#xff0c;阻塞队列是一种特殊的队列&#xff0c;它可以在队列为空或队列已满时阻塞添加或移除元素的操作。阻塞队列通常用于多线程编程中&#xff0c;可以帮助我们更加方便地进行线程通信和协作。在本文中&#xff0c;我将从面试的角度&#xff0c;详细讲解Java中的…

深入篇【C++】类与对象:运算符重载详解

深入篇【C】类与对象&#xff1a;运算符重载详解 ⏰一.运算符重载&#x1f553;1.<运算符重载&#x1f550;2.>运算符重载&#x1f552;3.运算符重载&#x1f551;4.运算符重载①.格式1.改进12.改进2 ②.默认成员函数1.功能2.不足 &#x1f553;5.<运算符重载&#x1…

什么是MQTT,和MQ有什么区别

什么是MQTT&#xff0c;和MQ有什么区别 概述常用的软件和MQ的主要区别应用场景 概述 MQTT&#xff08;Message Queuing Telemetry Transport&#xff09;是一种轻量级的发布/订阅消息传输协议&#xff0c;主要用于物联网&#xff08;IoT&#xff09;领域&#xff0c;特别是在网…

方案设计与开发——血氧仪方案

血氧仪是一种专业的医疗检查工具&#xff0c;可以测定人体的血氧饱和度&#xff0c;是很多医疗机构、家庭的必备测量设备之一。下面我们来介绍一下血氧仪产品方案。 一、血氧仪运行原理 血氧仪采用光学吸收法进行检测&#xff0c;它通过将红外线和可见光一起照射到人体的指尖上…

Python图像处理:OpenCV入门教程

Python图像处理&#xff1a;OpenCV入门教程 一、Python图像处理概述1 图像处理的基本概念2 Python在图像处理中的优势 二、OpenCV简介1 OpenCV的概述2 OpenCV的特点3 OpenCV的应用领域 三、OpenCV安装与环境配置1 OpenCV的安装方法2 OpenCV的环境配置 四、图像处理的基础知识1 …

2023/5/14 数值计算方法考试复盘

第一题 问我1-()如果减少乘除次数,那么如何做出变形。 正确解法&#xff1a; 可以利用乘法分配律&#xff0c;将1拆分成1 - 1/2! 1/2! - 1/3! 1/3! - ... - 1/n! 1/n!&#xff0c;然后将拆分出来的两项合并&#xff0c;得到&#xff1a; 1 - (1/2! - 1/2!) - (1/3! - 1/3…

如何使用 CSS 中的边距(margin)属性来定义元素在网页中的边距

首先&#xff0c;我要说的是&#xff0c;CSS边距&#xff08;margin&#xff09;属性是一个非常有用的属性&#xff0c;它可以用来定义元素在网页中的边距。不过&#xff0c;如果你是一个新手&#xff0c;我建议你从最基础的知识开始学习&#xff0c;因为它可以帮助你更好地理解…

网友总结:面试超过一个小时,通过概率更低;面试时长在半小时以内,通过概率更高!...

面试时长跟通过概率有关系吗&#xff1f; 一位网友分享了自己的求职感想&#xff1a; 面试过程越长&#xff0c;差不多一个小时或者超过一个小时&#xff0c;问得越详细&#xff0c;通过的可能性越低。因为问得越细&#xff0c;说明这个公司越挑&#xff0c;需要候选人匹配度越…