JSON.stringify嵌套了Set的Map

huangapple
go评论99阅读模式
英文:

JSON.stringify Map with nested Set

问题

考虑以下图形：

  1. class Node {
  2.   constructor(value) {
  3.     this.value = value;
  4.     this.adjacents = new Set();
  5.   }
  7.   addAdjacent(node) {
  8.     this.adjacents.add(node);
  9.   }
  10. }
  12. class Graph {
  13.   constructor(directed = false) {
  14.     this.nodes = new Map();
  15.     this.directed = directed;
  16.   }
  18.   addVertex(value) {
  19.     const node = this.nodes.has(value);
  20.     if (node) {
  21.       return this.nodes.get(value);
  22.     }
  24.     const vertex = new Node(value);
  25.     this.nodes set(value, vertex);
  26.     return vertex;
  27.   }
  29.   addEdge(src, dest) {
  30.     let srcNode = this.nodes.get(src);
  31.     if (!srcNode) {
  32.       srcNode = this.addVertex(src);
  33.     }
  35.     let destNode = this.nodes.get(dest);
  36.     if (!destNode) {
  37.       destNode = this.addVertex(dest);
  38.     }
  40.     srcNode.addAdjacent(destNode);
  41.     if (this.directed === false) {
  42.       destNode.addAdjacent(srcNode);
  43.     }
  44.   }
  45. }
  47. const g1 = new Graph();
  48. g1.addVertex("a");
  49. g1.addVertex("b");
  50. g1.addEdge("a", "c");

当我使用 console.log 输出图形对象 g1 时，我得到以下输出：

  1. Graph {
  2.   nodes: Map(3) {
  3.     'a' => Node { value: 'a', adjacents: [Set] },
  4.     'b' => Node { value: 'b', adjacents: Set(0) {} },
  5.     'c' => Node { value: 'c', adjacents: [Set] }
  6.   },
  7.   directed: false
  8. }

正如输出所示，我没有获取有关顶点的边的信息。

我尝试将 replacer 传递给 JSON.stringify 如下，但会导致栈溢出错误。

  1. console.log(
  2.   JSON.stringify(
  3.     Object.fromEntries(g1.nodes),
  4.     (_key, value) =>
  5.       value.adjacents instanceof Set ? [...value.adjacents] : value,
  6.     2
  7.   )
  8. );

