JavaScript中图结构JSON序列化：处理Map、Set与循环引用-js教程-PHP中文网

javascript中图结构json序列化：处理map、set与循环引用

本文探讨了JavaScript中包含嵌套Set的Map对象（如图结构）在进行JSON序列化时遇到的挑战，包括Map和Set无法直接序列化以及循环引用导致的栈溢出错误。核心解决方案是通过在自定义类中实现toJSON()方法，将非标准数据结构转换为可序列化的形式，并巧妙地打破循环引用，从而实现图结构的正确、友好输出。

理解JavaScript对象JSON序列化的限制

在JavaScript中，JSON.stringify()是一个将JavaScript值转换为JSON字符串的常用方法。然而，它并非万能，尤其在处理复杂的数据结构时会遇到限制。具体来说，当尝试序列化一个包含Map、Set或存在循环引用的对象时，JSON.stringify()会表现出非预期行为或抛出错误。

考虑一个典型的图结构实现，其中Graph类使用Map来存储节点，而每个Node类又使用Set来存储其相邻节点。

class Node {
  constructor(value) {
    this.value = value;
    this.adjacents = new Set(); // 存储相邻节点对象的Set
  }

  addAdjacent(node) {
    this.adjacents.add(node);
  }
}

class Graph {
  constructor(directed = false) {
    this.nodes = new Map(); // 存储节点对象的Map
    this.directed = directed;
  }

  addVertex(value) {
    const node = this.nodes.has(value);
    if (node) {
      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(g1);
/* 
输出示例：
Graph {
  nodes: Map(3) {
    'a' => Node { value: 'a', adjacents: [Set] },
    'b' => Node { value: 'b', adjacents: Set(0) {} },
    'c' => Node { value: 'c', adjacents: [Set] }
  },
  directed: false
}
*/

登录后复制

直接打印g1对象时，可以看到Map和Set类型的信息，但其内部数据（特别是Set中的具体元素）并未完全展开。当尝试使用JSON.stringify(g1)进行序列化时，会遇到两个主要问题：

立即学习“Java免费学习笔记（深入）”；

Map和Set无法直接序列化： JSON.stringify()默认只处理基本类型、普通对象和数组。Map和Set实例会被忽略或序列化为空对象（取决于具体环境和replacer函数的使用）。
循环引用： 在无向图中，如果节点A连接到节点B，那么节点B也连接到节点A。这意味着Node对象之间存在循环引用（例如，a.adjacents包含c，而c.adjacents包含a）。JSON.stringify()在遇到循环引用时，会尝试无限递归，最终导致RangeError: Maximum call stack size exceeded错误。

尝试通过replacer函数解决Set问题，但未能解决循环引用：

// 尝试将Map转换为普通对象，并处理Set
// console.log(
//   JSON.stringify(
//     Object.fromEntries(g1.nodes), // 将Map转换为普通对象
//     (_key, value) =>
//       value.adjacents instanceof Set ? [...value.adjacents] : value, // 将Set转换为数组
//     2
//   )
// );
// 这会导致 RangeError: Maximum call stack size exceeded

登录后复制

上述尝试失败的原因在于，即使将Map转换为对象，Set转换为数组，adjacents数组中仍然存储的是Node对象的引用，这些引用又包含对其他Node的引用，形成了循环，导致无限递归。

使用toJSON()方法定制序列化行为

JavaScript对象提供了一个特殊的toJSON()方法，当对象被JSON.stringify()序列化时，如果对象定义了这个方法，JSON.stringify()会调用它来获取一个可序列化的表示，而不是直接序列化原始对象。这是解决上述问题的关键。

我们可以为Node和Graph类分别实现toJSON()方法，以实现以下目标：

将Map和Set转换为可序列化的普通对象或数组。
打破循环引用，通常通过将对象引用替换为其唯一标识符（如value属性）。

1. 为Node类实现toJSON()

在Node类中，adjacents是一个包含其他Node对象的Set。为了打破循环引用并使其可序列化，我们可以将其转换为一个包含相邻节点value（字符串）的数组。

Find JSON Path Online

Easily find JSON paths within JSON objects using our intuitive Json Path Finder

查看详情

class Node {
  constructor(value) {
    this.value = value;
    this.adjacents = new Set();
  }

  addAdjacent(node) {
    this.adjacents.add(node);
  }

  // 当Node对象被JSON.stringify序列化时调用
  toJSON() {
    return {
      value: this.value,
      // 将adjacents Set转换为一个包含相邻节点value的数组
      // 这打破了循环引用，因为不再直接引用Node对象
      adjacents: [...this.adjacents].map(({ value }) => value),
    };
  }
}

登录后复制

现在，当JSON.stringify()遇到一个Node对象时，它会调用toJSON()，返回一个包含value和adjacents（一个字符串数组）的普通对象。这样就避免了对完整Node对象的循环引用。

2. 为Graph类实现toJSON()

在Graph类中，nodes是一个Map，其中键是节点的值，值是Node对象。为了使其可序列化，我们可以将这个Map转换为一个普通JavaScript对象，其中键是节点的值，值是经过toJSON()处理后的Node对象。

class Graph {
  constructor(directed = false) {
    this.nodes = new Map();
    this.directed = directed;
  }

  addVertex(value) {
    const node = this.nodes.has(value);
    if (node) {
      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);
    }
  }

  // 当Graph对象被JSON.stringify序列化时调用
  toJSON() {
    return {
      directed: this.directed,
      // 将nodes Map转换为一个普通对象
      // Object.fromEntries会将Map的键值对转换为对象的属性和值
      // 这里的value是Node对象，JSON.stringify会自动调用其toJSON方法
      nodes: Object.fromEntries(this.nodes),
    };
  }
}

登录后复制

通过Object.fromEntries(this.nodes)，Map被转换为一个普通对象。由于这个普通对象的属性值是Node实例，JSON.stringify()会递归地调用这些Node实例的toJSON()方法，从而得到一个完全可序列化的结构。

完整示例与输出

将上述修改后的Node和Graph类结合，并进行序列化：

// 重新定义Node类
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),
    };
  }
}

