当前位置：首页 > article >正文

JS中【JSON】知识点总结和常用方法分析

article 2024/11/13 11:12:37

JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，广泛应用于数据传输和存储。它基于JavaScript对象字面量的语法，但与JavaScript独立，可以在多种编程语言中使用。以下是对JSON相关知识点的详细讲解。

1. JSON的基本语法

JSON是一种纯文本格式，使用键值对来表示数据。其基本语法规则如下：

对象：用花括号 {} 包含，以逗号分隔的键值对集合。键是字符串类型，必须用双引号包裹，值可以是字符串、数字、布尔值、数组、对象或null。
```
{
  "name": "John",
  "age": 30,
  "isStudent": false
}
```
数组：用方括号 [] 包含，以逗号分隔的一组值。数组中的元素可以是任意类型，包括对象。
```
[
  "Apple",
  "Banana",
  "Cherry"
]
```
字符串：必须用双引号 "" 包裹，可以包含Unicode字符以及一些转义字符（如 \n、\t、\\ 等）。
```
"hello"
```
数字：可以是整数或浮点数，不支持前导零。
```
123
12.34
```
布尔值：只有两个值 true 和 false。
```
true
```
null：表示空值或不存在的值。
```
null
```

2. JSON在JavaScript中的操作

在JavaScript中，JSON主要通过 JSON 对象进行操作。该对象包含两个主要方法：JSON.stringify() 和 JSON.parse()。

2.1 JSON.stringify()

JSON.stringify() 方法用于将JavaScript对象或值转换为JSON字符串。

基本使用：

const obj = { name: "John", age: 30, isStudent: false };
const jsonString = JSON.stringify(obj);
console.log(jsonString); // 输出: '{"name":"John","age":30,"isStudent":false}'

处理数组：

const arr = [1, "apple", true, null];
const jsonString = JSON.stringify(arr);
console.log(jsonString); // 输出: '[1,"apple",true,null]'

处理复杂对象：包括嵌套对象和数组。

const obj = {
  name: "John",
  age: 30,
  skills: ["JavaScript", "Python"],
  address: { city: "New York", zip: "10001" }
};
const jsonString = JSON.stringify(obj);
console.log(jsonString); 
// 输出: '{"name":"John","age":30,"skills":["JavaScript","Python"],"address":{"city":"New York","zip":"10001"}}'

可选参数：

replacer：用于筛选和转换对象中的属性，可以是数组（指定需要保留的键）或函数（用于转换每个键值对）。
space：用于格式化输出的缩进，通常用于使JSON字符串更易读。

const obj = { name: "John", age: 30, isStudent: false };
const jsonString = JSON.stringify(obj, null, 2);
console.log(jsonString);
// 格式化输出：
// {
//   "name": "John",
//   "age": 30,
//   "isStudent": false
// }

const obj = { name: "John", age: 30, isStudent: false };
const jsonString = JSON.stringify(obj, (key, value) => {
  if (typeof value === 'number') {
    return undefined; // 忽略数值类型的属性
  }
  return value;
});
console.log(jsonString); // 输出: '{"name":"John","isStudent":false}'

2.2 JSON.parse()

JSON.parse() 方法用于将JSON字符串解析为JavaScript对象。

基本使用：

const jsonString = '{"name":"John","age":30,"isStudent":false}';
const obj = JSON.parse(jsonString);
console.log(obj); // 输出: { name: 'John', age: 30, isStudent: false }

解析数组：

const jsonString = '[1,"apple",true,null]';
const arr = JSON.parse(jsonString);
console.log(arr); // 输出: [ 1, 'apple', true, null ]

处理复杂对象：

const jsonString = '{"name":"John","age":30,"skills":["JavaScript","Python"],"address":{"city":"New York","zip":"10001"}}';
const obj = JSON.parse(jsonString);
console.log(obj); 
// 输出: { name: 'John', age: 30, skills: [ 'JavaScript', 'Python' ], address: { city: 'New York', zip: '10001' } }

