JSON详解-使用示例

JSON

  • 概述：JSON全称 JavaScript Object Notation，是一种轻量级的数据交换格式、是一种纯文本。JSON相对于XML来说读写的速度更快。
  • 作用：
    • JSON 是用于存储和传输数据的格式
    • JSON 通常用于服务端向网页传递数据
  • 语法规则
    • 数据为 键/值 对，一个名称对应一个值，中间用 “:”
    • 数据由逗号分隔
    • 大括号保存对象，对象可以保存多个 键/值 对
    • 方括号保存数组
  • JSON值
    • 数字（整数或浮点数）
    • 字符串（双引号中）
    • 逻辑值（true 或 false）
    • 数组（在中括号中）,数组中可包含多个对象
    • 对象（在大括号中）
    • null
  • JSON 文件
    • JSON 文件的文件类型是 .json
    • JSON 文本的 MIME 类型是 application/json

JSON 举例

{"student":[{"name":"张三","address":"河南","age":20},{"name":"李四","address":"北京","age":25},{"name":"王五","address":"上海","age":30}
]}

student 是一个对象，里边有三条对象的信息

“name”:“张三” 等同于 JavaScript的 name=“张三”

// javascript 语法，等同于上述 json 案例
var student = [{"name":"张三","address":"河南","age":20},{"name":"李四","address":"北京","age":25},{"name":"王五","address":"上海","age":30}
];
// 找到张三
student[0].name;

JSON 和 XML 对比

  • 概述：JSON 和 XML 都用于接收 web 服务端的数据
  • XML 实例，和上述 JSON 实例等同
<student><s><name>张三</name> <address>河南</address> <age>20</age></s><s><name>李四</name> <address>北京</address> <age>25</age></s><s><name>王五</name> <address>上海</address> <age>30</age></s>
</student>
  • 不同之处
    • JSON 不需要结束标签
    • JSON 更加简短
    • JSON 读写速度更快
    • JSON 可以使用数组
    • XML 需要使用 XML 解析器来解析，JSON 使用标准的 JavaScript 函数来解析。

JSON 对象

访问对象

  • 方式一：使用 “.”

    var student,username;
student = {"name":"张三","address":"河南","age":30};
username = student.name;

  • 方式二：使用 “[]”

    var student,username;
student = {"name":"张三","address":"河南","age":30};
username = student["name"];
循环对象
  • “for-in”来循环对象的属性
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><p id="demo"></p><script>// student 是一个对象var student = {"name":"张三","address":"河南","age":30};// 此时的 x 是代表的 键值for(x in student){document.getElementById("demo").innerHTML += x + "--" + student[x] + "<br>";}</script>
</body>
</html>
嵌套 JSON 对象

  • 实例

    student{"name":"张三","address":"河南","technologys":{"t1":"Java","t2":"Python","t3":"Go"}
}

  • 访问

    x = student.technologys.t1;
// 或
x = student.technologys["t1"];
删除对象属性

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

    <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><p id="demo"></p><script>var student = {"name":"张三","address":"河南","technologys":{"t1":"Java","t2":"Python","t3":"Go"}}// 删除 t3 这条数据delete student.technologys.t3;// 此时 x 就是 代表 t1、t2，因为 t3 被删除了for(x in student.technologys){document.getElementById("demo").innerHTML += x + "--" + student.technologys[x] + "<br>";}</script>
</body>
</html>

JSON 和 JavaScript 互相转换

  • JSON.parse()：将一个 JSON 字符串转换为 JavaScript 对象
  • JSON.stringify()：将 JavaScript 对象转换为 JSON 字符串
JSON.parse()

  • JSON 通常用于与服务端交换数据，在接收服务器数据时一般是字符串

  • 语法

    JSON.parse(text[,reviver])

    text：必需，一个有效的 JSON 字符串

    reviver：可选，一个转换结果的函数，将为对象的每个成员调用此函数

  • 示例代码

    <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><p id="demo"></p><script>var obj = JSON.parse('{"student":[\n' +'    {"name":"张三","address":"河南","age":20},\n' +'    {"name":"李四","address":"北京","age":25},\n' +'    {"name":"王五","address":"上海","age":30}\n' +']}');document.getElementById("demo").innerHTML = obj.student[0].name + ":" + obj.student[0].address;</script>
