【Web前端】使用 JSON 处理数据

JSON 是一种基于 JavaScript 对象语法的数据格式,由道格拉斯·克罗克福特推广。尽管其语法源于 JavaScript,JSON 仍然是独立于 JavaScript 的,这也是为什么许多编程环境能够解析和生成 JSON 的原因。JSON 可以以对象或字符串的形式存在,前者用于解析 JSON 数据,后者则用于通过网络传输 JSON 数据。这并不复杂——JavaScript 提供了一个全局可访问的 JSON 对象,用于在这两种数据格式之间进行转换。​


什么是 JSON?

JavaScript 对象表示法(JSON,JavaScript Object Notation)是一种轻量级的数据交换格式,易于人类阅读和编写,也易于机器解析和生成。JSON 是基于文本的,因此它可以与几乎所有的编程语言无缝地配合使用。JSON 通常用于在客户端和服务器之间传输数据。


1.1 JSON 结构

JSON 数据主要由两种结构组成:对象和数组。


1.1.1 JSON 对象

JSON 对象是由键值对组成的一组无序的数据。使用大括号 ​​{}​​ 来包围,键(属性名)为字符串,值可以是字符串、数字、布尔值、数组、对象或 ​​null​​。

{"name": "Xianyu","age": 23,"isStudent": yes
}

在上面的示例中:

  • ​"name"​​ 是一个键,对应的值是字符串 ​​"Xianyu"​​。
  • ​"age"​​ 是一个键,对应的值是数字 ​​23​​。
  • ​"isStudent"​​ 是一个键,对应的值是布尔值 ​​yes​​。

1.1.2 JSON 数组

JSON 数组是有序的数据集合,使用方括号 ​​[]​​ 包围。数组中的元素可以是任意类型,包括对象和其他数组。

{"students": [{"name": "Xianyu","age": 23},{"name": "Xianyadan","age": 25}]
}

​"students"​​ 是一个键,对应的值是一个数组,数组中包含两个对象,每个对象都有 ​​name​​ 和 ​​age​​​ 键。


1.2 其他注意事项

  • 键名必须是字符串:JSON 的键名总是用双引号括起来(如 ​​"name"​​),而不是单引号。
  • 值的类型:值可以是字符串、数字、布尔值、数组、对象或 ​​null​​,但不能是未定义的。
  • 格式要求:JSON 数据格式严格,必须符合规范,否则会导致解析错误。

一个 JSON 示例

我们来看一个完整的 JSON 示例,模拟一个图书馆的书籍数据:

{"library": {"name": "Central Library","location": "Downtown","books": [{"title": "The Great Gatsby","author": "F. Scott Fitzgerald","year": 1925,"genres": ["Fiction", "Classic"]},{"title": "To Kill a Mockingbird","author": "Harper Lee","year": 1960,"genres": ["Fiction", "Classic", "Historical"]}]}
}

在这个示例中:

  • ​library​​ 是一个对象,包含 ​​name​​,​​location​​ 和 ​​books​​ 三个键。
  • ​books​​ 是一个数组,包含两本书的信息,每本书都是一个对象,包含 ​​title​​,​​author​​,​​year​​ 和 ​​genres​​。

对象和文本间的转换

在 JavaScript 中,我们通常需要将 JSON 对象转换为字符串以便进行存储或传输,或者将字符串解析为 JSON 对象以便进行操作。这可以通过 ​​JSON.stringify()​​ 和 ​​JSON.parse()​​​ 函数实现。


3.1 JSON.stringify()

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

const library = {name: "Central Library",location: "Downtown",books: [{title: "The Great Gatsby",author: "F. Scott Fitzgerald",year: 1925,genres: ["Fiction", "Classic"]},{title: "To Kill a Mockingbird",author: "Harper Lee",year: 1960,genres: ["Fiction", "Classic", "Historical"]}]
};const jsonString = JSON.stringify(library, null, 2);
console.log(jsonString);

​JSON.stringify()​​ 将 ​​library​​ 对象转换为 JSON 字符串。第二个参数为 ​​null​​,表示不使用替换函数;第三个参数为 ​​2​​​,表示缩进两个空格,以便于阅读。


3.2 JSON.parse()

​JSON.parse()​​​ 方法可以将 JSON 字符串转换为 JavaScript 对象。

const jsonString = `{"library": {"name": "Central Library","location": "Downtown","books": [{"title": "The Great Gatsby","author": "F. Scott Fitzgerald","year": 1925,"genres": ["Fiction", "Classic"]},{"title": "To Kill a Mockingbird","author": "Harper Lee","year": 1960,"genres": ["Fiction", "Classic", "Historical"]}]}
}`;const library = JSON.parse(jsonString);
console.log(library);

