javascript如何操作JSON数据？_深入javascript JSON解析与序列化【教程】

javaScript操作jsON核心是json.parse()和JSON.stringify()；eval存在xss风险，JSON.parse()严格校验格式；fetch后需检查response.ok再调用response.json()，避免手动parse。

javascript 操作 JSON 数据的核心就两件事：JSON.parse() 和 JSON.stringify()，其他所谓“操作”都是对解析后的普通对象或数组进行的常规 JS 处理。

为什么不能直接用 eval() 或构造函数解析 JSON？

虽然 eval("{'a':1}") 在语法上可能“成功”，但这是严重安全隐患：JSON 字符串若含恶意代码（如 "{ 'a': 1, 'b': console.log('xss') }"），eval 会执行它。浏览器原生 JSON.parse() 严格校验格式，只接受标准 JSON（双引号、无尾逗号、无注释、无函数），拒绝执行任何代码。

• JSON.parse() 要求字符串必须是合法 JSON —— 键名和字符串值必须用双引号，{'a': 1} 会报 SyntaxError: Unexpected Token '
• 遇到 undefined、function、symbol、BigInt 等非 JSON 类型时，JSON.stringify() 默认静默忽略它们；而 JSON.parse() 遇到非法结构直接抛错，不会尝试“修复”
• 服务器返回的响应体是字符串，即使 Content-Type 是 application/json，也必须显式调用 JSON.parse()，否则你拿到的只是字符串，不是对象

JSON.stringify() 的三个参数怎么用？

第二个参数可以是数组（指定要序列化的属性名）或函数（自定义每个键值的处理逻辑），第三个参数控制缩进（用于可读性输出，不影响语义）。

• 过滤字段：JSON.stringify({a: 1, b: 2, c: 3}, ['a', 'c']) → "{"a":1,"c":3}"
• 日期转 ISO 字符串：JSON.stringify({t: new Date()}, (k, v) => v instanceof date ? v.toISOString() : v)
• 避免循环引用错误：如果对象有自引用（如 obj.parent = obj），默认会抛 TypeError: Converting circular structure to JSON；可用 replacer 函数跳过该属性，或提前用 structuredClone()（现代环境）浅拷贝后再序列化
• 注意：undefined、function、symbol 在 key 位置会被忽略，在 value 位置会被转为 NULL（数组中）或完全省略（对象中）

从 fetch 到安全使用 JSON 数据的完整链路

真实场景中，JSON 操作不是孤立调用，而是嵌套在异步流程里，容易漏掉错误分支。

立即学习“Java免费学习笔记（深入）”；

• fetch() 返回 promise，但网络失败（如离线）、http 错误状态码（如 404、500）都不会自动 reject；必须手动检查 response.ok 或 response.status
• response.json() 才真正调用 JSON.parse()，它返回一个 Promise，且会在解析失败时 reject（比如后端返回了 html 错误页却声称是 JSON）
• 典型写法：

  fetch('/api/data')   .then(r => {     if (!r.ok) throw new Error(`HTTP ${r.status}`);     return r.json();   })   .then(data => console.log(data))   .catch(err => console.error('解析失败或网络异常:', err));

• 不要写 JSON.parse(await response.text()) —— response.json() 内部已做最优处理（包括字符编码识别），且语义更清晰

真正难的从来不是调用那两个函数，而是判断什么时候该 parse、什么时候不该 parse，以及如何在嵌套异步、类型不明确、服务端不可控的情况下守住数据边界。多一次 typeof data === 'Object' && data !== null 检查，比依赖文档里写的“保证返回 JSON”更可靠。