JS JSON.stringify介绍（JS序列化、JSON字符串）（遍历输入值的所有可枚举属性，将其转换为文本表示）缓存序列化、状态管理与时间旅行、replacer

技术文档

文章目录

JSON.stringify 全解析
- 1. 基本概念
- 2. 序列化原理
- - 1. 对于原始类型，直接转换为对应的字符串表示
  - 2. 对于对象和数组，递归处理其每个属性或元素
  - 3. 应用特殊规则处理日期、函数、Symbol 等特殊类型
  - 4. 检测并防止循环引用
  - 5. 应用 replacer 函数或数组进行自定义转换
  - 代码示例
- 3. 为什么需要序列化
- - 3.1 数据传输需求
  - 3.2 数据持久化
  - 3.3 数据复制
  - 3.4 跨语言通信
- 4. 语法结构
- - 4.1 参数详解
- 5. 基础用法示例
- 6. 特殊数据类型处理
- - 6.1 原始数据类型
  - 6.2 复杂对象处理
  - - 注意：默认情况下，Map、Set、RegExp 等这些特殊对象类型被转换为空对象 `{}`，这会导致数据完全丢失。
    - - 如何正确序列化这些特殊类型：要解决这个问题，需要在序列化前进行特殊处理：
      - 通用解决方案：可以创建一个通用的序列化工具函数，处理所有这些特殊类型：
- 7. replacer 参数应用
- - 7.1 使用（匿名）函数作为 replacer
  - 7.2 使用数组作为 replacer
- 8. 处理 toJSON 方法
- 9. 易犯错的场景
- - 9.1 循环引用问题
  - 9.2 数据丢失问题
  - 9.3 精度与大数问题
- 10. 高级应用场景
- - 10.1 深拷贝实现
  - 10.2 缓存序列化
  - 10.3 状态管理与时间旅行
- 11. 性能考量
- - 11.1 大数据处理
- 12. 常见陷阱与解决方案
- - 12.1 处理数值精度问题
  - 12.2 处理特殊字符
- 13. 序列化的安全问题
- 14. 与其他序列化方法比较
- - 14.1 JSON.stringify vs 手动序列化
  - 14.2 JSON vs 其他序列化格式
- 15. 最佳实践
- - 15.1 序列化前数据清理
  - 15.2 错误处理最佳实践
- 16. 总结

JSON.stringify 全解析

1. 基本概念

JSON.stringify 是 JavaScript 中的一个核心方法，用于将 JavaScript 对象或值转换为 JSON 字符串。这个方法对于数据序列化、网络传输和存储至关重要。

2. 序列化原理

JSON.stringify 的核心原理是遍历输入值的所有可枚举属性，然后将其转换为文本表示。这个过程遵循特定的规则和算法：

1. 对于原始类型，直接转换为对应的字符串表示

2. 对于对象和数组，递归处理其每个属性或元素

3. 应用特殊规则处理日期、函数、Symbol 等特殊类型

4. 检测并防止循环引用

5. 应用 replacer 函数或数组进行自定义转换

代码示例

// 序列化内部过程伪代码实现function pseudoStringify(value, replacer, space) { // 检查循环引用 const seen = new WeakSet(); function serialize(key, val) { // 应用 replacer 函数（如果提供） if (typeof replacer === \'function\') { val = replacer(key, val); } // 根据数据类型处理 if (val === null) return \'null\'; if (val === undefined) return undefined; if (typeof val === \'string\') return `\"${escapeString(val)}\"`; if (typeof val === \'number\') return isFinite(val) ? String(val) : \'null\'; if (typeof val === \'boolean\') return String(val); // 检查对象循环引用 if (typeof val === \'object\') { if (seen.has(val)) { throw new TypeError(\'循环引用无法转换为JSON\'); } seen.add(val); // 处理数组 if (Array.isArray(val)) { // 数组序列化逻辑... } // 处理对象 // 对象序列化逻辑... } } return serialize(\'\', value);}

3. 为什么需要序列化

3.1 数据传输需求

