json.parse 用于将 json 字符串转换为 javascript 对象，而 json.stringify 则将 javascript 值转换为 json 字符串。1. json.parse(text[, reviver])：将 json 格式字符串反序列化为对象，支持可选的 reviver 函数用于处理键值对；2. json.stringify(value[, replacer[, space]])：将对象序列化为 json 字符串，replacer 控制属性筛选或转换，space 控制缩进格式；3. 它们解决了数据在不同环境间通信和持久化的关键问题；4. 使用中常见问题包括非法格式导致解析失败、循环引用引发错误、特殊类型如函数/date/map/bigint 被忽略或转换异常；5. 可通过自定义 replacer 处理循环引用，利用 tojson 或手动转换处理特殊类型数据。正确使用这两个方法能有效提升数据操作的安全性和灵活性。
JSON.parse 和 JSON.stringify 是 JavaScript 中用于处理 JSON（JavaScript Object Notation）数据的两个核心方法。简单来说，JSON.parse 的作用是将一个 JSON 格式的字符串转换成 JavaScript 对象或值，而 JSON.stringify 则恰恰相反，它负责将 JavaScript 对象或值转换成 JSON 格式的字符串。它们是数据在不同系统间（比如浏览器和服务器）或不同存储介质间（比如 localStorage）进行交换和持久化的关键工具。
解决方案
在我日常的开发工作中，JSON.parse 和 JSON.stringify 简直是无处不在的基石。
JSON.parse(text[, reviver])：这个方法的核心功能就是“反序列化”。想象一下，你从服务器端接收到了一段文本数据，或者从浏览器的 localStorage 里读出了一个字符串。这些数据往往都是以 JSON 字符串的形式存在的。JavaScript 本身操作的是对象，而不是字符串，所以你需要 JSON.parse 把这些字符串“变回”可以被程序直接理解和操作的 JavaScript 对象（比如一个数组、一个普通对象、一个数字，甚至一个布尔值）。如果没有它，我们拿到手的就只是一堆字符，根本无法方便地访问其中的属性或元素。比如，一个用户列表的 JSON 字符串，经过 JSON.parse 后，我们就能像操作普通 JavaScript 数组一样，用 userList[0].name 这样的方式去获取数据了。它还有一个可选的 reviver 参数，这是一个函数，你可以在解析过程中对每个键值对进行处理，比如把特定格式的日期字符串转换回 Date 对象，这在处理复杂数据时非常有用，但说实话，日常开发中我用得不算特别频繁，更多时候还是直接解析。
立即学习“Java免费学习笔记（深入）”；
JSON.stringify(value[, replacer[, space]])：与 parse 相反，stringify 的任务是“序列化”。当我们需要把一个 JavaScript 对象发送给服务器（比如提交表单数据），或者想把它存储在 localStorage 或 sessionStorage 里时，就必须把它转换成一个字符串。因为网络传输和大多数持久化存储都只认字符串。JSON.stringify 会把你的 JavaScript 对象（或数组、数字、布尔值等）转换成符合 JSON 规范的字符串。这个过程听起来简单，但它会聪明地处理各种数据类型：对象和数组会被转换为相应的 JSON 对象和数组，字符串、数字、布尔值和 null 会直接转换。但要注意，像函数、undefined 或 Symbol 值在对象属性中时，它们会被忽略掉；在数组中则会被转换为 null。它也有两个可选参数：replacer 可以是一个函数或一个数组，让你选择性地序列化对象的属性，或者在序列化过程中对值进行转换；space 参数则可以控制输出字符串的缩进，这对于调试或生成可读性更高的 JSON 文件非常有用，比如 JSON.stringify(obj, null, 2) 会让输出的 JSON 带有两格缩进，看起来整洁多了。
为什么我们需要JSON.parse和JSON.stringify？
在我看来，这两个方法的存在，根本上是为了解决“数据通信和持久化”这个核心问题。你想啊，JavaScript 对象是内存里的一个结构，它有复杂的引用关系，有方法，有各种类型的数据。但当你想把这些数据从浏览器发到服务器，或者存到硬盘里，甚至只是在不同的浏览器窗口之间传递，直接传递内存里的对象是不可能的。网络协议、文件系统或者 localStorage 它们都只认文本字符串。
JSON 作为一种轻量级的数据交换格式，它的设计初衷就是为了方便机器解析和生成，同时也保持了人类的可读性。它基于 JavaScript 的对象字面量语法，所以对 JavaScript 来说，解析和生成 JSON 尤其方便。JSON.parse 和 JSON.stringify 就是这座桥梁，它们负责将 JavaScript 世界里活生生的对象，安全地“打包”成字符串，以便穿越网络或被存储，然后在需要的时候，再把这些字符串“解包”还原成对象。没有它们，我们的 Web 应用就无法有效地与后端交互，也无法在用户关闭浏览器后保留数据。这就像是给数据穿上了一层“传输服”和“存储服”，让它们能够安全地跨越不同的环境。
JSON.parse和JSON.stringify在使用中常见哪些坑？
这俩兄弟虽然好用，但用起来也确实有些小脾气，不注意就可能踩坑。
JSON.parse 的最大雷区就是输入不是一个合法的 JSON 字符串。如果传给它的字符串格式不对，比如少了个引号，或者多余的逗号，它就会毫不留情地抛出一个 SyntaxError。我记得有一次，后端返回的数据不是标准的 JSON，而是带了注释或者其他非 JSON 字符，导致前端直接崩溃。所以，在解析外部数据时，最好用 try...catch 包裹起来，做好错误处理，不然用户体验会很差。另外，虽然不是常见的坑，但从安全性角度考虑，如果 JSON.parse 的输入源不可信，要小心潜在的 JSON 注入攻击，尽管这在现代浏览器环境中通常不是直接的执行代码问题，更多是数据完整性和逻辑漏洞。
JSON.stringify 的坑就更多样了：
循环引用（Circular References）：这是最常见的，也是最让人头疼的。如果你的 JavaScript 对象中存在循环引用，比如 obj.a = obj，或者 obj1.ref = obj2 且 obj2.ref = obj1，那么 JSON.stringify 在尝试将它转换为字符串时会陷入无限循环，最终抛出 TypeError: Converting circular structure to JSON 错误。这在处理复杂的 DOM 结构或图数据时尤其容易遇到。数据类型丢失或转换：函数、undefined 和 Symbol 值：当它们作为对象属性的值时，JSON.stringify 会直接忽略这些属性。如果是数组中的元素，它们会被转换为 null。这意味着如果你想序列化一个包含这些类型数据的对象，它们会“消失”。Date 对象：Date 对象会被转换为 ISO 格式的字符串（例如 "2023-10-27T10:00:00.000Z"）。当你 parse 回来时，它仍然是一个字符串，而不是 Date 对象。如果你需要 Date 对象，就得手动转换。RegExp 对象：RegExp 对象会被序列化为空对象 {}。Map、Set 等复杂数据结构：这些 ES6 新增的数据结构也不会被正确序列化，它们会被序列化为空对象 {}。大整数（BigInt）：JSON.stringify 不支持 BigInt 类型，会抛出 TypeError。属性顺序不保证：虽然现代 JavaScript 引擎通常会保留简单对象的属性顺序，但 JSON 规范本身不保证对象属性的顺序。这意味着在某些极端情况下，如果你的逻辑依赖于属性的特定顺序，可能会出问题。精度问题：对于非常大的数字，JavaScript 的 Number 类型是双精度浮点数，超过 Number.MAX_SAFE_INTEGER (2^53 - 1) 的整数或非常小的浮点数可能会在序列化和反序列化过程中丢失精度。
如何处理JSON.stringify的特殊数据类型和循环引用？
面对 JSON.stringify 的这些“坑”，我们当然有办法去填平它们，通常会用到它的可选参数 replacer 和一些自定义逻辑。
处理特殊数据类型：
Date 对象：最常见的做法是在 stringify 之前，手动将 Date 对象转换为你想要的字符串格式（比如 getTime() 获取时间戳，或者 toISOString()），然后在 parse 之后，利用 reviver 函数或者手动遍历，将这些字符串再转换回 Date 对象。
// 序列化前手动转换const objWithDate = { name: "Test", created: new Date()};const jsonString = JSON.stringify({ ...objWithDate, created: objWithDate.created.getTime() // 转换为时间戳});// 反序列化时手动转换（或者用reviver）const parsedObj = JSON.parse(jsonString);parsedObj.created = new Date(parsedObj.created);
或者使用 toJSON() 方法：如果你的对象上定义了 toJSON() 方法，JSON.stringify 在序列化该对象时会调用这个方法，并序列化其返回值。这是一个很优雅的方式来定制对象的序列化行为。
class MyDateWrapper { constructor(date) { this.date = date; } toJSON() { return this.date.toISOString(); // 自定义序列化行为 }}const data = { eventTime: new MyDateWrapper(new Date())};console.log(JSON.stringify(data)); // 输出 {"eventTime":"2023-10-27T...Z"}
Map、Set 等复杂结构：这些需要你手动将它们转换成数组或普通对象。比如，Map 可以转换为键值对数组 Array.from(map.entries())，Set 可以转换为数组 Array.from(set)。反序列化时再手动重建。
函数、undefined、Symbol、BigInt：如果这些数据确实需要被序列化，你就得在 stringify 之前，将它们显式地转换为可序列化的类型，比如字符串。
BigInt：可以转换为字符串 value.toString()。函数：转换为函数体的字符串 func.toString() (但通常不建议序列化函数)。undefined 和 Symbol：通常这些是设计上就不应该被序列化的，如果非要，也只能转换为特定的字符串标记。
处理循环引用：
解决循环引用最常用的方法是使用 replacer 参数。replacer 可以是一个函数，它会在序列化过程中遍历对象的每个键值对。在这个函数中，我们可以检测当前值是否已经被序列化过（即是否构成循环引用），如果发现循环，就返回一个替代值（比如 undefined 让它被忽略，或者一个表示循环的字符串）。
一个常见的 replacer 实现方式是利用 WeakSet 或 Set 来追踪已经访问过的对象：
const getCircularReplacer = () => { const seen = new WeakSet(); // 使用 WeakSet 避免内存泄漏 return (key, value) => { if (typeof value === "object" && value !== null) { if (seen.has(value)) { return; // 发现循环引用，返回 undefined (此属性将被忽略) // 或者返回一个标记字符串，如： return '[Circular]'; } seen.add(value); } return value; // 正常返回 };};const a = {};const b = {};a.b = b;b.a = a; // 循环引用try { const jsonString = JSON.stringify(a, getCircularReplacer()); console.log(jsonString); // 输出 {"b":{}} 或 {"b":{"a":"[Circular]"}} (取决于返回策略)} catch (e) { console.error("序列化失败:", e.message); // 不会抛出错误了}
这个 getCircularReplacer 函数会创建一个 WeakSet 来存储所有已经访问过的对象。当 replacer 函数被调用时，如果当前 value 是一个对象且已经在 seen 中，就说明存在循环引用，此时我们可以选择忽略该属性（返回 undefined）或者用一个自定义的字符串来标记它。这样就能避免 TypeError 的抛出，让序列化过程顺利完成。
总之，JSON.parse 和 JSON.stringify 是 JavaScript 中处理数据交换和持久化的利器，理解它们的行为特性，尤其是那些“坑”点，并学会利用 replacer 和 reviver 等高级用法，能让我们在开发中更加游刃有余。
以上就是JavaScript的JSON.parse和JSON.stringify有什么作用？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1568181.html
微信扫一扫 
支付宝扫一扫 