​JSON.parse()​​ 将 ​​jsonString​​ 字符串转换为 JavaScript 对象 ​​library​​。我们可以直接访问对象的属性,例如 ​​library.name​​ 或 ​​library.books[0].title​​。


如何在 JavaScript 中处理 JSON

4.1 访问 JSON 对象中的数据

我们可以使用点(​​.​​)或方括号(​​[]​​​)语法访问 JSON 对象中的数据。

console.log(library.library.name); // "Central Library"
console.log(library.library.books[0].title); // "The Great Gatsby"

4.2 修改 JSON 对象

我们可以直接对 JSON 对象进行修改,例如添加新书籍:

library.library.books.push({title: "1984",author: "George Orwell",year: 1949,genres: ["Fiction", "Dystopian"]
});console.log(library.library.books.length); // 3

4.3 遍历 JSON 数组

可以使用 ​​forEach​​​ 方法遍历 JSON 数组:

library.library.books.forEach(book => {console.log(`${book.title} by ${book.author}, published in ${book.year}`);
});

4.4 过滤和查找数据

可以使用 ​​filter​​ 和 ​​find​​​ 方法来查找满足特定条件的数据:

const classicBooks = library.library.books.filter(book => book.genres.includes("Classic"));
console.log(classicBooks);

常见问题解答

Q1: JSON 和 XML 有什么区别?

JSON 和 XML 都是用于数据交换的格式,但 JSON 更轻量,易于读取和编写。JSON 更加简单,主要用于结构化数据,而 XML 适用于更复杂的数据结构。

Q2: JSON 对象的键名可以包含哪些字符?

JSON 对象的键名必须是字符串,且必须用双引号包围。可以包含字母、数字、下划线和美元符号,但不能以数字开头。

Q3: JSON 支持哪些数据类型?

JSON 支持以下数据类型:

  • 字符串(String)
  • 数字(Number)
  • 布尔值(Boolean)
  • 数组(Array)
  • 对象(Object)
  • null

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

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

相关文章

SMOTE算法深度解析及代码实现

SMOTE算法介绍 SMOTE算法是较为常用的数据增广算法,其核心思路是在少数类别样本内部进行数据合成,更具体的说,其后隐藏的猜想是假定样本 x 0 , x 1 , . . , x N x_0,x_1,..,x_N x0​,x1​,..,xN​都为同一类别,那么他们的线性组合…

网络安全属性详解

网络安全属性是网络安全领域进行安全态势评估的信息要素之一。以下是关于网络安全属性的详细介绍: 一、定义与重要性网络安全属性是指网络安全所具备的关键特性,这些特性共同构成了网络安全的基础。在网络安全态势评估中,利用网络安全属性的历…

Docker Compose部署Rabbitmq(Dockerfile安装延迟队列)

整个工具的代码都在Gitee或者Github地址内 gitee:solomon-parent: 这个项目主要是总结了工作上遇到的问题以及学习一些框架用于整合例如:rabbitMq、reids、Mqtt、S3协议的文件服务器、mongodb github:GitHub - ZeroNing/solomon-parent: 这个项目主要是…

基于Redis缓存机制实现高并发接口调试

创建接口 这里使用的是阿里云提供的接口服务直接做的测试,接口地址 curl http://localhost:8080/initData?tokenAppWithRedis 这里主要通过参数cacheFirstfalse和true来区分是否走缓存,正常的业务机制可能是通过后台代码逻辑自行控制的,这…

论软件可靠性设计及其应用

摘要 2023 年 3 月,我所在的公司承接了某智慧加油站平台的建设工作。该项目旨在帮助加油站提升运营效率、降低运营成本和提高销售额。我在该项目中担任系统架构设计师,负责整个项目的架构设计工作。 本文结合我在该项目中的实践,详细论述了…

鸿蒙系统:智能生态的新纪元与开发者的新机遇

正文: 在数字化时代,操作系统作为智能设备的灵魂,其重要性不言而喻。随着技术的不断进步,我们见证了安卓和iOS在全球范围内的广泛应用和影响力。如今,鸿蒙系统(HarmonyOS)以其创新的分布式架构…

Netty入门二

文章目录 EventLoopChannelFuture 与 PromiseHandler与PipelineByteBuf Netty的核心组件包括以下几种: EventLoop:负责处理注册到其上的channel的所有I/O事件。Channel:表示数据传输的网络通道。Future 与 Promise:Future用于等待…