// 前端发送数据到服务器async function saveUserData(userData) { try { // 将复杂的 JavaScript 对象转换为字符串 // 因为网络请求只能传输字符串 const jsonData = JSON.stringify(userData); const response = await fetch(\'/api/users\', { method: \'POST\', headers: { \'Content-Type\': \'application/json\' }, body: jsonData // 使用序列化后的JSON字符串 }); return await response.json(); } catch (error) { console.error(\'数据传输失败:\', error); }}

3.2 数据持久化

// 将应用状态保存到本地存储function saveAppState(state) { // JavaScript对象无法直接存储，必须转换为字符串 localStorage.setItem(\'appState\', JSON.stringify(state));}// 从本地存储恢复应用状态function loadAppState() { const savedState = localStorage.getItem(\'appState\'); // 将字符串转回JavaScript对象 return savedState ? JSON.parse(savedState) : null;}

3.3 数据复制

// 深拷贝对象function deepClone(obj) { // 利用序列化再反序列化实现深拷贝 // 序列化会创建全新的字符串表示 // 反序列化会基于这个表示创建全新的对象结构 return JSON.parse(JSON.stringify(obj));}

3.4 跨语言通信

JSON 作为一种通用数据格式，实现了不同编程语言和系统之间的数据交换。JavaScript 的 JSON.stringify 和其他语言中的序列化工具产生兼容的输出格式。

4. 语法结构

JSON.stringify(value[, replacer[, space]])

4.1 参数详解

value: 要转换的 JavaScript 值，通常是对象或数组
replacer: 可选参数，可以是函数或数组，用于自定义转换过程
space: 可选参数，用于美化输出的 JSON 字符串

5. 基础用法示例

