JSon.Stringify的核心作用是将Javascript对象或值转换为json字符串，便于数据传输（如fetch发送post请求）和存储（如localstorage）；2. 处理特殊类型时需注意：函数、undefined、symbol会被忽略，数组中对应值变NULL，循环引用会抛错，date转iso字符串但反序列化仍为字符串，bigint和map/set需手动处理；3. 通过replacer参数可过滤属性或自定义转换逻辑（如隐藏敏感信息、处理bigint），space参数可格式化输出（数字为空格数，字符串为缩进符），提升可读性与灵活性。
JSON.stringify 方法在 JavaScript 里，简单来说，就是把一个 JavaScript 值（比如对象、数组、字符串、数字等）转换成一个 JSON 格式的字符串。它的主要作用就是为了数据的序列化，让数据能够方便地在网络上传输，或者存储到本地，因为它把复杂的数据结构变成了一个统一的、文本化的格式。
JSON.stringify 方法的核心作用是将 JavaScript 对象或值转换为 JSON 字符串。这在 Web 开发中几乎无处不在，尤其当你需要将前端的数据发送到后端服务器，或者将一些配置、状态保存到本地存储（如 localStorage、sessionstorage）时，它都是不可或缺的工具。它确保了数据在不同系统、不同语言之间传递时的格式一致性，因为 JSON 本身就是一种轻量级的数据交换格式。
JSON.stringify 在实际开发中常见的使用场景有哪些？
我个人觉得，JSON.stringify 在日常开发里简直是万金油般的存在，用得最多的，毫无疑问就是数据传输和数据存储。
首先说数据传输。想象一下，你在前端页面里收集了一大堆用户输入的信息，比如一个表单对象，里面有姓名、年龄、地址，甚至还有一些嵌套的选项。你要把这些数据发给后端服务器，如果直接发一个 JavaScript 对象过去，那后端可能根本不认识，或者解析起来会非常麻烦。这时候，JSON.stringify 就派上用场了，它能把这个复杂的 JavaScript 对象变成一个标准的 JSON 字符串，后端用任何语言（python、Java、Node.js等）都能轻松解析。比如，fetch API 或者 XMLHttpRequest 发送 POST 请求时，body 通常就需要一个字符串化的数据。
const userData = { name: '张三', age: 30, address: { city: '北京', street: '某某街' }, hobbies: ['阅读', '编程'] }; // 发送到服务器前，先序列化 fetch('/api/users', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(userData) // 这里就用到了！ }) .then(response => response.json()) .then(data => console.log('Success:', data)) .catch(error => console.error('Error:', error));
再就是数据存储。浏览器提供的 localStorage 和 sessionStorage 只能存储字符串。如果你想把一个 JavaScript 对象或者数组存进去，直接存是会变成 [Object Object] 这样的字符串的，根本不是你想要的数据。所以，你得先用 JSON.stringify 把它变成 JSON 字符串，存进去；取出来的时候，再用 JSON.parse 把它变回原来的 JavaScript 对象。这简直是前端持久化数据最基础的手段了。
const appSettings = { theme: 'dark', notifications: true, lastLogin: new Date() }; // 存储前序列化 localStorage.setItem('appSettings', JSON.stringify(appSettings)); // 取出后反序列化 const storedSettings = JSON.parse(localStorage.getItem('appSettings')); console.log(storedSettings.theme); // 'dark'
还有一些不那么显眼，但同样重要的场景，比如深拷贝。虽然不是最推荐的深拷贝方式（因为它有一些限制），但对于只包含基本数据类型、数组和普通对象的简单数据结构来说，JSON.parse(JSON.stringify(obj)) 确实是一种快速实现深拷贝的“黑科技”。不过，这个方法不能处理函数、undefined、Date 对象、regexp 对象、Map、Set 等特殊类型，所以用的时候得清楚它的局限性。
最后，调试时也挺好用。有时候你想看看一个复杂对象里面到底有什么，直接 console.log(obj) 可能输出得不够清晰，或者对象引用关系让你摸不着头脑。这时候，console.log(JSON.stringify(obj, null, 2)) 就能把对象格式化成易读的 JSON 字符串，方便你检查数据结构和内容。
JSON.stringify 处理特殊数据类型（如函数、undefined、循环引用）时有哪些注意事项？
在使用 JSON.stringify 的时候，有一些数据类型它处理起来会比较“个性”，甚至会直接报错，这些点是必须要注意的，不然很容易踩坑。
我遇到的最常见的问题就是函数和 undefined。当 JSON.stringify 遇到对象中的属性值是函数、undefined 或 Symbol 值时，它会直接忽略这些属性，不把它们包含在最终的 JSON 字符串里。如果这些值是数组的元素，那么它们会被转换成 null。这听起来有点奇怪，但这是 JSON 标准的规定。所以，如果你期望序列化一个包含函数或 undefined 的对象，并且希望这些信息也保留下来，那 JSON.stringify 就不适合直接用，你可能需要自己手动处理，或者用其他序列化库。
const complexObj = { name: '测试', age: undefined, // undefined greet: function() { console.log('Hello'); }, // 函数 symbolKey: Symbol('id'), // Symbol data: [1, undefined, 3, function() {}] // 数组中的 undefined 和函数 }; console.log(JSON.stringify(complexObj)); // 输出: {"name":"测试","data":[1,null,3,null]} // 注意：age、greet、symbolKey 都没了，数组里的 undefined 和函数变成了 null
另一个大坑是循环引用。如果你的对象结构里存在循环引用，比如 a 引用了 b，同时 b 又引用了 a，那么 JSON.stringify 在尝试序列化时会陷入无限循环，最终抛出一个 TypeError: Converting circular structure to JSON 的错误。这是非常致命的，因为这会直接导致你的程序崩溃。解决这个问题通常需要你在序列化之前手动解除循环引用，或者使用一些专门处理循环引用的库。我通常会在遇到这种错误时，第一时间检查数据结构，看看是不是不小心创建了循环引用。
const objA = {}; const objB = {}; objA.b = objB; objB.a = objA; // 循环引用！ try { JSON.stringify(objA); // 这里会抛出 TypeError } catch (e) { console.error("捕获到错误:", e.message); // 输出: 捕获到错误: Converting circular structure to JSON }
还有一些值得一提的：
- Date 对象：Date 对象会被转换为 ISO 格式的字符串，比如 “2023-10-27T08:00:00.000Z”。这通常是符合预期的，但在反序列化（JSON.parse）时，它仍然是一个字符串，需要你手动将其转换回 Date 对象。
- BigInt：BigInt 类型的值在 JSON.stringify 时会直接抛出 TypeError。JSON 标准本身不支持 BigInt。如果你需要序列化 BigInt，通常需要先将其转换为 String，然后在反序列化时再转回 BigInt。
- Map 和 Set：这些新的数据结构也不会被直接序列化成它们的原有结构，它们会被转换成空对象 {}。如果你需要序列化它们，通常需要手动将它们转换为数组或其他 JSON 支持的类型。
了解这些“怪癖”非常重要，它能帮助你避免很多不必要的调试时间和错误。
如何利用 replacer 和 space 参数优化 JSON.stringify 的输出？
JSON.stringify 提供了两个可选参数：replacer 和 space，它们能让你对序列化过程有更精细的控制，这在很多场景下都非常有用。
先说 space 参数，这个参数主要是为了美化输出。如果你给它传入一个数字（0-10），它就会用这个数字表示的空格数来缩进 JSON 字符串，让它更易读。如果传入一个字符串（比如 ‘t’），它就会用这个字符串作为缩进字符。这在调试时特别有用，因为格式化的 JSON 字符串比一行紧凑的字符串看着舒服多了，一眼就能看出数据结构。
const data = { name: '示例数据', details: { id: 123, status: 'active' }, items: ['itemA', 'itemB'] }; // 不带 space 参数，输出紧凑 console.log('紧凑输出:', JSON.stringify(data)); // 输出: {"name":"示例数据","details":{"id":123,"status":"active"},"items":["itemA","itemB"]} // space 为 2，缩进 2 个空格 console.log('缩进 2 个空格:', JSON.stringify(data, null, 2)); /* 输出: { "name": "示例数据", "details": { "id": 123, "status": "active" }, "items": [ "itemA", "itemB" ] } */ // space 为 't'，使用制表符缩进 console.log('使用制表符缩进:', JSON.stringify(data, null, 't')); /* 输出: { "name": "示例数据", "details": { "id": 123, "status": "active" }, "items": [ "itemA", "itemB" ] } */
再来说说 replacer 参数，这个参数就强大多了，它允许你自定义序列化过程中的值转换。replacer 可以是一个数组，也可以是一个函数。
当 replacer 是一个数组时，这个数组里应该包含你想要保留的属性名（字符串）。JSON.stringify 只会序列化这些指定属性及其子属性。这在你想从一个大对象中提取部分信息进行序列化时非常方便，可以有效减少传输的数据量。
const userProfile = { id: 'user123', name: '李四', email: 'lisi@example.com', passwordHash: 'some_hash_value', // 不希望被序列化 lastLogin: new Date() }; // 只序列化 id, name, email const publicProfile = JSON.stringify(userProfile, ['id', 'name', 'email']); console.log('部分序列化:', publicProfile); // 输出: {"id":"user123","name":"李四","email":"lisi@example.com"}
当 replacer 是一个函数时，它会为对象中的每个属性（包括对象本身）调用一次。这个函数接收两个参数：key（属性名）和 value（属性值）。你可以在这个函数里根据 key 和 value 返回不同的值，从而实现更复杂的转换逻辑。
- 如果你返回 value，则保持原样。
- 如果你返回 undefined，则该属性会被忽略（不会出现在最终的 JSON 字符串中）。
- 如果你返回其他值，则该属性会被替换为返回的值。
这个功能非常灵活，比如你可以用来过滤敏感信息、转换数据类型、或者处理那些 JSON.stringify 默认不支持的类型（如 BigInt 或 Date 对象，如果你想以特定格式保存它们的话）。
const product = { name: '超级电脑', price: 9999.99, stock: 100, description: '性能强劲，值得拥有', secretKey: 'abc-123-xyz', // 敏感信息 manufactureDate: new Date(), bigNumber: 12345678901234567890n // BigInt }; function customReplacer(key, value) { // 过滤掉敏感信息 if (key === 'secretKey') { return undefined; // 忽略这个属性 } // 将 BigInt 转换为字符串 if (typeof value === 'bigint') { return value.toString(); } // 将 Date 对象转换为 yyYY-MM-DD 格式的字符串 if (value instanceof Date) { return value.toISOString().split('T')[0]; } // 其他值保持不变 return value; } const serializedProduct = JSON.stringify(product, customReplacer, 2); console.log('自定义序列化:', serializedProduct); /* 输出: { "name": "超级电脑", "price": 9999.99, "stock": 100, "description": "性能强劲，值得拥有", "manufactureDate": "2023-10-27", // 日期格式化了 "bigNumber": "12345678901234567890" // BigInt 变字符串了 } */
通过灵活运用 replacer 和 space，我们不仅能控制 JSON 字符串的内容，还能控制它的可读性，这对于构建健壮和高效的 Web 应用来说，是不可或缺的技能。
