JSON.stringify的作用及使用场景详解

你在学习文章相关的知识吗？本文《JSON.stringify 作用及使用场景解析》，主要介绍的内容就涉及到，如果你想提升自己的开发能力，就不要错过这篇文章，大家要知道编程理论基础和实战操作都是不可或缺的哦！

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 应用来说，是不可或缺的技能。

本篇关于《JSON.stringify的作用及使用场景详解》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！