JavaScript图结构控制台输出异常：展开对象后数据不符

问题原因 #

这是浏览器控制台对引用类型的延迟解析机制导致的：

• 执行console.log时，控制台并不会立即完整读取并保存对象的所有内容，只是记录了对象的内存引用。
• 你看到的初始摘要（比如{tokyo: Array(1), dallas: Array(2), aspen: Array(1)}）是打印瞬间的状态快照，但当你点击展开对象时，控制台才会去读取该对象的当前实时状态——此时你已经执行了removeEdge修改了对象，所以两次展开后看到的都是修改后的结果。

解决方案 #

要获取打印瞬间的真实状态，需要生成对象的独立快照，避免后续修改影响显示，以下两种方法适用你的场景：

方法1：JSON序列化生成深拷贝 #

利用JSON.stringify和JSON.parse创建对象的深拷贝快照，完全隔离后续修改：

// 打印移除边前的快照
console.log(JSON.parse(JSON.stringify(graph.adjacencyList)));

graph.removeEdge("dallas", "tokyo");

// 打印移除边后的快照
console.log(JSON.parse(JSON.stringify(graph.adjacencyList)));

该方法适用于所有可JSON序列化的数据结构，你的图结构完全符合要求。

方法2：手动生成结构快照 #

针对你的邻接表结构，通过展开运算符对每个数组做拷贝，生成独立的对象快照：

// 打印移除边前的快照
console.log(Object.fromEntries(
  Object.entries(graph.adjacencyList).map(([vertex, edges]) => [vertex, [...edges]])
));

graph.removeEdge("dallas", "tokyo");

// 打印移除边后的快照
console.log(Object.fromEntries(
  Object.entries(graph.adjacencyList).map(([vertex, edges]) => [vertex, [...edges]])
));

这种方法更灵活，适合无法用JSON序列化的复杂数据场景。

内容的提问来源于stack exchange，提问作者Naresh M