JavaScript JSON 处理：解析与字符串化详解
json (JavaScript 对象表示法) 是一种轻量级的数据交换格式，易于人类阅读和编写，也易于机器解析和生成。JavaScript 内置方法可实现 JSON 字符串与 JavaScript 对象的相互转换。
1. 解析 JSON 字符串
JSON.parse() 方法用于将 JSON 字符串转换为 JavaScript 对象。
语法
JSON.parse(text[, reviver]);
- text：待解析的 JSON 字符串。
- reviver (可选)：一个函数，用于在返回解析后的对象之前对其进行转换。
示例
a. 简单解析
const jsonString = '{"name": "john", "age": 30}'; const parsedData = JSON.parse(jsonString); console.log(parsedData.name); // 输出：john console.log(parsedData.age); // 输出：30
b. 使用 reviver 函数
立即学习“Java免费学习笔记（深入）”；
reviver 函数用于自定义解析过程。
const jsonString = '{"name": "john", "birthYear": 1990}'; const parsedData = JSON.parse(jsonString, (key, value) => { if (key === "birthYear") { return 2024 - value; // 将出生年份转换为年龄 } return value; }); console.log(parsedData.birthYear); // 输出：34
错误处理
const invalidJson = "{name: 'john', age: 30}"; // 无效 JSON (键必须加引号) try { const data = JSON.parse(invalidJson); } catch (error) { console.error("无效 JSON:", error.message); }
2. 字符串化 JavaScript 对象
JSON.stringify() 方法将 JavaScript 对象转换为 JSON 字符串。
语法
JSON.stringify(value[, replacer[, space]]);
- value：待字符串化的对象。
- replacer (可选)：一个函数或数组，用于过滤属性。
- space (可选)：添加缩进以提高可读性。
示例
a. 简单字符串化
const data = { name: "john", age: 30 }; const jsonString = JSON.stringify(data); console.log(jsonString); // 输出：{"name":"john","age":30}
b. 使用 replacer 函数
replacer 函数用于过滤或转换对象的属性。
const data = { name: "john", age: 30, password: "secret" }; const jsonString = JSON.stringify(data, (key, value) => { if (key === "password") return undefined; // 排除密码 return value; }); console.log(jsonString); // 输出：{"name":"john","age":30}
c. 添加缩进
space 参数用于格式化输出。
const data = { name: "john", age: 30 }; const jsonString = JSON.stringify(data, null, 2); console.log(jsonString); // 输出： // { // "name": "john", // "age": 30 // }
错误处理
对象中的循环引用会导致 JSON.stringify() 抛出错误。
3. 应用场景
a. 向服务器发送数据
将 JavaScript 对象转换为 JSON 字符串后再发送到 http 请求中。
const data = { name: "john", age: 30 }; fetch("https://example.com/api", { method: "post", headers: { "content-type": "application/json" }, body: JSON.stringify(data) });
b. 本地存储
使用 localStorage 以 JSON 格式保存和检索数据。
const data = { name: "john", age: 30 }; localStorage.setItem("user", JSON.stringify(data)); // 保存数据 const userData = JSON.parse(localStorage.getItem("user")); // 检索数据 console.log(userData.name); // 输出：john
c. 深拷贝对象
使用 JSON 方法创建对象的深拷贝 (不适用于函数或循环引用)。
4. JSON 与 JavaScript 对象的差异
5. 总结
- 使用 JSON.parse() 将 JSON 字符串转换为 JavaScript 对象。
- 使用 JSON.stringify() 将 JavaScript 对象转换为 JSON 字符串。
- JSON 在 Web 应用的数据交换中至关重要，尤其是在 API 和本地存储中。
- 始终处理 JSON 解析或字符串化过程中的错误。
熟练掌握 JSON 处理是构建现代数据驱动 Web 应用的关键技能。
作者：Abhay Singh Kathayat
全栈开发人员，精通前端和后端技术，使用多种编程语言和框架构建高效、可扩展且用户友好的应用。联系邮箱：kaashshorts28@gmail.com
