首页 > 其他分享 >【Web前端】使用 JSON 处理数据

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

时间:2024-11-09 18:16:13浏览次数:3  
标签:Web name title 对象 前端 library JSON books

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

标签:Web,name,title,对象,前端,library,JSON,books
From: https://blog.csdn.net/LEECOO666/article/details/143648983

相关文章

  • 头像制图工具箱小程序纯前端源码
    介绍:今天,我在网上看到了一个小程序源代码,测试后的小程序也可以完美运行,所以我想和大家分享这个头像绘图工具箱小程序的纯前端源代码。主要功能包括文字九格、头像挂件生成、爆趣九格、形状九格、创意长图、情侣头像、猫狗交流器。这个小程序源代码是纯前端的,基本上可以使用,......
  • 前端八股(1)
    跟着视频捋八股,效果还是可以的,就是得需要先有基础才能听得懂讲啥以下是一些八股记录(简单版),可以帮助记忆关键词,从而后续自己拓展目录一、CSS1.说一下css的盒模型2.csS选择器的优先级?3.隐藏元素的方法有哪些?4.px和rem的区别是什么?5.重绘重排有什么区别?6.让一个元素......
  • 前端八股(2)
    第二部分,也是简单版,记录下目录第一部分四、vue1.v-if和v-show的区别?2.如何理解MVVM的?3.v-for中的key值的作用是什么?4.说一下你对vue生命周期的理解5.在created和mounted去请求数据,有什么区别?6.vue中的修饰符有哪些?7.elementui是怎么做表单验证的?8.vue如何进行......
  • Webrtc播放H265的技术探索(datachannel+wasm)
    通过这个帖子把我对通过webrtc方式播放H265视频的技术探索过程记录下来。虽然最终不一定能够形成产品进行实现,但觉得也是一个有意义的过程。很多事情不就是这样吗?也希望将来能够有同道中人看到这个帖子,一起分享交流~-----------------------------一。背景1)由于Webrtc......
  • Vue+CSS 炫酷新年特效教程:极光背景+彩带+粒子动画 用 Vue 和 CSS 动画打造 2025 新年
    效果图......
  • 前端代码分析题(选择题、分析题)——JS事件循环分析
     Promise其实也不难-CSDN博客Promise的执行顺序分析Promise对象的执行是异步的,但其执行器函数内部的代码是立即执行的,而then方法注册的回调函数则是在Promise状态改变后执行的。constmyPromise=newPromise((resolve,reject)=>{console.log('A');console.......
  • 11.9 javaweb学习 day2 基础标签&样式
    网页响应流程浏览器前端服务器后端服务器数据库1.浏览器请求前端2.前端响应浏览器3.浏览器请求后端4.后端请求数据库5.数据库响应后端6.后端响应浏览器网页的组成1.网页的文字,图片,音频,视频,超链接什么的,本质是前端代码2.前端代码通过浏览器的转化......
  • Web缓存中毒(Web Cache Poisoning)是一种网络攻击技术,攻击者通过篡改或伪造Web服务器的
    Web缓存中毒(WebCachePoisoning)是一种网络攻击技术,攻击者通过篡改或伪造Web服务器的缓存内容,使得用户在访问网站时,获得恶意内容或错误内容的攻击方式。这种攻击通常依赖于利用Web缓存的设计缺陷或未充分验证的请求参数,从而让缓存服务器存储并返回恶意的、篡改过的响应。工作原理......
  • 新安装pbootcms程序为何网站前端页面出现404错误界面两种解决方法
    遇到PBootCMS新安装后网站前端页面出现404错误,可以尝试以下步骤来排查和解决问题:检查伪静态设置:确认服务器是否支持伪静态功能。检查PBootCMS的伪静态规则是否正确配置。通常在安装目录下的.htaccess文件中可以找到相关设置。检查URL重写模块:对于Apache服务器,确保mod_......
  • 【含文档+PPT+源码】基于JavaWeb的高校迎新系统系统
    项目背景与意义随着高校招生规模的不断扩大和信息化建设的深入,大学生迎新报到工作面临着越来越多的挑战。传统的迎新报到方式,如学生排队等待、填写纸质表格等,不仅效率低下,容易出错,还给学生和学校带来了诸多不便。特别是在新生入学的高峰期,传统的迎新流程往往会导致报到现场人......