JS解析与序列化JSON全攻略

文章不知道大家是否熟悉？今天我将给大家介绍《JS处理JSON数据：解析与序列化详解》，这篇文章主要会讲到等等知识点，如果你在看完本篇文章后，有更好的建议或者发现哪里有问题，希望大家都能积极评论指出，谢谢！希望我们能一起加油进步！

JavaScript处理JSON靠JSON.parse()解析字符串为对象、JSON.stringify()将对象转字符串，二者原生支持；需注意语法规范、不可序列化值及安全问题。

JavaScript 中处理 JSON 数据主要靠两个内置方法：JSON.parse() 用于解析字符串为对象，JSON.stringify() 用于把对象转成 JSON 字符串。它们不依赖外部库，浏览器和 Node.js 都原生支持。

用 JSON.parse() 把 JSON 字符串转成 JS 对象

服务器返回的、localStorage 存的、或者手动拼的 JSON 数据，通常都是字符串形式，必须解析才能访问属性。

• 基本用法：传入合法 JSON 字符串，返回对应 JS 值（对象、数组、字符串、数字、布尔或 null）
• 注意：JSON 键名必须用双引号，单引号或不带引号会报错；末尾不能有逗号；undefined、函数、Symbol 无法表示，解析时会被忽略或报错
• 可选第二个参数 reviver 函数，用来过滤或转换解析后的值，比如统一处理时间戳

const str = '{"name":"小明","age":25,"active":true}';
const obj = JSON.parse(str);
console.log(obj.name); // "小明"

用 JSON.stringify() 把 JS 对象转成 JSON 字符串

向后端发送数据、存入 localStorage、调试打印结构时常用。它只序列化可枚举的自有属性。

• 基础用法：传入对象，返回标准 JSON 字符串
• 第二个参数可以是数组（指定要包含的属性名）或 replacer 函数（自定义每个键的值）
• 第三个参数用于美化输出，可以是数字（缩进空格数）或字符串（如 "\t"）
• 无法序列化的值（如 undefined、函数、Symbol、循环引用）会被跳过、转为 null 或直接报错（循环引用会抛出 TypeError）

const user = { id: 1, name: "小红", toJSON() { return { nick: "红红" }; } };
console.log(JSON.stringify(user)); // {"id":1,"name":"小红"}
console.log(JSON.stringify(user, null, 2)); // 格式化输出

常见问题和安全提醒

JSON 处理看似简单，但几个细节容易踩坑：

• 不要用 eval() 或 new Function() 解析 JSON —— 有严重 XSS 风险，JSON.parse 是唯一安全选择
• 后端返回非 JSON 内容（如 HTML 错误页、空响应）时，JSON.parse 会直接报错，建议加 try/catch
• Date 对象、RegExp、Map、Set 等原生类型不会被正确序列化，需要手动转换（例如 Date 转成 ISO 字符串）
• 如果对象含循环引用，stringify 前需用工具（如 cycle.js）或自己实现扁平化逻辑

实用小技巧

提升开发效率的几条经验：

• 调试时快速查看结构：console.log(JSON.stringify(data, null, 2))
• 深拷贝简单对象（不含函数、undefined、Date 等）：JSON.parse(JSON.stringify(obj))（注意局限性）
• localStorage 只接受字符串，存对象前必须 stringify，取出来后必须 parse
• fetch 默认不自动解析 JSON，记得调用 response.json()（它内部就是封装了 JSON.parse）

基本上就这些。掌握 parse 和 stringify 的行为边界，比记住语法更重要。

好了，本文到此结束，带大家了解了《JS解析与序列化JSON全攻略》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！