错误：

  1.   JSON.stringify(
  2.        ^
  4. RangeError: Maximum call stack size exceeded
  5.     at JSON.stringify (<anonymous>)

如何以更友好的格式打印图形？

英文:

Consider the following graph:

  1. class Node {
  2.   constructor(value) {
  3.     this.value = value;
  4.     this.adjacents = new Set();
  5.   }
  7.   addAdjacent(node) {
  8.     this.adjacents.add(node);
  9.   }
  10. }
  12. class Graph {
  13.   constructor(directed = false) {
  14.     this.nodes = new Map();
  15.     this.directed = directed;
  16.   }
  18.   addVertex(value) {
  19.     const node = this.nodes.has(value);
  20.     if (node) {
  21.       return this.nodes.get(value);
  22.     }
  24.     const vertex = new Node(value);
  25.     this.nodes.set(value, vertex);
  26.     return vertex;
  27.   }
  29.   addEdge(src, dest) {
  30.     let srcNode = this.nodes.get(src);
  31.     if (!srcNode) {
  32.       srcNode = this.addVertex(src);
  33.     }
  35.     let destNode = this.nodes.get(dest);
  36.     if (!destNode) {
  37.       destNode = this.addVertex(dest);
  38.     }
  40.     srcNode.addAdjacent(destNode);
  41.     if (this.directed === false) {
  42.       destNode.addAdjacent(srcNode);
  43.     }
  44.   }
  45. }
  47. const g1 = new Graph();
  48. g1.addVertex("a");
  49. g1.addVertex("b");
  50. g1.addEdge("a", "c");

When I console.log the graph object g1. I get the following output:

  1. Graph {
  2.   nodes: Map(3) {
  3.     'a' => Node { value: 'a', adjacents: [Set] },
  4.     'b' => Node { value: 'b', adjacents: Set(0) {} },
  5.     'c' => Node { value: 'c', adjacents: [Set] }
  6.   },
  7.   directed: false
  8. }

As output shows, I get no info regarding the edges of the vertices.

I tried passing replacer to JSON.stringify as follows, but it results in StackOverFlow error.

  1. console.log(
  2.   JSON.stringify(
  3.     Object.fromEntries(g1.nodes),
  4.     (_key, value) =>
  5.       value.adjacents instanceof Set ? [...value.adjacents] : value,
  6.     2
  7.   )
  8. );

Error:

  1.   JSON.stringify(
  2.        ^
  4. RangeError: Maximum call stack size exceeded
  5.     at JSON.stringify (<anonymous>)

How can I print the graph in a more friendly format?

答案1

得分: 3

  1. 两个问题：

    1. Map 和 Set 都无法直接序列化为 JSON。
    2. 您的数据结构是循环的，因此无法进行序列化；节点 a 与节点 c 相邻，节点 c 与节点 a 相邻。尝试将其序列化为扁平结构将需要无限的存储空间。

我建议在您的类中添加一个 toJSON() 方法来辅助序列化。在这里，无法序列化的数据结构可以转换为简单的数据结构，循环引用可以被解除。

例如：

  1. class Node {
  2.   constructor(value) {
  3.     this.value = value;
  4.     this.adjacents = new Set();
  5.   }
  7.   addAdjacent(node) {
  8.     this.adjacents.add(node);
  9.   }
  11.   toJSON() {
  12.     return {
  13.       ...this,
  14.       // plain array with scalar values
  15.       adjacents: [...this.adjacents].map(({ value }) => value),
  16.     };
  17.   }
  18. }
  20. class Graph {
  21.   constructor(directed = false) {
  22.     this.nodes = new Map();
  23.     this.directed = directed;
  24.   }
  26.   addVertex(value) {
  27.     const node = this.nodes.has(value);
  28.     if (node) {
  29.       return this.nodes.get(value);
  30.     }
  32.     const vertex = new Node(value);
  33.     this.nodes.set(value, vertex);
  34.     return vertex;
  35.   }
  37.   addEdge(src, dest) {
  38.     let srcNode = this.nodes.get(src);
  39.     if (!srcNode) {
  40.       srcNode = this.addVertex(src);
  41.     }
  43.     let destNode = this.nodes.get(dest);
  44.     if (!destNode) {
  45.       destNode = this.addVertex(dest);
  46.     }
  48.     srcNode.addAdjacent(destNode);
  49.     if (this.directed === false) {
  50.       destNode.addAdjacent(srcNode);
  51.     }
  52.   }
  54.   toJSON() {
  55.     return {
  56.       ...this,
  57.       // reduce the Map entries to a simple object
  58.       nodes: Object.fromEntries(this.nodes),
  59.     };
  60.   }
  61. }
  63. const g1 = new Graph();
  64. g1.addVertex("a");
  65. g1.addVertex("b");
  66. g1.addEdge("a", "c");
  68. console.log(JSON.stringify(g1, null, 2));
  2. 这是您提供的代码部分的翻译。
  3. <details>
  4. <summary>英文:</summary>
  5. There&#39;s two issues here...
  6. 1. Both `Map` and `Set` do not serialise directly to JSON
  7. 2. Your data structure is cyclic and therefore cannot be serialised; node _a_ is adjacent to node _c_ and node _c_ is adjacent to node _a_. Attempting to serialise this to a flat structure would require infinite storage.
  8. I would recommend adding a [toJSON()][1] method to your classes to aid in the serialisation. There, unserialisable data structures can be converted to simple ones and cyclic references can be broken.
  9. For example
  10. &lt;!-- begin snippet: js hide: false console: true babel: false --&gt;
  11. &lt;!-- language: lang-js --&gt;
  12. class Node {
  13. constructor(value) {
  14. this.value = value;
  15. this.adjacents = new Set();
  16. }
  17. addAdjacent(node) {
  18. this.adjacents.add(node);
  19. }
  20. toJSON() {
  21. return {
  22. ...this,
  23. // plain array with scalar values
  24. adjacents: [...this.adjacents].map(({ value }) =&gt; value),
  25. };
  26. }
  27. }
  28. class Graph {
  29. constructor(directed = false) {
  30. this.nodes = new Map();
  31. this.directed = directed;
  32. }
  33. addVertex(value) {
  34. const node = this.nodes.has(value);
  35. if (node) {
  36. return this.nodes.get(value);
  37. }
  38. const vertex = new Node(value);
  39. this.nodes.set(value, vertex);
  40. return vertex;
  41. }
  42. addEdge(src, dest) {
  43. let srcNode = this.nodes.get(src);
  44. if (!srcNode) {
  45. srcNode = this.addVertex(src);
  46. }
  47. let destNode = this.nodes.get(dest);
  48. if (!destNode) {
  49. destNode = this.addVertex(dest);
  50. }
  51. srcNode.addAdjacent(destNode);
  52. if (this.directed === false) {
  53. destNode.addAdjacent(srcNode);
  54. }
  55. }
  56. toJSON() {
  57. return {
  58. ...this,
  59. // reduce the Map entries to a simple object
  60. nodes: Object.fromEntries(this.nodes),
  61. };
  62. }
  63. }
  64. const g1 = new Graph();
  65. g1.addVertex(&quot;a&quot;);
  66. g1.addVertex(&quot;b&quot;);
  67. g1.addEdge(&quot;a&quot;, &quot;c&quot;);
  68. console.log(JSON.stringify(g1, null, 2));
  69. &lt;!-- language: lang-css --&gt;
  70. .as-console-wrapper { max-height: 100% !important; }
  71. &lt;!-- end snippet --&gt;
  72. [1]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify#description
  73. </details>

huangapple
  • 本文由 发表于 2023年6月8日 08:36:10
  • 转载请务必保留本文链接：https://go.coder-hub.com/76427919.html
  • javascript
  • json
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定