// 重新定义Graph类
class Graph {
  constructor(directed = false) {
    this.nodes = new Map();
    this.directed = directed;
  }

  addVertex(value) {
    const node = this.nodes.has(value);
    if (node) {
      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");

console.log(JSON.stringify(g1, null, 2));

登录后复制

输出结果将是：

{
  "directed": false,
  "nodes": {
    "a": {
      "value": "a",
      "adjacents": [
        "c"
      ]
    },
    "b": {
      "value": "b",
      "adjacents": []
    },
    "c": {
      "value": "c",
      "adjacents": [
        "a"
      ]
    }
  }
}

登录后复制

这个JSON字符串清晰地展示了图的结构，包括每个节点的值及其相邻节点（以字符串形式表示），并且避免了任何序列化错误。

注意事项与总结

toJSON()的强大： toJSON()方法是JavaScript提供的一个强大机制，允许开发者完全控制自定义对象如何被JSON.stringify()序列化。
处理循环引用： 解决循环引用最常见的方法是，在toJSON()方法中将对象引用替换为它们的唯一标识符（如ID、名称或值）。这样，JSON中存储的是标识符而不是完整的对象，从而打破了循环。
转换非标准类型： Map和Set等非标准数据结构需要手动转换为普通对象或数组才能被JSON.stringify()正确处理。Object.fromEntries()和展开运算符[...set]是常用的转换工具。
数据丢失风险： 在打破循环引用时，需要权衡。将对象引用替换为标识符意味着在JSON中丢失了原始对象的完整信息（例如，你无法从"c"这个字符串直接获取c节点的完整属性）。如果需要反序列化回完整的图结构，可能需要额外的逻辑来根据这些标识符重新构建对象关系。

通过在自定义类中巧妙地实现toJSON()方法，我们可以有效地管理复杂数据结构（如图）的JSON序列化过程，解决Map、Set等非标准类型以及循环引用带来的挑战，生成结构清晰、易于理解和传输的JSON数据。

以上就是JavaScript中图结构JSON序列化：处理Map、Set与循环引用的详细内容，更多请关注php中文网其它相关文章！