一、为什么需要JSON处理？

在现代Web开发中，JSON（JavaScript Object Notation）已成为数据交换的事实标准。从API响应到本地存储，我们都需要在JavaScript对象和JSON字符串之间进行转换。这正是JSON.parse()和JSON.stringify()的核心作用。

javascript // 典型场景：接收API返回的JSON字符串 const apiResponse = '{"name":"张三","age":28}'; const data = JSON.parse(apiResponse); // → {name: "张三", age: 28}

二、JSON.parse() 深度解析

基础用法

将JSON字符串转换为JavaScript对象：
javascript const userStr = '{"id":101,"isActive":false}'; const userObj = JSON.parse(userStr); console.log(userObj.isActive); // 输出: false

注意事项

1. 严格语法要求：

   
   
   
   • 属性名必须用双引号包裹
   • 不支持尾随逗号
     javascript JSON.parse('{"name":"John",}'); // 报错！

2. 日期处理：
   JSON中没有日期类型，默认转为字符串：
   javascript const str = '{"date":"2023-05-20T12:00:00Z"}'; const obj = JSON.parse(str); console.log(typeof obj.date); // "string"

3. 安全风险：
   永远不要直接解析不可信来源的JSON，可能包含恶意代码：
   javascript // 危险操作！ JSON.parse('{"__proto__": {"admin":true}}');

三、JSON.stringify() 高级技巧

基础序列化

javascript const product = { id: 2001, name: "无线耳机", stock: null }; const jsonStr = JSON.stringify(product); // → '{"id":2001,"name":"无线耳机","stock":null}'

进阶功能

1. 格式化输出：
   javascript JSON.stringify({a:1, b:2}, null, 2); /* 输出： { "a": 1, "b": 2 } */

2. 自定义序列化（replacer参数）：
   javascript function replacer(key, value) { if (typeof value === 'number') return undefined; return value; } JSON.stringify({a:1, b:"text"}, replacer); // → '{"b":"text"}'

3. 处理特殊对象：

   
   
   
   • 忽略Symbol属性
   • 函数会被省略
     javascript JSON.stringify({ [Symbol('secret')]: 123, greet: () => console.log("Hi") }); // → '{}'

四、实际开发中的经典场景

场景1：深度克隆对象

javascript const original = { items: [1,2,3] }; const clone = JSON.parse(JSON.stringify(original));

场景2：LocalStorage存储

javascript
// 存储
const settings = { theme: 'dark', fontSize: 14 };
localStorage.setItem('userSettings', JSON.stringify(settings));

// 读取
const saved = JSON.parse(localStorage.getItem('userSettings'));

场景3：处理循环引用

javascript
const obj = { name: "循环引用示例" };
obj.self = obj;

// 直接序列化会抛出错误
try {
JSON.stringify(obj); // TypeError
} catch(e) {
console.error("检测到循环引用！");
}

五、性能优化与最佳实践

1. 大数据处理：

   
   
   
   • 超过10MB的JSON建议使用流式解析器
   • 考虑Web Workers避免阻塞UI线程

2. 错误处理模板：
   javascript function safeParse(jsonStr) { try { return JSON.parse(jsonStr); } catch (err) { console.error(`解析失败: ${err.message}`); return null; } }

3. 替代方案：

   
   
   
   • 需要保留特殊类型时考虑序列化库如serialize-javascript
   • 浏览器环境可使用structuredClone()进行深拷贝

结语

掌握JSON.parse()和JSON.stringify()的细节，能显著提升数据处理能力。记住：
- 始终验证输入的JSON字符串
- 复杂场景考虑使用replacer/reviver函数
- 性能敏感场景需要特殊优化

这些方法虽然基础，但却是JavaScript开发中最高频使用的工具之一，值得深入理解其工作原理。