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

news2024/11/13 9:51:00

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.coloradmin.cn/o/2236832.html

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

相关文章

VMware 虚拟机使用教程及 Kali Linux 安装指南

VMware 虚拟机使用教程及 Kali Linux 安装指南 在现代计算机科学与网络安全领域,虚拟化技术的应用越来越广泛。VMware 是一款功能强大的虚拟化软件,可以帮助用户在同一台物理机上运行多个操作系统。本文将详细介绍如何使用 VMware 虚拟机,并…

达梦8数据库适配ORACLE的8个参数

目录 1、概述 1.1 概述 1.2 实验环境 2、参数简介 3、实验部分 3.1 参数BLANK_PAD_MODE 3.2 参数COMPATIBLE_MODE 3.3 参数ORDER_BY_NULLS_FLAG 3.4 参数DATETIME_FMT_MODE 3.5 参数PL_SQLCODE_COMPATIBLE 3.6 参数CALC_AS_DECIMAL 3.7 参数ENABLE_PL_SYNONYM 3.8…

三十四、VB基本知识与提高篇

一、代码编写规则: (一)标识符的使用规则: 标识符有两种:一种是系统关键字,另一种是自己定义标识符。 1、不能与系统关键字相同。 2、同一作用域(块)中不同出现重名标识符。用户自定义的标识符是不区分大小写的。 3、自定义标识符必须以字母开头,长度不能超过255…

数据冒险-ld和add(又称load-use冒险)

第一张图没有使用前递,第二张图使用前递,chatgpt分析第二张图 这张图展示了一个流水线的执行过程,其中存在读后写(RAW)数据冒险。我们可以通过**前递(Forwarding)**技术来解决这个数据冒险&…

Coppelia Sim (v-REP)仿真 机器人3D相机手眼标定与实时视觉追踪 (三)

使用标定好的结果进行跟踪标定板的位置 坐标转换的步骤为: 1.图像坐标点转到相机坐标系下的点 2.相机坐标系下的点转为夹爪坐标系下的点 3.夹爪坐标系下的点转为机械手极坐标系下的点 跟踪的方式 1.采用标定板的第一个坐标点作为跟踪点 3.机器人每次移动到该点位&a…

石墨舟氮气柜:半导体制造中的关键保护设备

石墨舟是由高纯度石墨材料制成的,主要用于承载硅片或其他基板材料通过高温处理过程,是制造半导体器件和太阳能电池片的关键设备之一。 石墨舟在空气中容易与氧气发生反应,尤其是在高温处理后,表面可能更为敏感;石墨舟具…

跟着大厂学AI | 智谱AI文本数据提取实践(大模型实战篇)

书接上回理论篇,本文详细介绍LLM处理模块、Prompt 构建、数据抽取后处理、数据校验、数据修复具体实战教程。 想看方案理论教程详见: 跟着大厂学AI | 大模型文本数据提取实践(理论篇)-CSDN博客文章浏览阅读2次。glm4大模型数据处…

大数据-213 数据挖掘 机器学习理论 - KMeans Python 实现 距离计算函数 质心函数 聚类函数

点一下关注吧!!!非常感谢!!持续更新!!! 目前已经更新到了: Hadoop(已更完)HDFS(已更完)MapReduce(已更完&am…

【Pikachu】File Inclusion文件包含实战

永远也不要忘记能够笑的坚强,就算受伤,我也从不彷徨。 1.File Inclusion(文件包含漏洞)概述 File Inclusion(文件包含漏洞)概述 文件包含,是一个功能。在各种开发语言中都提供了内置的文件包含函数,其可以使开发人员在一个代码…

材质(二)——材质参数化,从源材质继承生成不同的材质实例

继承原材质,对外提供参数。 更改调制不同的参数,生成不同的材质实例。 类似于,类的继承。有一个基类Base.继承生成为子类 A_Base,B_Base,C_Base

java的面向对象(从入门到深入)

目录 一、基本概念: 1.类 2.对象 3.继承 4.多态 5.封装 6.方法 7.接口 8.抽象 二、深入概念: 三:总结 一、基本概念: 1.类 类就是一个一个东西的蓝图,里面有着它的属性和方法。 2.对象 对象是一个类的实例化。 3.继承…

FPGA实现串口升级及MultiBoot(六)ICAPE2原语实例讲解

本文目录索引 一个指令和三种方式通过ICAPE2原语添加ICAPE2 IP构建Golden位流工程MultiBoot位流工程验证example2总结代码缩略词索引: K7:Kintex 7V7:Vertex 7A7:Artix 7MB:MicroBlaze上一篇文章种总结了MultiBoot 关键技术,分为:一个指令、二种位流、三种方式、四样错误。针…

自动泊车端到端算法 ParkingE2E 介绍

01 算法介绍 自主泊车是智能驾驶领域中的一项关键任务。传统的泊车算法通常使用基于规则的方案来实现。因为算法设计复杂,这些方法在复杂泊车场景中的有效性较低。 相比之下,基于神经网络的方法往往比基于规则的方法更加直观和多功能。通过收集大量专家…

sealos部署K8s,安装docker时master节点突然NotReady

1、集群正常运行中,在集群master-1上安装了dockerharbor,却发现master-1节点NotReady,使用的网络插件为 Cilium #安装docker和harbor(docker运行正常) rootmaster-1:/etc/apt# apt install docker-ce5:19.03.15~3-0~u…

什么是磁场探针台

探针台主要应用于半导体行业、光电行业、集成电路以及封装的测试。广泛应用于复杂、高速器件的精密电气测量的研发,旨在确保质量及可靠性,并缩减研发时间和器件制造工艺的成本。 磁场探针台就是在普通探针台的基础上,增加了磁性测量环境&…

【八百客CRM-注册安全分析报告-无验证方式导致安全隐患】

前言 由于网站注册入口容易被黑客攻击,存在如下安全问题: 1. 暴力破解密码,造成用户信息泄露 2. 短信盗刷的安全问题,影响业务及导致用户投诉 3. 带来经济损失,尤其是后付费客户,风险巨大,造…

iOS SmartCodable 替换 HandyJSON 适配记录

前言 HandyJSON群里说建议不要再使用HandyJSON,我最终选择了SmartCodable 来替换,原因如下: 首先按照 SmartCodable 官方教程替换 大概要替换的内容如图: 详细的替换教程请前往:使用SmartCodable 平替 HandyJSON …

✍Qt自定义带图标按钮

✍Qt自定义带图标按钮 📝问题引入 近段时间的工作中,有遇到这样一个需求 📝: 一个按钮,有normal、hover、pressed三种状态的样式,并且normal和hover样式下,字体颜色和按钮图标不一样。 分析…

OpenGL学习笔记(三) 绘制图形

glFrontFace(GL_CCW); // 设置CCW方向为“正面”&#xff0c;CCW即CounterClockWise&#xff0c;逆时针 glFrontFace(GL_CW); // 设置CW方向为“正面”&#xff0c;CW即ClockWise&#xff0c;顺时针#include <GL/glut.h>#include <math.h> void myDisplay(voi…

通过代码复习回忆 DiffusionDet: DiffusionTracker

DiffusionDet : DiffusionTracker复习回顾 之前的一段时间学习了基于扩散模型的检测于跟踪算法&#xff0c;最近在忙别的事情就导致了这里存在了很多和细节上的遗忘在这里进行一定的回顾&#xff0c;之后在试图看看可以进一步学习基于点集的扩散过程吗&#xff1f; Diffusion…