本教程旨在解决javascript中包含`map`、`set`以及循环引用等复杂数据结构的对象的json序列化问题。我们将探讨`json.stringify()`直接处理这些结构时遇到的挑战，特别是循环引用导致的堆栈溢出错误。核心解决方案是利用javascript对象的`tojson()`方法，通过自定义序列化逻辑，将非标准或循环引用的数据结构转换为可被`json.stringify()`正确处理的普通javascript对象或基本类型，从而实现复杂对象的完整且友好的json输出。
理解JSON序列化的挑战
在JavaScript中，将复杂对象转换为JSON字符串是常见的操作，通常使用JSON.stringify()方法。然而，当对象中包含Map、Set等ES6引入的数据结构，或者存在循环引用时，JSON.stringify()的默认行为会遇到障碍。
1. Map和Set的默认序列化问题
JSON.stringify()在处理Map和Set实例时，并不会将其内部元素直接序列化为JSON数组或对象。例如，Map会被序列化为空对象{}，而Set则会被序列化为空对象{}或一个带有[Set]标识的非详细表示（取决于环境的console.log行为，而非实际JSON序列化）。这意味着，如果直接尝试序列化包含Map或Set的对象，这些数据结构内部的实际数据将丢失。
2. 循环引用导致的堆栈溢出
更严重的问题是循环引用。在图结构（如示例中的Graph类）中，节点之间通常存在相互引用，例如节点A指向节点C，同时节点C也指向节点A。当JSON.stringify()尝试序列化一个包含循环引用的对象时，它会陷入无限递归，因为它试图遍历并序列化一个永无止境的引用链。这会导致RangeError: Maximum call stack size exceeded错误，即堆栈溢出。
考虑以下图结构的代码示例：
立即学习“Java免费学习笔记（深入）”；
class Node {
constructor(value) {
this.value = value;
this.adjacents = new Set(); // 存储相邻节点，可能包含循环引用
}
addAdjacent(node) {
this.adjacents.add(node);
}
}
class Graph {
constructor(directed = false) {
this.nodes = new Map(); // 存储所有节点
this.directed = directed;
}
addVertex(value) {
if (this.nodes.has(value)) {
return this.nodes.get(value);
}
const vertex = new Node(value);
this.nodes.set(value, vertex);
return vertex;
}
addEdge(src, dest) {
let srcNode = this.nodes.get(src);
if (!srcNode) srcNode = this.addVertex(src);
let destNode = this.nodes.get(dest);
if (!destNode) destNode = this.addVertex(dest);
srcNode.addAdjacent(destNode);
if (this.directed === false) {
destNode.addAdjacent(srcNode); // 无向图导致循环引用
}
}
}
const g1 = new Graph();
g1.addVertex("a");
g1.addVertex("b");
g1.addEdge("a", "c"); // a -> c, c -> a (因为是无向图)
// 尝试直接序列化会导致错误或信息不完整
// console.log(JSON.stringify(g1, null, 2));直接对g1调用JSON.stringify()，会因为Node对象中的adjacents Set包含Node对象本身，以及Graph中的nodes Map包含Node对象，且节点间存在循环引用（例如a与c互为邻接），从而引发堆栈溢出错误。
解决方案：利用 toJSON() 方法
JavaScript提供了一个强大的机制来解决自定义对象的JSON序列化问题：toJSON()方法。如果一个对象拥有toJSON()方法，JSON.stringify()在序列化该对象时，会优先调用这个方法，并使用其返回值进行序列化，而不是直接序列化原始对象。这为我们提供了自定义序列化逻辑的入口。
通过在类中实现toJSON()方法，我们可以：
- 将Map和Set等非标准数据结构转换为普通数组或对象。
- 将循环引用的对象替换为它们的标识符（如value属性），从而打破循环。
实现自定义序列化：修改 Node 和 Graph 类
为了正确序列化Graph对象，我们需要在Node和Graph类中分别实现toJSON()方法。
1. 改造 Node 类
Node类中的adjacents是一个Set，其中包含其他Node对象的引用。为了打破循环引用并正确序列化，我们需要将Set转换为一个包含相邻节点值的普通数组。
class Node {
constructor(value) {
this.value = value;
this.adjacents = new Set();
}
addAdjacent(node) {
this.adjacents.add(node);
}
// 实现 toJSON 方法
toJSON() {
return {
value: this.value,
// 将 adjacents Set 转换为一个包含相邻节点值的数组
// 这打破了循环引用，因为我们只存储值而不是完整的Node对象
adjacents: [...this.adjacents].map(({ value }) => value),
};
}
}在Node的toJSON()方法中：
- 我们返回一个新的对象，包含value属性。
- adjacents属性被设置为一个新数组。[...this.adjacents]将Set转换为一个包含Node对象的数组。
- .map(({ value }) => value)进一步遍历这个数组，只提取每个相邻Node的value属性。这样做既解决了Set的序列化问题，又通过只保留节点标识符（而非完整节点对象）打破了潜在的循环引用。
2. 改造 Graph 类
Graph类中的nodes是一个Map，其键是节点值，值是Node对象。我们需要将这个Map转换为一个普通的JavaScript对象，其中键是节点值，值是经过Node.toJSON()处理后的节点表示。
class Graph {
constructor(directed = false) {
this.nodes = new Map();
this.directed = directed;
}
addVertex(value) {
if (this.nodes.has(value)) {
return this.nodes.get(value);
}
const vertex = new Node(value);
this.nodes.set(value, vertex);
return vertex;
}
addEdge(src, dest) {
let srcNode = this.nodes.get(src);
if (!srcNode) srcNode = this.addVertex(src);
let destNode = this.nodes.get(dest);
if (!destNode) destNode = this.addVertex(dest);
srcNode.addAdjacent(destNode);
if (this.directed === false) {
destNode.addAdjacent(srcNode);
}
}
// 实现 toJSON 方法
toJSON() {
return {
directed: this.directed,
// 将 nodes Map 转换为一个普通对象
// Object.fromEntries() 将 Map 的 [key, value] 对转换为 { key: value }
// 由于 Map 的值是 Node 对象，它们会递归调用自身的 toJSON 方法
nodes: Object.fromEntries(this.nodes),
};
}
}在Graph的toJSON()方法中：
- 我们返回一个新对象，包含directed属性。
- nodes属性被设置为一个新对象，通过Object.fromEntries(this.nodes)将Map转换为一个普通对象。
- 关键在于，Object.fromEntries()在处理Map的值（即Node对象）时，JSON.stringify()会递归地查找这些Node对象上的toJSON()方法并调用它，从而确保每个节点都被正确序列化为我们期望的格式。
完整示例与输出
现在，结合修改后的Node和Graph类，我们可以安全地序列化Graph对象并获得清晰的JSON输出。
class Node {
constructor(value) {
this.value = value;
this.adjacents = new Set();
}
addAdjacent(node) {
this.adjacents.add(node);
}
toJSON() {
return {
value: this.value,
adjacents: [...this.adjacents].map(({ value }) => value),
};
}
}
class Graph {
constructor(directed = false) {
this.nodes = new Map();
this.directed = directed;
}
addVertex(value) {
if (this.nodes.has(value)) {
return this.nodes.get(value);
}
const vertex = new Node(value);
this.nodes.set(value, vertex);
return vertex;
}
addEdge(src, dest) {
let srcNode = this.nodes.get(src);
if (!srcNode) srcNode = this.addVertex(src);
let destNode = this.nodes.get(dest);
if (!destNode) destNode = this.addVertex(dest);
srcNode.addAdjacent(destNode);
if (this.directed === false) {
destNode.addAdjacent(srcNode);
}
}
toJSON() {
return {
directed: this.directed,
nodes: Object.fromEntries(this.nodes),
};
}
}
const g1 = new Graph();
g1.addVertex("a");
g1.addVertex("b");
g1.addEdge("a", "c"); // a -> c, c -> a (因为是无向图)
console.log(JSON.stringify(g1, null, 2));输出结果：
{
"directed": false,
"nodes": {
"a": {
"value": "a",
"adjacents": [
"c"
]
},
"b": {
"value": "b",
"adjacents": []
},
"c": {
"value": "c",
"adjacents": [
"a"
]
}
}
}现在，Graph对象被成功序列化为一个可读性强、结构清晰的JSON字符串。每个节点的adjacents列表都显示了其相邻节点的值，Map结构也被正确转换为对象，并且没有出现堆栈溢出错误。
注意事项与总结
- toJSON()的优先级：JSON.stringify()在序列化对象时会优先查找并调用对象的toJSON()方法。这是自定义序列化行为的关键。
- 打破循环引用：在设计toJSON()方法时，对于可能导致循环引用的属性（如图中的adjacents），务必将其转换为基本类型值或标识符，而不是包含完整对象的引用。
- 数据结构转换：Map和Set需要显式地转换为可序列化的数据结构，如普通对象或数组。Object.fromEntries()和展开运算符...是常用的工具。
- 递归调用：JSON.stringify()在处理一个包含自定义toJSON()方法的对象时，如果该对象内部又包含其他自定义toJSON()方法的对象，它会递归地调用这些内部对象的toJSON()方法，从而实现层层序列化。
- 可逆性：请注意，通过toJSON()方法进行的序列化不一定是可逆的。为了反序列化（即从JSON字符串重建原始JavaScript对象），通常需要实现一个对应的反序列化函数，该函数将根据JSON结构手动重建Map、Set以及建立正确的循环引用。
通过有效地利用toJSON()方法，开发者可以完全控制复杂JavaScript对象的JSON序列化过程，确保输出的JSON既完整又符合预期，同时避免常见的序列化陷阱。
