17370845950

JavaScript 解析和操作 JSON 主要依靠 JSON.parse() 和 JSON.stringify()：前者将合法 JSON 字符串转为 JS 值，支持 reviver 过滤；后者将 JS 值转为字符串，用于发送请求、本地存储等，支持 replacer 和 space 参数，但不支持函数、undefined、循环引用等。

JavaScript 解析和操作 JSON 数据主要靠 JSON.parse() 和 JSON.stringify() 两个原生方法，它们是处理前后端数据交换最常用、最安全的工具。

如何解析 JSON 字符串（转成 JS 对象/数组）

使用 JSON.parse() 把符合 JSON 格式的字符串转换为 JavaScript 值（对象、数组、字符串、数字、布尔值或 null）。

• 必须传入合法的 JSON 字符串，比如双引号包裹的键名、不支持单引号、末尾不能有逗号
• 常见错误：用 eval() 或构造函数解析——不安全且易出错，坚决不用
• 可选第二个参数为 reviver 函数，用于在解析过程中过滤或转换值

示例：

如何操作解析后的 JSON 数据

解析后得到的是标准 JS 对象或数组，可以像操作普通变量一样读取、修改、遍历：

• 用点语法或方括号访问属性：data.age 或 data["hobbies"]
• 修改属性：data.age = 26
• 添加新字段：data.city = "杭州"
• 遍历数组：data.hobbies.forEach(h => console.log(h))

注意：JSON 本身不支持函数、undefined、Date、RegExp 等类型，解析时这些会被忽略或报错。

JSON.stringify 的核心用途

JSON.stringify() 把 JavaScript 值（对象、数组等）转换成 JSON 字符串，主要用于：

• 向后端发送数据（如 fetch / axios 请求体）
• 本地存储（localStorage 只接受字符串）：localStorage.setItem("user", JSON.stringify(obj))
• 调试输出结构化数据（比 console.log 更清晰）
• 深拷贝简单对象（不含函数、循环引用、特殊类型）：const copy = JSON.parse(JSON.stringify(original))

它也支持两个可选参数：replacer（筛选或转换字段）、space（美化缩进，如 2 或 "  "）。

常见陷阱和注意事项

实际开发中容易踩坑的地方：

• JSON.stringify(undefined)、function()、Symbol → 返回 undefined；JSON.stringify([undefined, null, 1]) → [null,null,1]
• 日期对象会变成 ISO 字符串：JSON.stringify(new Date()) → "2025-05-20T08:12:34.567Z"
• 遇到循环引用会直接报错：TypeError: Converting circular structure to JSON
• 想保留特殊类型（如 Date、Map、Set），需手动在 replacer 中处理，或用第三方库（如 flatted、serialize-javascript）

基本上就这些。用好这两个方法，JSON 处理就不复杂但容易忽略细节。