在JavaScript开发中，图结构、Map、Set以及循环引用是JSON序列化过程中常见的复杂场景，原生JSON.stringify方法无法直接适配这些需求，需要开发者自定义处理规则来实现正确的序列化。
原生JSON序列化的局限性
原生JSON.stringify方法在序列化时会遵循以下规则，这些规则导致它无法处理Map、Set和循环引用：
- 遇到
undefined、函数、Symbol类型的值会直接忽略（在数组中会转为null） - 不支持Map、Set这类ES6新增的内置数据结构，序列化结果会返回空对象
{} - 当对象存在循环引用时，会直接抛出
TypeError错误
我们可以先看一个原生方法处理这些场景的示例：
// 测试Map序列化
const map = new Map([['a', 1], ['b', 2]]);
console.log(JSON.stringify(map)); // 输出: {}
// 测试Set序列化
const set = new Set([1, 2, 3]);
console.log(JSON.stringify(set)); // 输出: {}
// 测试循环引用
const obj = {};
obj.self = obj;
try {
JSON.stringify(obj);
} catch (e) {
console.log(e.message); // 输出: Converting circular structure to JSON
}
处理Map和Set的序列化
要解决这个问题，我们可以利用JSON.stringify的第二个参数replacer，它是一个过滤函数或数组，用来筛选要序列化的属性。我们可以在replacer中判断值的类型，对Map和Set做特殊处理。
Map和Set的序列化思路是将其转换为数组格式，Map可以转为[[key1, value1], [key2, value2]]的二维数组，Set可以转为[value1, value2]的一维数组。
实现代码如下：
function customReplacer(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())
};
}
return value;
}
const map = new Map([['name', '张三'], ['age', 20]]);
const set = new Set(['apple', 'banana']);
const data = { map, set };
const serialized = JSON.stringify(data, customReplacer);
console.log(serialized);
// 输出: {"map":{"__type":"Map","value":[["name","张三"],["age",20]]},"set":{"__type":"Set","value":["apple","banana"]}}
处理循环引用问题
循环引用的核心问题是对象被多次引用，我们需要记录已经序列化过的对象，当再次遇到时直接返回对应的标识，避免无限递归。
可以通过一个WeakSet来存储已经遍历过的对象，WeakSet不会阻止对象被垃圾回收，适合这种临时存储的场景。
处理循环引用的完整序列化函数如下：
function serializeWithCircular(data) {
const seen = new WeakSet();
const replacer = (key, value) => {
// 非对象类型直接返回
if (typeof value !== 'object' || value === null) {
return value;
}
// 已经遍历过的对象，返回循环引用标识
if (seen.has(value)) {
return '[Circular Reference]';
}
// 标记当前对象为已遍历
seen.add(value);
// 处理Map类型
if (value instanceof Map) {
const entries = [];
value.forEach((val, key) => {
entries.push([key, val]);
});
return {
__type: 'Map',
value: entries
};
}
// 处理Set类型
if (value instanceof Set) {
const values = [];
value.forEach(val => {
values.push(val);
});
return {
__type: 'Set',
value: values
};
}
// 普通对象直接返回
return value;
};
return JSON.stringify(data, replacer);
}
// 测试循环引用场景
const obj = { name: '测试对象' };
obj.self = obj;
obj.map = new Map([['key', 'value']]);
obj.set = new Set([1, 2, 3]);
const result = serializeWithCircular(obj);
console.log(result);
// 输出: {"name":"测试对象","self":"[Circular Reference]","map":{"__type":"Map","value":[["key","value"]]},"set":{"__type":"Set","value":[1,2,3]}}
图结构的序列化适配
图结构通常由节点和边组成，节点之间可能存在多对多的引用关系，本质就是包含循环引用和复杂内置对象的场景，我们前面的方法已经可以覆盖大部分需求，只需要额外处理图节点的标识即可。
我们可以给每个图节点添加唯一ID，序列化时只存储节点的ID和关联节点的ID，反序列化时再根据ID重建引用关系。
图结构序列化的示例：
// 定义图节点类
class GraphNode {
constructor(id, value) {
this.id = id;
this.value = value;
this.neighbors = []; // 相邻节点
}
}
// 创建图结构
const node1 = new GraphNode(1, '节点1');
const node2 = new GraphNode(2, '节点2');
const node3 = new GraphNode(3, '节点3');
node1.neighbors.push(node2, node3);
node2.neighbors.push(node1);
node3.neighbors.push(node1);
// 图序列化函数
function serializeGraph(rootNodes) {
const seen = new WeakSet();
const nodeMap = new Map(); // 存储节点id到序列化数据的映射
const replacer = (key, value) => {
if (typeof value !== 'object' || value === null) {
return value;
}
// 处理图节点
if (value instanceof GraphNode) {
// 已经处理过的节点，返回id引用
if (seen.has(value)) {
return { __type: 'GraphNodeRef', id: value.id };
}
seen.add(value);
// 存储节点序列化数据
const nodeData = {
__type: 'GraphNode',
id: value.id,
value: value.value,
neighborIds: value.neighbors.map(n => n.id)
};
nodeMap.set(value.id, nodeData);
return nodeData;
}
// 处理Map和Set
if (value instanceof Map) {
return {
__type: 'Map',
value: Array.from(value.entries())
};
}
if (value instanceof Set) {
return {
__type: 'Set',
value: Array.from(value.values())
};
}
return value;
};
const nodes = rootNodes.map(node => JSON.parse(JSON.stringify(node, replacer)));
return JSON.stringify({ nodes: nodes });
}
const graphStr = serializeGraph([node1, node2, node3]);
console.log(graphStr);
反序列化的配套实现
序列化之后需要对应的反序列化逻辑，才能还原原始数据结构，反序列化主要处理__type标识的特殊对象，以及循环引用和图节点的引用重建。
反序列化函数示例：
function deserialize(jsonStr) {
const data = JSON.parse(jsonStr);
// 处理普通特殊对象（Map、Set）
function reviver(key, value) {
if (typeof value === 'object' && value !== null) {
if (value.__type === 'Map') {
return new Map(value.value);
}
if (value.__type === 'Set') {
return new Set(value.value);
}
}
return value;
}
// 如果是图结构的序列化结果，额外处理图节点
if (data.nodes) {
const nodeMap = new Map();
// 先创建所有节点实例
data.nodes.forEach(node => {
if (node.__type === 'GraphNode') {
const graphNode = new GraphNode(node.id, node.value);
nodeMap.set(node.id, graphNode);
}
});
// 再建立节点之间的引用关系
data.nodes.forEach(node => {
if (node.__type === 'GraphNode') {
const graphNode = nodeMap.get(node.id);
node.neighborIds.forEach(id => {
graphNode.neighbors.push(nodeMap.get(id));
});
// 删除临时属性
delete graphNode.neighborIds;
}
});
return Array.from(nodeMap.values());
}
return JSON.parse(jsonStr, reviver);
}
// 测试反序列化
const deserializedNodes = deserialize(graphStr);
console.log(deserializedNodes[0].neighbors[0].value); // 输出: 节点2
注意事项
在实际使用中需要注意以下几点：
- 自定义的
__type标识要避免和正常数据的属性名冲突，可以选择更复杂的命名比如__serialized_type__ - WeakSet只能存储对象，无法存储基本类型，所以循环引用检测只针对对象类型
- 如果数据结构非常复杂，序列化后的字符串可能会很大，需要考虑性能问题
- 对于函数、Symbol这类无法序列化的值，需要在replacer中明确处理规则，比如直接忽略或者转为特定字符串