</body>
</html>
日期异常
  • 概述：JSON 不能存储 Date 对象
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><p id="demo"></p><script>var text = '{"name":"张三","age":30,"address":"北京","createDate":"2024-01-01"}';var obj = JSON.parse(text,function (key, value){// 如果 key 等于 createDate 这个字符串，则返回日期对象if(key == "createDate"){return new Date(value);} else{					// 否则返回 字符串值return value;}});document.getElementById("demo").innerHTML = obj.name + "创建日期：" + obj.createDate;</script>
</body>
</html>
解析函数
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><p id="demo"></p><script>var text = '{"name":"清华大学","rank":"function(){return 1}","address":"北京"}';var obj = JSON.parse(text);// 字符串转函数obj.rank = eval("("+ obj.rank +")");document.getElementById("demo").innerHTML = obj.name + "学校排名：" + obj.rank();</script>
</body>
</html>

注意：将 函数作为字符串存储，然后再将字符串转换为函数，eval 方法的使用可以往下看，下边有解释

JSON.stringify()

  • JSON 通常用于与服务端交换数据，在发送服务器数据时一般是字符串

  • 语法

    JSON.stringifg(value[,replacer[,space]]);

    value：必需，要转换的 JavaScript 值（通常为对象或数组）

    replacer：可选，用于转换结果的函数或数组

    space：可选，文本添加缩进、空格和换行符，space是数字，指定数目的空格

  • 示例代码，对象转换

    <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><p id="demo"></p><script>// 这是一个 JavaScript 对象var obj = {"name":"张三","address":"河南","age":30};// 转换成一个 JSON字符串var s = JSON.stringify(obj);document.getElementById("demo").innerHTML = s;</script>
</body>
</html>

  • 示例代码，数组转换

    <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><p id="demo"></p><script>var arr = [{"name":"张三","address":"河南","age":30},{"name":"李四","address":"湖北","age":35}];var s = JSON.stringify(arr);document.getElementById("demo").innerHTML = s;</script>
</body>
</html>
日期异常
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><p id="demo"></p><script>// 创建一个对象var obj = {"name":"小哼","createDate":new Date(),"age":25};// 对象转字符串var s = JSON.stringify(obj);document.getElementById("demo").innerHTML = s;</script>
</body>
</html>

注意：将对象转换成了字符串，可以利用parse再转成对象

解析函数
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><p id="demo"></p><script>var obj = {"name":"小哼","age":function (){return 25}};// 函数转换字符串obj.age = obj.age.toString();var s = JSON.stringify(obj);document.getElementById("demo").innerHTML = s;</script>
</body>
</html>

注意：函数转换字符串-使用 toString() 方法

JSON解析器

  • 概述：eval() 函数可将 JSON 文本转换成 JavaScript 对象

  • 语法

    var obj = eval("(" + text + ")");

  • 示例代码

    <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><p id="demo"></p><script>// JSON 文本var text = '{"student":[\n' +'    {"name":"张三","address":"河南","age":20},\n' +'    {"name":"李四","address":"北京","age":25},\n' +'    {"name":"王五","address":"上海","age":30}\n' +']}';// 调用 eval 函数，将 JSON 字符串转换成 JavaScript 对象var obj = eval("("+ text +")");document.getElementById("demo").innerHTML += obj.student[0].name;document.getElementById("demo").innerHTML += obj.student[1].address;</script>
</body>
</html>

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

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

相关文章

vue3使用vue-diff插件实现文本对比

vue3使用vue-diff插件实现文本对比

前面介绍过vue3通过monaco-editor实现文本对比功能 但因为业务需要自定义左右两侧文本的底色及高亮颜色&#xff0c;考虑换一个插件&#xff1a;vue-diff 1、下载插件&#xff1a; npm i vue-diff1.2.4 2、main.js中引入并注册插件&#xff1a; // Diff对比 import VueDiff f…
阅读更多...
ZYNQ AC7020C的“点LED”实验

ZYNQ AC7020C的“点LED”实验

一、创建 Vivado 工程 1、启动 Vivado 2、在 Vivado 开发环境里点击“Create New Project”&#xff0c;创建一个新的工程 3、弹出一个建立新工程的向导&#xff0c;点击“Next” 4、在弹出的对话框中输入工程名和工程存放的目录。需要注意工程路径“Project location”不能有…
阅读更多...
Zookeeper3.5.7基础学习

Zookeeper3.5.7基础学习

文章目录 一、Zookeeper入门1、概述2、特点3、数据结构4、应用场景 二、Zookeeper 安装部署1、本地模式安装1.1 基础操作1.2 配置参数解读 2、集群部署2.1 集群安装2.2 选举机制(面试重点)2.3 ZK 集群启动停止脚本 三、ZK客户端相关操作1、客户端命令行操作1.1 命令行语法1.2 z…
阅读更多...
【第七在线】数字化转型：智能商品计划管理的核心要素

【第七在线】数字化转型：智能商品计划管理的核心要素

随着科技的快速发展&#xff0c;数字化转型已经成为企业适应市场变化、提高运营效率的必由之路。尤其在服装行业&#xff0c;快速的市场反应和精准的供应链管理显得尤为重要。其中&#xff0c;智能商品计划管理作为数字化转型的核心要素&#xff0c;正在重塑整个行业的竞争格局…
阅读更多...
【RH850U2A芯片】Reset Vector和Interrupt Vector介绍

【RH850U2A芯片】Reset Vector和Interrupt Vector介绍

目录 前言 正文 1. 什么是Reset Vector 1.1 S32K144芯片的Reset Vector 1.2 RH850芯片的Reset Vector 2. 什么是Interrupt Vector 2.1 S32K144芯片的Interrupt Vector 2.2 RH850芯片的Interrupt Vector 3. Reset Vector等价于Interrupt Vector吗 4. 总结 前言 最近在…
阅读更多...
$monitor和$strobe都看的是啥

$monitor和$strobe都看的是啥

注&#xff1a;本文来自硅芯思见 在编写测试平时&#xff0c;经常会用到$monitor和$strobe监测某些信号&#xff0c;并且使用格式上与$display比较类似&#xff0c;但是它们之间还是存在差异的&#xff0c;它们在当前仿真时间槽&#xff08;time-slot&#xff09;中被执行的区间…
阅读更多...
字符串函数strncpy、strncat、strncmp的功能（3）

字符串函数strncpy、strncat、strncmp的功能（3）

目录 引言&#xff1a; 一、strncpy函数介绍&#xff1a; 1.声明&#xff1a; 2.功能&#xff1a; 3.底层代码&#xff1a; 二、strnact函数介绍&#xff1a; 1.声明&#xff1a; 2.功能&#xff1a; 3.底层代码&#xff1a; 三、strncmp函数介绍&#xff1a; 1.声…
阅读更多...
常见电源电路（LDO、非隔离拓扑和隔离拓扑结构）

常见电源电路（LDO、非隔离拓扑和隔离拓扑结构）

一、常见电路元件和符号 二、DC-DC转换器 DC-DC转换器&#xff1a;即直流-直流转换器&#xff0c;分为三类&#xff1a;①线性调节器&#xff1b;②电容性开关解调器&#xff1b;③电感性开关调节器&#xff1b; 2.1线性稳压器&#xff08;LDO&#xff09; 2.1.1 NMOS LDO…
阅读更多...
如何将前后端分离（vue2+SpringBoot）项目部署到腾讯云服务器

如何将前后端分离（vue2+SpringBoot）项目部署到腾讯云服务器

如何将前后端分离&#xff08;vue2SpringBoot&#xff09;项目部署到腾讯云服务器 目录 如何将前后端分离&#xff08;vue2SpringBoot&#xff09;项目部署到腾讯云服务器 1、在选中目录地下新建2个文件夹 2、将打包好的前端项目和后端jar包上传到相应的目录下 3、将路径切…
阅读更多...
Gin 应用多实例部署session问题、session参数与刷新

Gin 应用多实例部署session问题、session参数与刷新

文章目录 一、Gin Session 存储的实现方案二、memstore&#xff1a;基于内存的实现2.1 基本使用2.2 关键参数 三、使用redis&#xff1a;多实例部署3.1 使用redis优势3.2 基本使用 四、信息安全的三个核心概念五、Gin Session 参数5.1 参数介绍 六、Session 自动刷新 一、Gin S…
阅读更多...
语图奇缘：林浩然与杨凌芸的哲学漫画大冒险

语图奇缘：林浩然与杨凌芸的哲学漫画大冒险

语图奇缘&#xff1a;林浩然与杨凌芸的哲学漫画大冒险 Language Odyssey: The Philosophical Comic Adventure of Lin Haoran and Yang Lingyun 在一个充满逻辑谜题和言语陷阱的城市——逻言市&#xff0c;住着两位热衷于探索语言奥秘的年轻人&#xff0c;林浩然和杨凌芸。林浩…
阅读更多...
Qt的绘制是如何发生的

Qt的绘制是如何发生的

QEvent::WindowDeactivate 当用户鼠标在应用之外时&#xff0c;会触发QEvent::WindowDeactivate事件&#xff0c; Qt5Widgetsd.dll!QApplication::setActiveWindow(QWidget * act) Line 2072 C Qt5Widgetsd.dll!QApplicationPrivate::notifyActiveWindowChange(QWindo…
阅读更多...
一篇文章带你了解C++中隐含的this指针

一篇文章带你了解C++中隐含的this指针

文章目录 一、this指针的引出二、this指针的特性【面试题】 一、this指针的引出 我们先来定义一个日期类Date&#xff0c;下面这段代码执行的结果是什么呢&#xff1f; class Date { public:void Init(int year, int month, int day){_year year;_month month;_day day;}v…
阅读更多...
2024新版68套Axure RP大数据可视化大屏模板及通用组件+PSD源文件

2024新版68套Axure RP大数据可视化大屏模板及通用组件+PSD源文件

Axure RP数据可视化大屏模板及通用组件库2024新版重新制作了这套新的数据可视化大屏模板及通用组件库V2版。新版本相比于V1版内容更加丰富和全面&#xff0c;但依然秉承“敏捷易用”的制作理念&#xff0c;这套作品也同样延续着我们对细节的完美追求&#xff0c;整个设计制作过…
阅读更多...
【PythonRS】Rasterio库安装+基础函数使用教程

【PythonRS】Rasterio库安装+基础函数使用教程

Rasterio是一个Python库&#xff0c;专门用于栅格数据的读写操作。它支持多种栅格数据格式&#xff0c;如GeoTIFF、ENVI和HDF5&#xff0c;为处理和分析栅格数据提供了强大的工具。RasterIO适用于各种栅格数据应用&#xff0c;如卫星遥感、地图制作等。通过RasterIO&#xff0c…
阅读更多...
Two-factor authentication (2FA) is required for your GitHub account解决方案

Two-factor authentication (2FA) is required for your GitHub account解决方案

大家好，我是爱编程的喵喵。双985硕士毕业，现担任全栈工程师一职，热衷于将数据思维应用到工作与生活中。从事机器学习以及相关的前后端开发工作。曾在阿里云、科大讯飞、CCF等比赛获得多次Top名次。现为CSDN博客专家、人工智能领域优质创作者。喜欢通过博客创作的方式对所学的…
阅读更多...
SkyWalking介绍与使用docker-compose部署服务

SkyWalking介绍与使用docker-compose部署服务

一、Skywalking概述 1、Skywalking介绍 Skywalking是分布式系统的应用程序性能监视工具，专为微服务，云原生架构和基于容器（Docker，K8S,Mesos）架构而设计，它是一款优秀的APM（Application Performance Management）工具，包括了分布式追踪，性能指标分析和服务依赖分析等…
阅读更多...
gitee仓库使用中的警告

gitee仓库使用中的警告

当 Git 执行 git pull 命令时&#xff0c;有时候会出现类似下面的警告信息&#xff1a; warning: ----------------- SECURITY WARNING ---------------- warning: | TLS certificate verification has been disabled! | warning: ------------------------------------------…
阅读更多...
Python退出主程序

Python退出主程序

import sys sys.exit(1) exit函数的使用方法 Exit the interpreter by raising SystemExit(status).If the status is omitted or None, it defaults to zero (i.e., success). If the status is an integer, it will be used as the system exit status. If it is another kin…
阅读更多...
网络安全03---Nginx 解析漏洞复现

网络安全03---Nginx 解析漏洞复现

目录 一、准备环境 二、实验开始 2.1上传压缩包并解压 2.2进入目录&#xff0c;开始制作镜像 2.3可能会受之前环境影响&#xff0c;删除即可 ​编辑 2.4制作成功结果 2.5我们的环境一个nginx一个php 2.6访问漏洞 2.7漏洞触发结果 2.8上传代码不存在漏洞 2.9补充&#…
阅读更多...
最新文章

Copyright @ 2022~2023