异常教程
js json（超详细）
💡一则或许对你有用的小广告
欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论
- 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于
Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;- 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;
截止目前， 星球 内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习 ，欢迎点击围观
在现代 Web 开发中，数据的交换与存储是核心任务之一。JavaScript 和 JSON（JavaScript Object Notation）的组合，为开发者提供了高效且直观的解决方案。本文将从基础概念出发，结合代码示例和实际场景，深入解析如何在 JavaScript 中灵活运用 JSON 技术。无论是构建 API 交互、本地数据存储，还是处理复杂数据结构，掌握这一技能都将显著提升开发效率。
JSON：轻量级数据交换的通用语言
JSON 是一种轻量级的数据交换格式，因其简洁、易读且兼容性强，成为 Web 开发中的标准。它通过键值对（key-value）和数组的组合，将复杂数据结构转化为文本形式，方便跨平台传输。
JSON 的基本结构
JSON 的核心语法包括对象（Object）和数组（Array）两种数据结构：
- 对象：用花括号
{}包裹，键名需用双引号包裹，值可以是字符串、数字、布尔值、数组、对象等。 - 数组：用方括号
[]包裹，元素之间用逗号分隔。
示例代码：
{
"name": "Alice",
"age": 25,
"is_student": false,
"courses": ["Math", "CS"],
"address": {
"city": "New York",
"zip": "10001"
}
}
形象比喻：可以将 JSON 比作快递包裹的标签，其中每个键（如 name、age）是包裹的属性，值则是具体内容。这种结构化的设计，使得不同系统能快速解析并理解数据含义。
JavaScript 中的 JSON 处理：核心 API 解析
JavaScript 原生提供了两个核心方法：JSON.stringify() 和 JSON.parse()，用于在 JavaScript 对象与 JSON 字符串之间互相转换。
1. JSON.stringify()：对象转 JSON 字符串
该方法将 JavaScript 对象序列化为 JSON 字符串，便于传输或存储。
语法：
JSON.stringify(value, replacer, space);
value：要转换的 JavaScript 对象或值。replacer（可选）：函数或数组，用于过滤或转换输出内容。space（可选）：缩进空格数或字符串，美化输出格式。
示例代码：
const user = {
name: "Bob",
hobbies: ["reading", "coding"],
age: 30
};
const jsonStr = JSON.stringify(user);
// 输出：{"name":"Bob","hobbies":["reading","coding"],"age":30}
进阶用法：通过 replacer 函数控制序列化内容。例如，隐藏敏感字段：
const secureStr = JSON.stringify(user, (key, value) => {
if (key === "age") return undefined; // 排除 age 字段
return value;
});
// 输出：{"name":"Bob","hobbies":["reading","coding"]}
2. JSON.parse()：JSON 字符串转对象
该方法将 JSON 字符串解析为 JavaScript 对象。
语法：
JSON.parse(text, reviver);
text：待解析的 JSON 字符串。reviver（可选）：函数，用于在解析过程中修改值。
示例代码：
const jsonStr = '{"city": "Shanghai", "population": 24150000}';
const cityData = JSON.parse(jsonStr);
console.log(cityData.city); // 输出：Shanghai
异常处理：若输入的 JSON 格式错误（如缺少引号或逗号），JSON.parse() 会抛出异常。建议使用 try...catch 捕获错误：
try {
const invalidJson = JSON.parse("{name: 'John'}"); // 错误：键名未加引号
} catch (error) {
console.error("JSON 解析失败:", error);
}
实战案例：构建数据交互的完整流程
通过一个简单案例，演示如何在 JavaScript 中实现从 JSON 数据获取到渲染的全流程。
案例背景
假设需要从 API 获取用户列表数据，并在页面上动态展示。
步骤 1：模拟 API 响应
const apiResponse = `[
{"id": 1, "name": "Alice", "email": "alice@example.com"},
{"id": 2, "name": "Bob", "email": "bob@example.com"}
]`;
步骤 2：解析 JSON 字符串为对象数组
const users = JSON.parse(apiResponse);
步骤 3：遍历数据并渲染到 HTML
const userList = document.getElementById("user-list");
users.forEach(user => {
const li = document.createElement("li");
li.textContent = `${user.name} - ${user.email}`;
userList.appendChild(li);
});
HTML 结构：
<ul id="user-list"></ul>
常见问题与解决方案
问题 1：特殊字符的转义
JSON 对双引号、反斜杠等字符有严格要求，需使用 \\ 或 JSON.stringify() 自动处理。
错误示例：
// 错误：未转义双引号
const invalidJson = '{ "name": "He said "Hello"" }';
正确处理方式：
const validJson = JSON.stringify({
name: 'He said "Hello"'
});
// 输出：{"name":"He said \"Hello\""}
问题 2：处理循环引用
当对象存在循环引用时，JSON.stringify() 会抛出错误。例如：
const obj = { ref: null };
obj.ref = obj; // obj 引用自身
JSON.stringify(obj); // 抛出错误：Converting circular structure to JSON
解决方案：通过 replacer 函数手动排除循环引用：
JSON.stringify(obj, (key, value) => {
if (key === "ref") return undefined; // 排除 ref 字段
return value;
});
进阶技巧：扩展 JSON 的功能
自定义序列化逻辑
通过重写 toJSON() 方法，可以控制对象在序列化时的行为。例如：
class User {
constructor(name, password) {
this.name = name;
this.password = password; // 不希望暴露的字段
}
toJSON() {
return {
name: this.name
};
}
}
const user = new User("Charlie", "secret");
console.log(JSON.stringify(user)); // 输出：{"name":"Charlie"}
使用第三方库扩展功能
对于复杂场景（如日期格式化、自定义类型支持），可借助 json-stringify-safe 或 flatted 等库。
结论
JSON 与 JavaScript 的结合，为数据处理提供了强大且灵活的工具链。通过掌握 JSON.stringify()、JSON.parse() 等核心方法，开发者可以高效完成数据序列化、解析及交互。无论是构建单页应用、处理 API 响应，还是进行数据持久化存储，JSON 的简洁性与兼容性始终是 Web 开发中的重要基石。
实践建议：尝试将本文案例扩展为完整的 CRUD（增删改查）功能，或结合本地存储（如 localStorage）实现离线数据管理。通过不断实践，您将更深入理解 js json 的应用场景与潜力。