让你的对象变得拗口：JSON.stringify()，我把对象夹进了 JSON 魔法帽！

桃扇骨 2024-04-25 20:14 2阅读 0赞

![cd36113cf50b4c3bb4a7b3edd4e78d0e.gif][]

--------------------

**🎬 江城开朗的豌豆**：[个人主页][Link 1]

**🔥 个人专栏** :[《 VUE 》][VUE] [《 javaScript 》][javaScript]

📝 **个人网站** :[《 江城开朗的豌豆🫛 》][Link 2]

**⛺️ 生活的理想，就是为了理想的生活 !**

![在这里插入图片描述][7a8de4d12e20434eb29590366872b046.gif_pic_center]

**目录**

引言

1. JSON.stringify() 属性

replacer

space

toJSON

2. 应用场景

数据传输

数据存储

\#日志记录

数据展示

3. 完整优雅的实现

4. 注意事项

循环引用

特殊类型

性能优化

--------------------

### 引言 ###

> 在 JavaScript 中，JSON.stringify() 是一个内置函数，用于将 JavaScript 对象转换为 JSON 字符串。JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，广泛用于前后端数据传输和存储。本文将详细介绍 JSON.stringify() 的属性、应用场景，并提供一个完整而优雅的实现，处理循环引用、特殊类型（如日期和正则表达式）以及性能相关的问题。同时，我们还将讨论注意事项和相关引用资料。

### 1. JSON.stringify() 属性 ###

JSON.stringify() 函数具有以下属性：

#### replacer ####

replacer 是一个可选的参数，它可以是一个函数或一个数组。它用于指定需要序列化的对象的属性。当 replacer 是一个函数时，它将被应用于对象的每个属性，可以用来过滤、替换或转换属性的值。当 replacer 是一个数组时，只有数组中包含的属性才会被序列化。

示例：

#### space ####

space 是一个可选的参数，用于控制生成的 JSON 字符串的缩进和格式化。它可以是一个数字表示缩进的空格数，或者是一个字符串表示缩进的字符串。如果 space 是一个非负整数，则每一级缩进使用指定数量的空格；如果 space 是一个字符串，则使用该字符串作为缩进符号。

示例：

const obj = { name: 'John', age: 25 };
    
    const jsonString = JSON.stringify(obj, null, 2);
    console.log(jsonString);
    // 输出:
    // {
    //   "name": "John",
    //   "age": 25
    // }

#### toJSON ####

如果要序列化的对象具有 toJSON() 方法，那么该方法将被调用，以便返回可序列化的值。toJSON() 方法可以在对象中定义，用于自定义对象在序列化过程中的行为。

示例：

### 2. 应用场景 ###

JSON.stringify() 在以下场景中非常有用：

#### 数据传输 ####

当需要将 JavaScript 对象转换为字符串，以便在网络中传输给后端或其他系统时，可以使用 JSON.stringify() 进行序列化。

const obj = { name: 'John', age: 25 };
    
    const jsonString = JSON.stringify(obj);
    console.log(jsonString);
    // 输出: {"name":"John","age":25}

#### 数据存储 ####

如果需要将 JavaScript 对象保存到本地存储（如浏览器的 LocalStorage 或数据库），可以使用 JSON.stringify() 将对象转换为 JSON 字符串后进行存储。

const obj = { name: 'John', age: 25 };
    
    const jsonString = JSON.stringify(obj);
    localStorage.setItem('user', jsonString);

#### 日志记录 ####

在记录日志时，可以将 JavaScript 对象转换为 JSON 字符串，并将其作为日志消息的一部分。

const obj = { name: 'John', age: 25 };
    
    const logMessage = `User info: ${JSON.stringify(obj)}`;
    console.log(logMessage);

#### 数据展示 ####

将 JavaScript 对象转换为 JSON 字符串后，可以方便地在前端页面中展示、渲染或打印。

const obj = { name: 'John', age: 25 };
    
    const jsonString = JSON.stringify(obj);
    document.getElementById('user-info').textContent = jsonString;

### 3. 完整优雅的实现 ###

下面是一个完整且优雅的 JSON.stringify() 实现，它考虑了处理循环引用、日期和正则表达式等特殊类型，并尽量保持了性能优化。

此实现使用了递归和一些辅助函数来处理不同的数据类型。它会检查循环引用并抛出错误，处理特殊类型（如日期和正则表达式），并使用递归进行深度优先遍历。

请注意，此实现仅为简化示例，对于更复杂的场景可能需要进行更多的处理和优化。建议在实际使用中参考第三方库或更全面的文档和资源。

### 4. 注意事项 ###

在使用

JSON.stringify() 时，需要注意以下事项：

#### 循环引用 ####

如果要序列化的对象存在循环引用，即对象之间相互引用，会导致无限递归的情况。为了避免死循环，可以使用 WeakSet 或其他方式来检测循环引用，并在检测到循环引用时抛出错误或采取其他处理方式。

#### 特殊类型 ####

特殊类型（如日期和正则表达式）需要进行适当的处理，以确保正确的序列化和反序列化。

#### 性能优化 ####

JSON.stringify() 可能会在处理大型对象或嵌套层次较深的对象时产生性能问题。为了提高性能，可以考虑使用更高效的算法或采用其他优化策略。

![2fbe3bb88c334da2b7c8c09ac236faee.gif][]

[cd36113cf50b4c3bb4a7b3edd4e78d0e.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/25/c1a9be8681ad49fab78f5496e115b994.gif
[Link 1]: https://blog.csdn.net/qq_48652579?type=blog
[VUE]: https://blog.csdn.net/qq_48652579/category_12294321.html
[javaScript]: https://blog.csdn.net/qq_48652579/category_12275821.html
[Link 2]: https://tinyurl.com/yangtaoWeb
[7a8de4d12e20434eb29590366872b046.gif_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/25/776674eb00ba45feb532453c2c4435da.gif
[2fbe3bb88c334da2b7c8c09ac236faee.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/25/fc5c8de1be404c8abc3de96b8c76628a.gif