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 操作不是孤立调用，而是嵌套在异步流程里，容易漏掉错误分支。

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”更可靠。

# javascript # java # html # js # json # 编码 # 浏览器 # app # 后端 # ai # 状态码 # 为什么 # red # xss # Object # NULL # 构造函数 # date # Token # 字符串 # 循环

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】