JavaScript基础教程（四十七）JSON：别只会JSON.parse了！JSON的隐藏玩法大揭秘 #前端开发-优快云博客

JSON（JavaScript Object Notation）作为轻量级数据交换格式，早已成为前后端通信的标准协议。但大部分开发者仅掌握基础用法，未能发掘其真正潜力。

一、核心方法深度解析

JSON.stringify() 和 JSON.parse() 的第二个参数常被忽略，实则为强大工具：

// 自定义序列化（按需筛选字段）
const user = { id: 1, name: 'John', password: 'secret' };
const safeUser = JSON.stringify(user, ['id', 'name']);
// 输出：{"id":1,"name":"John"}

// 日期对象自动处理
const data = { date: new Date() };
const serialized = JSON.stringify(data, (key, value) => {
  return key === 'date' ? value.toISOString() : value;
});

二、复杂场景应用示例

深拷贝实现（解决引用关系陷阱）：

const deepClone = (obj) => JSON.parse(JSON.stringify(obj));
const original = { a: 1, b: { c: 2 } };
const cloned = deepClone(original);

本地数据库模拟：

// 简易数据库操作类
class JsonDB {
  constructor(key) {
    this.key = key;
  }
  read() {
    return JSON.parse(localStorage.getItem(this.key) || '[]');
  }
  write(data) {
    localStorage.setItem(this.key, JSON.stringify(data));
  }
}

三、性能与安全实践

大数据处理优化：使用JSON.parse的reviver参数延迟解析大对象
XSS防御：避免直接解析不可信JSON字符串，优先使用JSON.parse而非eval
循环引用处理（需配合特殊库）：

// 使用json-stringify-safe处理循环引用
const stringifySafe = require('json-stringify-safe');
const obj = { a: 1 };
obj.self = obj;
stringifySafe(obj); // 正常序列化

四、实际开发技巧

格式化调试输出：

console.log('%O', JSON.parse(JSON.stringify(obj, null, 2))); 
// 结构化展示（第二个参数设置缩进）

Reviver函数妙用：

const jsonStr = '{"date": "2023-12-20T03:00:00.000Z"}';
const data = JSON.parse(jsonStr, (k, v) => {
  return k === 'date' ? new Date(v) : v;
});
console.log(data.date.getFullYear()); // 2023

掌握这些高级技巧后，JSON将不再是简单数据传输工具，而成为提升开发效率的瑞士军刀。建议在项目中灵活运用，但需注意：超大JSON（超50MB）仍需专用解决方案。

进一步探索：了解BSON、MessagePack等二进制JSON替代方案，可在需要极致性能的场景下使用。