JSON 备忘录
在此备忘录中,我们将介绍 JSON 备忘录,提供快速参考,帮助您理解和有效使用 JSON。 JSON(JavaScript 对象表示法)是一种轻量级的基于文本的数据交换格式,广泛用于 Web 开发,用于在服务器和客户端之间存储和传输数据。
目录
什么是 JSON?
JSON 全称是 JavaScript Object Notation。它是一种轻量级的数据交换格式,代表,它易于人类读写。读取和生成对机器很友好。 JSON 以标准方式用于在服务器和客户端之间传输信息。
主要功能
- 基于文本的格式。
- 很少,但很重要:独立于语言,但基于约定俗成的类似 C 语言(C、Java、Js、Python 等)
- 最适合用于组织和将信息从一个地方移动到另一个地方。
基本 JSON
基本 JSON 是一种用于存储和交换数据的简单、人性化格式。它使用键值对结构来表示数据,使其易于在 Web 应用程序中的服务器和客户端之间传输。
平面对象
它们括在花括号 {} 中,包含键值对。
{
"name": "Sam",
"age": 25,
"isMarried": false
}
简单数组
数组是用方括号 [] 括起来的有序列表。
["Pineapple", "Blackberry", "Mango"]
具有单个数组的对象
JSON 中具有单个数组的对象由键值对组成,其中值是包含多个项目的数组。
{
"hobbies": ["reading", "traveling", "swimming"]
}
键值对
JSON 中的键值对表示数据,其中每个键都是一个唯一标识符,值可以是字符串、数字、对象、数组或布尔值。
{
"id": 101,
"status": "active"
}
JSON 示例 1
{
"superheroes": {
"hero": [
{ "id": "1", "firstName": "Fast", "lastName": "Kick" },
{ "id": "2", "firstName": "Hawk", "lastName": "Storm" }
]
}
}
JSON 示例 2
{
"name": "Ram",
"age": 23,
"gender": "M",
"salary": 40000,
"married": true,
"children": [
{ "name": "Sam", "age": 26, "gender": "M" },
{ "name": "Sita", "age": 18, "gender": "F" }
]
}
JSON 数据类型
以下是 JSON 格式支持的 数据类型 −
| 类型 | 插图 | 示例 |
|---|---|---|
| 数字 | 双精度浮点数 | 23, 40000, 0.5 |
| 字符串 | 用单引号括起来的一个或多个字符序列 | "name": "Ram" |
| 布尔值 | 真或假 | true, false |
| 数组 | 值的有序序列 | ["a", "b", "c"] |
| 对象 | 关联数组(例如存储)没有用于存储键/值对的隐式顺序。 | "key": "value" |
| null | 表示它是一个空值或未定义的值 | null |
特殊字符
该表显示了您可以在 JSON 文档的字符串中使用的各种特殊字符 −
| 字符串 | 插图 |
|---|---|
| \" | 双引号 |
| \/ | 正斜杠 |
| \b | 退格键 |
| \ | 反斜杠 |
| \u | Unicode 转义序列 |
| 换行符 | |
| \f | 表格feed |
| 回车符 | |
|
Tab |
数组
数组是用方括号括起来的有序列表,如下所示:[].
基本数组
["apple", "banana", "mango"]
2D 数组
2D 数组用于以矩阵格式,具有行和列,可以表示复杂的数据集,例如表格或网格。
{
"my_sequences": [
[1, 2, 3],
[4, 5, 6],
[7, 8, 9, 0],
[10, 11]
]
}
对象数组
JSON 中的对象由键值对组成,其中值是包含多个项目的数组。
{
"children": [
{ "name": "Jimmy Smith", "age": 15 },
{ "name": "Sammy Sosa", "age": 12 }
]
}
对象
JSON 对象 可以使用 JavaScript 创建。
嵌套对象
JSON 中的嵌套对象 指的是其他对象中的对象,允许复杂的数据结构。它们使用花括号 {} 定义,可以包含键值对,其中值也可以是对象或数组。
{
"Alex": {
"id": 7,
"fullName": "Smith",
"income": 30000,
"hobbies": ["reading", "traveling"],
"location": {
"country": "X",
"city": "X-City"
}
}
}
数组对象
{
"attributes": ["a1", "a2"],
"methods": ["getter", "setter"],
"empty_array": []
}
对象的对象
JSON 中的对象的对象是一种结构,其中键的值是另一个对象。这允许按层次结构组织数据,每个键指向一个嵌套对象。
{
"Mark McGwire": {
"hr": 65,
"avg": 0.278
},
"Sammy Sosa": {
"hr": 63,
"avg": 0.288
}
}
包含数组的对象
JSON 中包含数组的对象由键值对组成,其中值是数组。这些数组可以存储多个元素,例如字符串、数字或其他对象,从而实现结构化和灵活的数据表示。
{
"features": ["feature1", "feature2"],
"actions": ["read", "write"],
"emptyList": []
}
包含对象的对象
{
"Babe Ruth": {
"homeRuns": 59,
"average": 0.342
},
"Joe DiMaggio": {
"homeRuns": 46,
"average": 0.352
}
}
访问 JSON 数据
访问 JSON 数据涉及使用键从对象或数组中检索值。在大多数编程语言中,可以使用点符号或括号符号来访问嵌套元素。
访问对象
在 JavaScript 中访问对象涉及使用点符号 (object.key) 或括号符号 (object["key"])。
let person = {
"firstName": "Michael",
"lastName": "Brown",
"age": 34,
"gender": "M",
"income": 85000,
"isMarried": true
};
person.firstName // "Michael"
person["lastName"] // "Brown"
person.age // 34
person.other // undefined
person[0] // undefined
访问对象数组
要在 JavaScript 中访问对象数组,通常首先引用该对象,然后使用点或括号表示法访问其属性。
let myObj = {
"name": "John",
"age": 36,
"married": true
};
console.log(myObj.name); // 输出:John
console.log(myObj.age); // 输出:36
访问数组
要访问数组中的元素,请使用元素的索引,从 0 开始。在提供的示例中,myArray[0] 访问第一个元素"John",myArray[3] 访问第四个元素 36。
let myArray = ["John", "Doe", 69000, 36, "M", true]; console.log(myArray[0]); // 输出:John console.log(myArray[3]); // 输出:36
访问嵌套数据
要访问对象或数组中的嵌套数据,请使用点符号表示对象,使用数组索引表示数组。在您的示例中,myObj.tsmith[2] 从存储在 tsmith 键中的数组中访问第三个元素 (42)。
let myObj = {
"ref": { "name": 0, "last": 1, "age": 2 },
"jdoe": ["John", "Doe", 39],
"tsmith": ["Tom", "Smith", 42]
};
console.log(myObj.ref.last); // 输出:1
console.log(myObj.tsmith[2]); // 输出:42
JSON 数字
JSON 格式支持以下数字类型 −
| 类型 | 示例 |
|---|---|
| 整数 | {"value": 24> |
| 负数 | {"value": -8> |
| 指数 | {"value": 2.0E+3> |
| 分数 | {"value": 0.6 |
| 零 | {"value": 0 |
语法和结构
以下是 JavaScript 中 JSON 的语法和结构 −
| 组件 | 说明 | 示例 |
|---|---|---|
| 数据对象 | { 中的键值对 | { "name": "Ram" |
| 数据列表 | [] 中的值 | [ "cat", "dog" ] |
| 键值对 | 键和值用 : 分隔 | "city": "Kolkata" |
| 文本值 | 双引号中的字符" | "你好" |
| 数字值 | 不带引号的数字 | 50, 2.15 |
| 逻辑值 | 布尔值 true 或 false。 | true,false |
| 空值 | 表示没有数据。 | null |
| 嵌入对象 | 另一个对象中的对象。 | "address":{"city":"KL" |
| 嵌入列表 | 另一个数组中的数组。 | "nums":[[1, 2], [3, 4]] |
解析技术
JSON 中的解析技术涉及使用 JSON.parse() 将 JSON 字符串转换为 JavaScript 对象,反之亦然,使用 JSON.stringify()。
基本解析
JSON 中的基本解析涉及使用 JSON.parse() 将格式正确的 JSON 字符串转换为 JavaScript 对象。
const obj = JSON.parse('{"name":"Ram", "age":25, "city":”Kolkata"}');
console.log(obj.name); // Output: Ram
解析 JSON 数组
解析 JSON 数组使用 JSON.parse() 完成,它将表示数组的 JSON 字符串转换为 JavaScript 数组。
const text = '["Ford", "BMW", "Ferrari", "TATA"]'; const myArr = JSON.parse(text);console.log(myArr[0]); // 输出:Ford
使用日期进行解析
手动转换
JSON.parse() 方法将 JSON 字符串转换为 JavaScript 对象。然后,使用 new Date() 将出生属性(字符串)手动转换为 Date 对象。
const text = '{"name":"Sam", "birth":"2000-01-19",
"city":"Hyderabad"}';const obj = JSON.parse(text);obj.birth = new Date(obj.birth);console.log(obj.birth); // 输出:日期对象
处理函数
处理 JSON 中的函数涉及解析存储为字符串的函数定义,并使用 eval() 等技术将其转换回可执行函数
const text = '{"name":"Sam", "age":"function () {return 24;}", "city":"Hyderabad"}';
const obj = JSON.parse(text);
obj.age = eval("(" + obj.age + ")");
console.log(obj.age()); // 输出:24
验证
以下是 JSON 中的验证方法 −
| 方法 | 描述 | 示例代码 |
|---|---|---|
| JSON.parse | 检查字符串是否为有效的 JSON。如果无效,则抛出错误。 | try { JSON.parse(jsonStr); console.log("有效的 JSON"); } catch (e) { console.log("无效的 JSON"); |
| ajv.validate | 使用 Ajv 根据模式验证 JSON 数据。 | const Ajv = require("ajv"); const ajv = new Ajv(); const valid = ajv.validate(schema, data); |
| isJSON(自定义) | 自定义函数用于验证 JSON 而不产生异常。 | const isJSON = (str) => { try { JSON.parse(str); return true; } catch { return false; } }; |
性能优化
以下是 JavaScript 中 JSON 的性能优化策略 -
| 策略 | 操作 | 语法 |
|---|---|---|
| 最小化 JSON 大小 |
|
const compactJson = JSON.stringify(data); 示例:{"name":"Ram","age":22} |
| 高效解析 JSON |
|
const parsedData = JSON.parse(jsonString); 示例:JSON.parse('{"name":"Ram"}') |
| 缓存 JSON数据 |
|
localStorage.setItem('jsonData', JSON.stringify(data));示例:localStorage.getItem('jsonData') |

