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); // 输出：johnconsole.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
错误处理
务必使用 try...catch 块处理无效 JSON。
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 对象的差异
文本格式 (字符串)内存数据结构键必须是字符串 (带引号)键可以是字符串或 Symbol无法存储方法/函数可以存储方法/函数
5. 总结
使用 JSON.parse() 将 JSON 字符串转换为 JavaScript 对象。使用 JSON.stringify() 将 JavaScript 对象转换为 JSON 字符串。JSON 在 Web 应用的数据交换中至关重要，尤其是在 API 和本地存储中。始终处理 JSON 解析或字符串化过程中的错误。
熟练掌握 JSON 处理是构建现代数据驱动 Web 应用的关键技能。
作者：Abhay Singh Kathayat
全栈开发人员，精通前端和后端技术，使用多种编程语言和框架构建高效、可扩展且用户友好的应用。联系邮箱：kaashshorts28@gmail.com
以上就是掌握 JavaScript 中的 JSON 处理：解析和字符串化的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1499561.html
微信扫一扫 
支付宝扫一扫 