reviver参数：JSON.parse() 可接收一个可选的 reviver 函数，用于在解析过程中动态地转换结果中的每个键值对。

const jsonString = '{"name":"John","age":30,"isStudent":false}';
const obj = JSON.parse(jsonString, (key, value) => {
  if (key === 'age') {
    return value + 1; // 将年龄加1
  }
  return value;
});
console.log(obj); // 输出: { name: 'John', age: 31, isStudent: false }

3. JSON的常见用法

3.1 数据传输

JSON经常用于客户端与服务器之间的数据传输。通过将JavaScript对象转换为JSON字符串，前端可以将数据发送到服务器，而服务器可以返回JSON字符串给前端，前端再将其解析为对象使用。

3.2 配置文件

JSON文件通常用于存储配置信息（如package.json、.babelrc），因为其结构简单、易读、易写。

3.3 数据存储

在一些NoSQL数据库（如MongoDB）中，JSON格式的数据可以直接存储和查询。这使得JSON成为在无模式数据库中存储复杂数据结构的理想选择。

4. JSON的优缺点

4.1 优点

简单直观：JSON的语法简单，容易理解和使用。
轻量级：相比于XML，JSON的格式更加简洁，数据量更小。
易于解析：大多数编程语言都提供了对JSON的原生支持，解析速度快。
广泛支持：JSON几乎在所有主流编程语言和平台上都有支持，具有良好的兼容性。

4.2 缺点

数据类型有限：JSON不支持如日期、函数等复杂数据类型，需通过字符串或其他形式进行转换。
格式严格：JSON要求严格的语法规范（如键必须使用双引号），在编写和调试时容易出错。
安全性问题：在解析未经过滤的JSON数据时，可能会导致安全漏洞，如XSS攻击。

5. JSON的高级话题

5.1 JSONP（JSON with Padding）

JSONP 是一种解决跨域请求问题的技术，允许网页从其他域加载数据。JSONP通过使用<script>标签加载数据，将JSON数据包裹在一个回调函数中，从而绕过同源策略的限制。

// 假设API返回以下JSONP格式数据
callbackFunction({ "name": "John", "age": 30 });

// 客户端代码
function callbackFunction(data) {
  console.log(data.name); // 输出: John
}

// 动态加载JSONP数据
const script = document.createElement('script');
script.src = 'https://example.com/api?callback=callbackFunction';
document.body.appendChild(script);

5.2 JSON Schema

JSON Schema 是一种用于验证和描述JSON数据结构的标准。它定义了数据的格式、约束和关系，常用于API数据验证。

{
  "$schema": "http://json-schema.org/draft-07/schema#",
  "title": "Person",
  "type": "object",
  "properties": {
    "name": {
      "type": "string"
    },
    "age": {
      "type": "integer",
      "minimum": 0
    }
  },
  "required": ["name", "age"]
}

5.3 JSON与XML的对比

可读性：JSON比XML更简洁，容易阅读和书写。
数据模型：XML支持属性、元素和复杂的层级结构，而JSON主要通过对象和数组来表示数据结构。
解析速度：JSON的解析速度通常比XML快，因为其结构更简单。
格式严格性：JSON格式严格，而XML支持更多的格式和注释。

6. JSON的最佳实践

避免循环引用：在序列化对象时，避免出现循环引用，否则会导致 JSON.stringify() 报错。

const obj = {};
obj.self = obj;
JSON.stringify(obj); // 抛出 TypeError: Converting circular structure to JSON

使用 try-catch 处理解析错误：解析JSON字符串时，建议使用 try-catch 块来捕获可能的语法错误。

const jsonString = '{"name": "John", "age": 30,}'; // 错误的JSON格式
try {
  const obj = JSON.parse(jsonString);
} catch (error) {
  console.error("JSON解析失败:", error.message);
}