1. 原理与基本机制
JSON.parse 与 JSON.stringify 是前端与后端数据交互的基础工具，承担着将文本与对象之间高效转换的职责。核心原则是遵循 JSON 规范，将数据在网络传输与内存中的表示保持可预测性和互操作性。
JSON.parse 的职责是将一个符合 JSON 语法的文本字符串转换为对应的 JavaScript 对象或数组。原生实现通常高度优化，在遇到无效文本时会抛出 SyntaxError，需要调用端通过错误处理或校验来应对。
与此同时，JSON.stringify 将 JavaScript 值序列化为 JSON 字符串，支持的类型包括对象、数组、数字、字符串、布尔值和 null，而 函数、undefined、symbol等值在对象中会被忽略，数组中的这些值会被替换为 null。
const obj = { a: 1, b: 2, c: undefined, d: () => {} };
JSON.stringify(obj); // {"a":1,"b":2}，c 与 d 被忽略
1.1 JSON.parse的工作原理
解析过程通常分为几个阶段：词法分析与分词、语法分析、对象树构建，以及可选的 reviver 转换阶段。Reviver 是一个回调函数，可以在逐层回传时对值进行自定义转换，从而实现类型重构或字段筛选。
有效文本的解析结果总是与输入的结构对应，例如键值对、嵌套对象与数组，都会在返回的对象中以相同层级反映。若文本包含日期、正则等非原生 JSON 的数据，需要在 reviver 中手动进行转换。
const text = '{ "t": "2024-01-01", "n": 42 }';
const parsed = JSON.parse(text, (key, value) => {if (typeof value === 'string' && /^\d{4}-\d{2}-\d{2}$/.test(value)) {return new Date(value);}return value;
});
// parsed.t 将被转换为 Date 对象
1.2 JSON.stringify的工作原理
序列化阶段会把 JavaScript 值映射成符合 JSON 规范的文本。可序列化的类型包括对象、数组、数字、字符串、布尔值和 null，并且 函数、undefined、symbol在对象中会被忽略，数组中的对应值会被替换为 null。
除了基本类型外，replacer 和 space 两个可选参数会显著影响输出结果：replacer 可以是数组或函数，用于筛选字段或变换值；space 则用于美化输出、提高可读性。合理使用可降低传输成本并提升调试效率。
const data = { a: 1, b: 2, c: 3, d: undefined };
JSON.stringify(data); // {"a":1,"b":2,"c":3}
JSON.stringify(data, ['a','b'], 2); // 精简且美化输出
2. 常见坑与边界情况
无效输入与异常处理是最常见的问题。JSON.parse 需要严格的 JSON 文本，任何单引号、尾逗号、键未用双引号等都会导致 SyntaxError，因此在调用前做输入校验或使用 try/catch 是常见实践。
在 JSON.stringify 的场景中，循环引用是一个重要坑，标准的 JSON 规范不支持循环结构，因此会抛出 TypeError（Converting circular structure to JSON）。需要在序列化前处理循环引用，或使用转换策略与第三方库实现。
const a = { name: "A" }; a.self = a;
try {JSON.stringify(a);
} catch (e) {// 处理循环引用策略：比如自定义 toJSON，或使用 replacer 拆分对象
}
2.1 类型处理与错误处理
对于来自不可信来源的文本，需要避免隐式类型注入，不要在 reviver 中执行副作用操作，更不要将解析结果直接用于未校验的数据库查询或渲染逻辑。完善的输入过滤与错误处理是安全前提。
另外，空文本或空字符串不是有效 JSON，parse 时会抛出错误；而空对象或空数组在实践中常常作为默认值使用，需要根据场景合理处理。
在序列化阶段，Undefined、Functions、Symbol在对象中会被忽略，但在数组中会转化为 null，这会改变原始数据的结构与含义，需要在设计 API 时进行约束。
2.2 安全性与跨域/跨环境问题
来自第三方的文本如果直接用于 JSON.parse，应避免执行潜在的 XSS 风险；虽然 JSON 不会执行脚本，但在后续对解析结果的处理中仍需进行 类型检查与边界控制。 reviver 的副作用应受控，不应改变上下文之外的状态。
跨环境（浏览器与服务器端 Node.js）的行为基本一致，但在不同引擎上的性能差异可能影响实时性。优先使用原生实现，必要时在构建环节进行统一性测试，确保序列化/解析的一致性。
// 解析来自网络的 JSON 文本并进行基本校验
function safeParse(text) {try {const data = JSON.parse(text);if (data && typeof data === 'object') return data;} catch (e) {// 记录日志或返回默认值}return null;
}
3. 性能优化与实战技巧
3.1 使用 replacer 和 space 提升性能与可读性
通过 replacer，可以选择性地序列化字段，降低序列化成本，同时避免传输多余数据。对于大对象，使用简单的字段集合比逐字段拼接要高效得多。重复传输同一结构时，降低冗余数据尤为关键。
若输出仅用于机器解析，优先采用无缩进的 compact JSON，以减少文本体积。若用于调试、日志或可视化，使用 space 参数提升可读性，但需权衡带宽成本。
const payload = { a: 1, b: 2, c: 3 };
const compact = JSON.stringify(payload); // 无缩进，体积最小
const pretty = JSON.stringify(payload, null, 2); // 易读性提升
3.2 针对大数据的处理策略
面对海量 JSON 文本，单次 parse 或 stringify 的内存开销可能很高。实战中可以采用分块解析、逐步拼接、或流式 JSON 方案来缓解内存压力。分块处理与分批加载是常见做法。
此外，开发者常将数据分片送往后台，减少主线程阻塞，必要时借助 Web Worker 将序列化任务离线化，提升 UI 响应性。并发场景下的分工执行对性能提升显著。
// 简化示例：用 Web Worker 处理大对象的序列化
// stringify-worker.js
self.onmessage = function(e) {const json = JSON.stringify(e.data);self.postMessage(json);
};// 主线程
const worker = new Worker('stringify-worker.js');
worker.postMessage(largeObj);
worker.onmessage = (e) => {const json = e.data;// 将 json 发送到网络或存储
};
3.3 实战技巧与兼容性
在实际工程中，优先使用原生实现以确保行为一致性与性能稳定性。对多个浏览器的行为差异进行基线测试，避免在旧浏览器中使用不普及的特性。对兼容性需求较高的项目，保持转换层尽量简单、明确，减少潜在的不一致性。
将耗时的 JSON 处理放到后台任务，能显著提升主线程的响应性，尤其是复杂对象的序列化/解析需要较长时间时。实战中，使用 Web Worker 或分步执行可以降低卡顿概率，并提高用户体验。
const data = { /* 大量数据 */ };
const worker = new Worker('stringify-worker.js');
worker.postMessage(data);
worker.onmessage = (e) => {const json = e.data;// 继续网络传输或存储
};
