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函数,用于在解析过程中过滤或转换值
示例:
const jsonStr = '{"name":"小明","age":25,"hobbies":["读书","游泳"]}';const data = JSON.parse(jsonStr);
console.log(data.name); // "小明"
如何操作解析后的 JSON 数据
解析后得到的是标准 JS 对象或数组,可以像操作普通变量一样读取、修改、遍历:
立即学习“Java免费学习笔记(深入)”;
- 用点语法或方括号访问属性:
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())→"2024-05-20T08:12:34.567Z" - 遇到循环引用会直接报错:
TypeError: Converting circular structure to JSON - 想保留特殊类型(如 Date、Map、Set),需手动在
replacer中处理,或用第三方库(如 flatted、serialize-javascript)
基本上就这些。用好这两个方法,JSON 处理就不复杂但容易忽略细节。











