【Web前端】使用 JSON 处理数据
【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); // 34.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
腾讯云开发者