const data = { name: \"张三\", age: 30, isActive: true, skills: [\"JavaScript\", \"HTML\", \"CSS\"]};// 最基本的转换const jsonString = JSON.stringify(data);// 结果: {\"name\":\"张三\",\"age\":30,\"isActive\":true,\"skills\":[\"JavaScript\",\"HTML\",\"CSS\"]}// 带缩进的美化输出const prettyJson = JSON.stringify(data, null, 2);// 结果会带有缩进和换行，更易于阅读

6. 特殊数据类型处理

6.1 原始数据类型

// 数字转换JSON.stringify(42); // \"42\"// 字符串转换 - 注意会添加双引号JSON.stringify(\"测试\"); // \"\\\"测试\\\"\"// 布尔值转换JSON.stringify(true); // \"true\"// null 转换JSON.stringify(null); // \"null\"// undefined、函数和 Symbol 被忽略(对象属性)或转为 null(数组元素)JSON.stringify(undefined); // undefinedJSON.stringify([1, undefined, 2]); // \"[1,null,2]\"JSON.stringify({a: undefined}); // \"{}\"

6.2 复杂对象处理

// 日期对象会被转换为字符串const date = new Date();JSON.stringify(date); // 如：\"2023-11-20T08:00:00.000Z\"// Map、Set、RegExp 等会被转为空对象JSON.stringify(new Map([[\'key\', \'value\']])); // \"{}\"JSON.stringify(new Set([1, 2, 3])); // \"{}\"JSON.stringify(/pattern/); // \"{}\"// 循环引用会导致错误const obj = {};obj.self = obj;// JSON.stringify(obj); // 抛出错误: TypeError: Converting circular structure to JSON

注意：默认情况下，Map、Set、RegExp 等这些特殊对象类型被转换为空对象 `{}`，这会导致数据完全丢失。

如何正确序列化这些特殊类型：要解决这个问题，需要在序列化前进行特殊处理：

// 序列化 Map 对象function stringifyMap(map) { return JSON.stringify({ dataType: \'Map\', value: Array.from(map.entries()) // 转换为二维数组 });}const myMap = new Map([[\'key1\', \'value1\'], [\'key2\', \'value2\']]);const mapJson = stringifyMap(myMap);// 结果: {\"dataType\":\"Map\",\"value\":[[\"key1\",\"value1\"],[\"key2\",\"value2\"]]}// 反序列化回 Mapfunction parseMap(jsonString) { const obj = JSON.parse(jsonString); if (obj.dataType === \'Map\') { return new Map(obj.value); } throw new Error(\'不是有效的 Map JSON\');}

// 序列化 Set 对象function stringifySet(set) { return JSON.stringify({ dataType: \'Set\', value: Array.from(set.values()) });}const mySet = new Set([1, 2, 3, 4]);const setJson = stringifySet(mySet);// 结果: {\"dataType\":\"Set\",\"value\":[1,2,3,4]}// 反序列化回 Setfunction parseSet(jsonString) { const obj = JSON.parse(jsonString); if (obj.dataType === \'Set\') { return new Set(obj.value); } throw new Error(\'不是有效的 Set JSON\');}

// 序列化 RegExp 对象function stringifyRegExp(regex) { return JSON.stringify({ dataType: \'RegExp\', source: regex.source, flags: regex.flags });}const myRegex = /pattern/ig;const regexJson = stringifyRegExp(myRegex);// 结果: {\"dataType\":\"RegExp\",\"source\":\"pattern\",\"flags\":\"gi\"}// 反序列化回 RegExpfunction parseRegExp(jsonString) { const obj = JSON.parse(jsonString); if (obj.dataType === \'RegExp\') { return new RegExp(obj.source, obj.flags); } throw new Error(\'不是有效的 RegExp JSON\');}

通用解决方案：可以创建一个通用的序列化工具函数，处理所有这些特殊类型：

function enhancedStringify(obj) { return JSON.stringify(obj, (key, value) => { // 处理 Map if (value instanceof Map) { return { __type: \'Map\', value: Array.from(value.entries()) }; } // 处理 Set if (value instanceof Set) { return { __type: \'Set\', value: Array.from(value.values()) }; } // 处理 RegExp if (value instanceof RegExp) { return { __type: \'RegExp\', source: value.source, flags: value.flags }; } return value; });}function enhancedParse(jsonString) { return JSON.parse(jsonString, (key, value) => { if (value && typeof value === \'object\' && value.__type) { switch(value.__type) { case \'Map\': return new Map(value.value); case \'Set\': return new Set(value.value); case \'RegExp\': return new RegExp(value.source, value.flags); default: return value; } } return value; });}

这样，就可以正确地序列化和反序列化这些特殊对象类型了，避免数据丢失的问题。

7. replacer 参数应用

7.1 使用（匿名）函数作为 replacer

const user = { name: \"李四\", password: \"secret123\", // 敏感信息 age: 25, loginTime: new Date()};// 使用 replacer 函数过滤敏感信息并格式化日期const secureStringify = JSON.stringify(user, (key, value) => { // 过滤掉密码字段 if (key === \"password\") return undefined; // 格式化日期对象 if (value instanceof Date) { return value.toLocaleDateString(\"zh-CN\"); } return value;});// 结果中不包含密码，且日期格式化为本地格式

7.2 使用数组作为 replacer

const completeData = { id: 1001, name: \"产品A\", price: 299, inventory: 150, description: \"这是一个很好的产品\", manufacturer: \"某公司\", createdAt: \"2023-10-01\"};// 仅选择特定字段输出const selectedFields = [\"id\", \"name\", \"price\"];const simpleJson = JSON.stringify(completeData, selectedFields, 2);// 结果只会包含 id、name 和 price 字段

8. 处理 toJSON 方法

// 自定义对象可以实现 toJSON 方法来控制其 JSON 表示class Person { constructor(name, age) { this.name = name; this.age = age; this._secretId = \"ID12345\"; // 私有数据 } // 自定义 JSON 转换 toJSON() { return { name: this.name, age: this.age, // 不包含 _secretId isAdult: this.age >= 18 // 添加计算属性 }; }}const person = new Person(\"王五\", 22);JSON.stringify(person);// 结果: {\"name\":\"王五\",\"age\":22,\"isAdult\":true}

9. 易犯错的场景

9.1 循环引用问题

// 创建循环引用const team = { name: \"开发团队\", members: []};const member = { name: \"开发者\", team: team // 引用team对象};team.members.push(member); // team引用member，形成循环try { // 会抛出错误 JSON.stringify(team);} catch (error) { console.error(\"序列化失败:\", error.message); // 输出: 序列化失败: Converting circular structure to JSON}// 解决方案：使用replacer函数处理循环引用function handleCircular() { const seen = new WeakSet(); return (key, value) => { // 检测对象类型的循环引用 if (typeof value === \'object\' && value !== null) { if (seen.has(value)) { return \'[循环引用]\'; // 或者返回null/undefined来移除此属性 } seen.add(value); } return value; };}// 使用处理函数const safeJson = JSON.stringify(team, handleCircular());// 现在可以安全序列化，循环引用部分会被替换

9.2 数据丢失问题

const data = { id: 1, name: \"测试\", createdAt: new Date(), // 会转为字符串 regex: /^test$/, // 会变成 {} func: function() { return 1; }, // 会被完全忽略 symbol: Symbol(\'sym\'), // 会被完全忽略 infinity: Infinity, // 会变成 null nan: NaN,  // 会变成 null undefined: undefined // 会被完全忽略};const jsonString = JSON.stringify(data);const parsed = JSON.parse(jsonString);console.log(parsed);// 结果缺少了 func、symbol、undefined// regex 变成了 {}// infinity 和 nan 变成了 null// createdAt 变成了字符串，不再是 Date 对象// 解决方案：在序列化前转换特殊类型，反序列化后还原function prepareForJSON(obj) { return Object.entries(obj).reduce((result, [key, value]) => { // 处理函数 - 转为字符串表示 if (typeof value === \'function\') { result[key] = `__FUNCTION:${value.toString()}`; } // 处理日期 - 添加标记 else if (value instanceof Date) { result[key] = `__DATE:${value.toISOString()}`; } // 处理正则表达式 else if (value instanceof RegExp) { result[key] = `__REGEXP:${value.toString()}`; } // 其他情况直接保留 else { result[key] = value; } return result; }, {});}// 反序列化后恢复特殊类型function restoreFromJSON(obj) { return Object.entries(obj).reduce((result, [key, value]) => { if (typeof value === \'string\') { // 还原日期 if (value.startsWith(\'__DATE:\')) { result[key] = new Date(value.slice(7)); } // 还原正则表达式 else if (value.startsWith(\'__REGEXP:\')) { const regexParts = /^__REGEXP:\\/(.*)\\/([gimuy]*)$/.exec(value); if (regexParts) { result[key] = new RegExp(regexParts[1], regexParts[2]); } else { result[key] = value; } } // 其他情况直接保留 else { result[key] = value; } } else { result[key] = value; } return result; }, {});}

9.3 精度与大数问题

const data = { // JavaScript 数字精度问题 decimal: 0.1 + 0.2, // 结果是 0.30000000000000004 // 大整数溢出 bigInt: 9007199254740992, // 超出安全整数范围 // BigInt 类型无法直接序列化 reallyBig: 9007199254740992n};const jsonStr = JSON.stringify(data); // 会抛出错误: BigInt 值无法转换为 JSON// 解决方案：预处理大数和 BigIntfunction handleBigNumbers(obj) { return JSON.stringify(obj, (key, value) => { // 处理 BigInt if (typeof value === \'bigint\') { return value.toString() + \'n\'; // 添加标记 } // 处理大数，确保精度 if (typeof value === \'number\' && !Number.isSafeInteger(value)) { return value.toString(); // 转为字符串保存 } return value; });}// 使用处理函数const safeJsonStr = handleBigNumbers({ normalNum: 42, bigNum: 9007199254740992, bigInt: 9007199254740992n});// 反序列化时恢复function restoreBigNumbers(jsonStr) { return JSON.parse(jsonStr, (key, value) => { // 还原 BigInt if (typeof value === \'string\' && value.endsWith(\'n\')) { return BigInt(value.slice(0, -1)); } return value; });}

10. 高级应用场景

10.1 深拷贝实现

// 使用 JSON 方法实现简单的深拷贝// 注意：此方法有局限性，不能处理函数、undefined、Symbol、循环引用等function simpleDeepClone(obj) { // 先将对象转为 JSON 字符串 const jsonString = JSON.stringify(obj); // 再将 JSON 字符串解析回对象，生成全新的对象结构 return JSON.parse(jsonString);}const original = { info: { name: \"原始对象\", data: [1, 2, 3] } };const copy = simpleDeepClone(original);copy.info.name = \"副本\";console.log(original.info.name); // \"原始对象\" - 不受影响

10.2 缓存序列化

// 将复杂数据存储到 localStoragefunction saveToCache(key, data) { try { // 转换为字符串并存储 localStorage.setItem(key, JSON.stringify(data)); return true; } catch (error) { // 可能因为数据过大或其他原因导致存储失败 console.error(\"缓存存储失败:\", error); return false; }}// 从缓存中读取数据function loadFromCache(key) { try { const stored = localStorage.getItem(key); if (stored) { // 解析回 JavaScript 对象 return JSON.parse(stored); } return null; } catch (error) { console.error(\"缓存读取失败:\", error); return null; }}

10.3 状态管理与时间旅行

// Redux 等状态管理库使用序列化实现时间旅行调试class SimpleStore { constructor(initialState = {}) { this.state = initialState; this.history = []; } // 更新状态 dispatch(action) { // 保存当前状态快照到历史记录 this.history.push(JSON.stringify(this.state)); // 更新状态(简化示例) this.state = { ...this.state, ...action.payload }; return this.state; } // 时间旅行 - 回到之前的状态 timeTravel(stepIndex) { if (stepIndex >= 0 && stepIndex < this.history.length) { // 从历史记录恢复状态 this.state = JSON.parse(this.history[stepIndex]); return this.state; } return null; }}

11. 性能考量

11.1 大数据处理

// 处理大型数据集时的分块处理方法function processLargeData(data, chunkSize = 1000) { // 分割大型数组为多个小块 const chunks = []; for (let i = 0; i < data.length; i += chunkSize) { chunks.push(data.slice(i, i + chunkSize)); } // 逐块处理 const results = []; for (const chunk of chunks) { // 每个块单独序列化，避免一次处理过多数据 const jsonChunk = JSON.stringify(chunk); // 这里可以进行存储或传输 results.push(jsonChunk); } return results;}

12. 常见陷阱与解决方案

12.1 处理数值精度问题

// JavaScript 中的大数值可能超出 JSON 数值范围const bigNumber = 9007199254740992n; // BigInt// JSON.stringify(bigNumber); // 会抛出错误// 解决方案：转换为字符串处理const data = { id: \"9007199254740992\", // 作为字符串存储 normalNumber: 42};JSON.stringify(data); // 正常工作

12.2 处理特殊字符

// Unicode 字符和转义字符的处理const text = \"包含特殊字符: \\n 换行符 \\t 制表符 \\u2022 项目符号\";// JSON.stringify 会自动处理这些特殊字符const encoded = JSON.stringify(text);// 结果: \"包含特殊字符: \\n 换行符 \\t 制表符 • 项目符号\"// 解码时会正确还原JSON.parse(encoded); // 原始文本

13. 序列化的安全问题

// 不安全的 JSON 解析function unsafeParseFromServer(jsonString) { // 永远不要这样做！ return eval(\'(\' + jsonString + \')\');}// 安全的 JSON 解析function safeParseFromServer(jsonString) { try { // 使用标准 JSON.parse 方法 return JSON.parse(jsonString); } catch (error) { console.error(\'无效的 JSON 字符串:\', error); return null; }}// 处理不可信数据function validateAndParse(jsonString) { try { // 1. 使用标准方法解析 const data = JSON.parse(jsonString); // 2. 验证数据结构和类型 if (!data || typeof data !== \'object\') { throw new Error(\'数据格式无效\'); } // 3. 验证必要字段 if (!data.id || typeof data.id !== \'number\') { throw new Error(\'缺少必要字段或类型错误\'); } return data; } catch (error) { console.error(\'数据验证失败:\', error); return null; }}

14. 与其他序列化方法比较

14.1 JSON.stringify vs 手动序列化

// 手动构建 JSON 字符串 - 容易出错function manualStringify(obj) { // 这是一个简化示例，实际情况更复杂 let result = \'{\'; const entries = Object.entries(obj); for (let i = 0; i < entries.length; i++) { const [key, value] = entries[i]; result += `\"${key}\":`; if (typeof value === \'string\') { result += `\"${value}\"`; } else if (typeof value === \'number\' || typeof value === \'boolean\') { result += value; } else if (value === null) { result += \'null\'; } // 这里省略了数组、对象等复杂类型的处理 if (i < entries.length - 1) { result += \',\'; } } result += \'}\'; return result;}// JSON.stringify 更可靠、更安全、更全面

14.2 JSON vs 其他序列化格式

// JSON 序列化 - 标准且跨平台function serializeJSON(data) { return JSON.stringify(data); // 优点：标准格式，所有语言支持，人类可读 // 缺点：不支持循环引用，不能保留函数和特殊数据类型}// MessagePack 序列化示例 (需要引入库)function serializeMsgPack(data) { // 使用 MessagePack 库 (msgpack-lite 等) return msgpack.encode(data); // 优点：二进制紧凑，比JSON小，支持更多数据类型 // 缺点：需要额外库，人类不可读}// Protocol Buffers 示例 (需要引入库和定义 schema)function serializeProtobuf(data) { // 使用 Protocol Buffers 库和预定义 schema return protobuf.encode(data); // 优点：高效紧凑，强类型，适合 RPC // 缺点：需要预定义 schema，设置复杂}

15. 最佳实践

15.1 序列化前数据清理

// 序列化前清理数据function sanitizeForJSON(data) { // 深度复制对象并清理 function sanitize(obj, seen = new WeakSet()) { // 处理基本类型 if (obj === null || typeof obj !== \'object\') { return obj; } // 处理循环引用 if (seen.has(obj)) { return \"[循环引用]\"; } seen.add(obj); // 数组处理 if (Array.isArray(obj)) { return obj.map(item => sanitize(item, seen)); } // 对象处理 const result = {}; for (const [key, value] of Object.entries(obj)) { // 跳过不需要的属性 if (key.startsWith(\'_\')) continue; // 跳过私有属性 if (typeof value === \'function\') continue; // 跳过函数 // 处理特殊类型 if (value instanceof Date) { result[key] = value.toISOString(); } else { result[key] = sanitize(value, seen); } } return result; } return sanitize(data);}// 使用清理过的数据序列化const cleanData = sanitizeForJSON(complexData);const jsonString = JSON.stringify(cleanData);

15.2 错误处理最佳实践

// 健壮的序列化函数function robustStringify(data) { try { return JSON.stringify(data, (key, value) => { // 处理 BigInt if (typeof value === \'bigint\') { return value.toString() + \'n\'; } // 处理 Error 对象 if (value instanceof Error) { return { _error: true, name: value.name, message: value.message, stack: value.stack }; } // 处理特殊对象类型 if (value instanceof Map || value instanceof Set ||  value instanceof WeakMap || value instanceof WeakSet) { return { _type: value.constructor.name, value: value instanceof Map ? [...value.entries()] :  value instanceof Set ? [...value.values()] :  \'Cannot serialize\' }; } return value; }); } catch (error) { console.error(\'序列化失败:\', error); // 降级处理 - 尝试去除问题属性 if (error.message.includes(\'circular structure\')) { try { // 使用处理循环引用的方式重试 const seen = new WeakSet(); return JSON.stringify(data, (key, value) => { if (typeof value === \'object\' && value !== null) { if (seen.has(value)) return \'[循环引用]\'; seen.add(value); } return value; }); } catch (e) { // 如果还失败，返回基本信息 return JSON.stringify({ error: \'序列化失败\', reason: error.message }); } } // 其他错误情况返回错误信息 return JSON.stringify({ error: \'序列化失败\', reason: error.message }); }}

16. 总结

JSON.stringify 是处理数据序列化的强大工具，掌握其各种参数和用法能够有效解决数据处理中的各种问题。序列化是实现数据传输、存储和复制的基础技术，理解其原理和限制对于开发高效可靠的应用至关重要。

通过合理使用 replacer 和 space 参数，以及理解不同数据类型的处理规则，可以更精确地控制 JSON 输出。在实际应用中，需要注意特殊数据类型、循环引用、数值精度等潜在问题，采取适当的方法进行处理，避免数据丢失或安全隐患。

随着Web应用复杂度的提高，掌握高级序列化技巧和最佳实践变得尤为重要，这不仅能提高应用性能，还能增强数据处理的可靠性和安全性。

JS JSON.stringify介绍（JS序列化、JSON字符串 ）（遍历输入值的所有可枚举属性，将其转换为文本表示）缓存序列化、状态管理与时间旅行、replacer