一文读懂剪枝(Pruner):大模型也需要“减减肥”?

当你听到「剪枝」二字,或许会联想到园丁修整枝叶的情景。而在 AI 大模型领域,这个词有着特殊的含义 —— 它是一种通过“精简”来提升大模型效率的关键技术。随着 GPT、LLaMA 等大模型规模的持续膨胀,如何在保持性能的同时降低资源消耗&#…

简单的人脸识别签到程序 python笔记

简单的人脸识别签到程序 这是我自己根据之前的文章《简单的签到程序》修改出来签到程序,还在学习之中,代码还有很多可以优化的地方。 UI代码 有不少地方可以优化一下,但是不想改了。 import PySimpleGUI as sg from MYSQL1 import * impo…

单词反转和数组去重,附经典面试题一份

博彦科技笔试: 给定字符,拼接成单词进行反转单词; package org.example;public class Main {public static void main(String[] args) {char[] input {h, e, l, l, o, , w, o, r, l, d, , J, a, v, a};String inputToString new String(…

【51单片机】UART串口通信原理 + 使用

学习使用的开发板:STC89C52RC/LE52RC 编程软件:Keil5 烧录软件:stc-isp 开发板实图: 文章目录 串口硬件电路UART串口相关寄存器 编码单片机通过串口发送数据电脑通过串口发送数据控制LED灯 串口 串口是一种应用十分广泛的通讯接…

构建智能防线 灵途科技光电感知助力轨交全向安全防护

10月27日,在南京南站至紫金山东站间的高铁联络线上,一头野猪侵入轨道,与D5515次列车相撞,导致设备故障停车。 事故不仅造成南京南站部分列车晚点,还在故障排查过程中导致随车机械师因被邻线限速通过的列车碰撞而不幸身…

不使用递归的决策树生成算法

不使用递归的决策树生成算法 利用队列 queue ,实现层次遍历(广度优先遍历),逐步处理每个节点来建立子树结构。再构建一个辅助队列,将每个节点存储到 nodes_to_process 列表中,以便在树生成完成后可以反向遍…

【PB】 使用for循环,循环次数比较多时,datastore 获取数据异常的问题。

以往在使用datastore时,不注意及时销毁,毕竟一次处理数据,数量很少。 本次碰到一个问题,批量处理数据,for循环次数在1000次左右,每个for循环处理 3 个函数,每个函数中有3-4个datastore&#xff…

自动驾驶系列—自动驾驶如何实现厘米级定位?深入解读GPS/RTK技术与应用

🌟🌟 欢迎来到我的技术小筑,一个专为技术探索者打造的交流空间。在这里,我们不仅分享代码的智慧,还探讨技术的深度与广度。无论您是资深开发者还是技术新手,这里都有一片属于您的天空。让我们在知识的海洋中…

DevOps业务价值流:需求设计最佳实践

DevOps实践正推动着产品快速迭代与高质量交付,但需求设计作为产品开发的关键起点,往往被忽视。它不仅是收集与分析需求的过程,更是将需求转化为可实施产品特性的核心。本文深入探讨DevOps业务价值流中的需求设计,从调研、整理、原…

【MySQL】数据库整合攻略 :表操作技巧与详解

前言:本节内容讲述表的操作, 对表结构的操作。 是对表结构中的字段的增删查改以及表本身的创建以及删除。 ps:本节内容本节内容适合安装了MySQL的友友们进行观看, 实操更有利于记住哦。 目录 创建表 查看表结构 修改表结构 …

python可视化进阶

引用: 首先需要安装 plotnine from plotnine import* import joypy数据可视化进阶操作 3.1 类别数据可视化 【例3-1】——绘制简单条形图 【代码框3-1】——绘制简单条形图 # 图3-1的绘制代码 import pandas as pd import matplotlib.pyplot as plt from cvxpy …

使用 GitHub Actions 部署到开发服务器的详细指南

使用 GitHub Actions 部署到开发服务器的详细指南 在本篇博客中,我们将介绍如何使用 GitHub Actions 实现自动化部署,将代码从 GitHub 仓库的 dev 分支自动部署到开发服务器。通过这种方式,可以确保每次在 dev 分支推送代码时,服…

反汇编命令学习以及分析越界和空指针问题

1,反汇编命令行 (1)move 语法格式:mov destination, source例如: mov eax,0x1 ;将立即数1复制到eax寄存器。立即数到寄存器mov [ebx],eax ;将eax寄存器的值复制到ebx寄存器指向的内存地址,寄存器到内存mov eax,ebx ;将ebx寄存器的值复制到eax,寄存器到寄存器mov ea…