JSON为什么会有循环引用

JSON为什么会有循环引用？—— 从数据结构到序列化的陷阱

JSON循环引用：当数据结构“绕回自己”的麻烦

在开发中，我们常常会遇到这样的报错：TypeError: Converting circular structure to JSON，这句话的潜台词是：你想转换的JSON数据里，存在“循环引用”，而JSON本身无法处理这种情况。JSON为什么会有循环引用？它到底是怎么产生的？又该如何解决？ 本文将从数据结构的本质出发,一步步拆解这个问题。

先搞懂：什么是“循环引用”？

要理解JSON的循环引用，得先从“引用”和“循环”两个概念说起，在编程中，“引用”可以理解为指向某个数据对象的“指针”或“地址”，比如一个对象包含另一个对象的引用，两个对象共享同一块内存，而“循环引用”则是指这种引用关系形成了一个闭环：对象A引用对象B，对象B又引用对象A（或通过中间对象最终引用回A），形成一个“死循环”。

举个简单的例子（以JavaScript为例）：

const objA = { name: "A" };
const objB = { name: "B" };
objA.friend = objB; // objA引用objB
objB.friend = objA; // objB引用objA——形成循环！

objA和objB通过friend属性互相引用，内存中的关系就像一个环：A → B → A,这就是典型的循环引用。

JSON的“先天限制”：为什么它天生不支持循环引用？

要回答这个问题，得先明确JSON到底是什么，JSON（JavaScript Object Notation）本质上是一种“轻量级的数据交换格式”，它的核心设计目标是“无歧义、可序列化、跨语言兼容”，为了实现这个目标，JSON的规范对数据结构做了严格的限制，其中就明确排除了“循环引用”。

JSON的设计哲学：树状结构，而非图状结构

JSON的数据结构本质上是“树状结构”（Tree Structure）：每个节点只能有子节点，不能有“父节点引用”或“兄弟节点引用”,更不能形成环。

{
  "name": "A",
  "friend": {
    "name": "B",
    "friend": {
      "name": "C"
    }
  }
}

这是一个典型的JSON树：A是根节点，B是A的子节点，C是B的子节点——方向是单向的,没有回路。

而循环引用形成的结构是“图状结构”（Graph Structure）：图中存在环，节点之间可以互相指向，JSON的规范不允许这种结构，因为它会破坏“树状”的层级关系，导致序列化时无法确定“终点”。

序列化的“死循环”风险

JSON的核心功能之一是序列化（Serialization），即把内存中的对象转换成字符串形式，以便存储或传输，如果允许循环引用,序列化过程会陷入无限循环。

回到前面的例子：

const objA = { name: "A" };
const objB = { name: "B" };
objA.friend = objB;
objB.friend = objA;

如果尝试用JSON.stringify()序列化objA,过程会是这样的：

遍历objA，发现friend属性指向objB；
遍历objB，发现friend属性指向objA；
又回到objA，继续遍历friend属性…… 这个过程会无限循环下去，永远无法结束，最终导致栈溢出（Stack Overflow）或程序卡死。

为了解决这个问题，JSON.stringify()在遇到循环引用时，会直接抛出错误：TypeError: Converting circular structure to JSON，这是JSON规范对“可序列化性”的强制要求——只有无环的树状结构才能被安全地转换成字符串。

循环引用是怎么产生的？—— 从内存到JSON的“陷阱”

既然JSON本身不支持循环引用，那为什么我们还会遇到这个问题？因为循环引用通常出现在编程语言的内存对象中，而当我们试图把这些内存对象序列化成JSON时，问题才暴露。

业务场景中的循环引用

在实际开发中，循环引用往往不是“刻意为之”，而是业务逻辑的自然结果,常见的场景包括：

（1）双向关联关系

一个“用户”和“订单”的双向关联：一个用户有多个订单，每个订单又属于一个用户,如果用对象表示：

const user = { id: 1, name: "张三", orders: [] };
const order1 = { id: 101, product: "手机", user: null };
const order2 = { id: 102, product: "电脑", user: null };
user.orders.push(order1, order2); // 用户关联订单
order1.user = user; // 订单关联用户——形成循环！
order2.user = user;

这里，user.orders引用了订单，而订单的user又引用了user,形成了循环。

（2）树形结构的“父子引用”

组织架构中，“部门”和“子部门”的关系：每个部门可能有子部门,子部门又需要知道自己的父部门。

const parentDept = { id: 1, name: "技术部", children: [] };
const childDept = { id: 2, name: "前端组", parent: null };
parentDept.children.push(childDept); // 父部门关联子部门
childDept.parent = parentDept; // 子部门关联父部门——形成循环！

（3）函数或闭包中的引用

在JavaScript中，函数闭包会捕获外部变量，如果闭包函数被存储在对象中，而对象又被闭包引用,也可能形成循环：

let externalObj = { data: "test" };
function createClosure() {
  externalObj.callback = function() { console.log(externalObj.data); };
  return externalObj;
}
const objWithClosure = createClosure(); // objWithClosure引用函数，函数引用externalObj（即objWithClosure本身）——循环！

从内存对象到JSON的“转换陷阱”

问题往往出现在这一步：我们有一个包含循环引用的内存对象，需要通过JSON.stringify()把它转换成字符串，以便发送给前端或存储到数据库，JSON的“无环限制”就会暴露问题。

前面的双向用户-订单对象：

const user = { id: 1, name: "张三", orders: [] };
const order1 = { id: 101, product: "手机", user: null };
user.orders.push(order1);
order1.user = user;
JSON.stringify(user); // 报错！Converting circular structure to JSON

如何解决JSON循环引用问题？

既然JSON本身不支持循环引用，解决思路就只有一个：在序列化之前，打破循环引用,以下是几种常见的解决方案：

手动移除循环引用（“断环”）

最直接的方法是手动删除导致循环的属性，比如在用户-订单的例子中，可以临时移除订单的user属性：

const user = { id: 1, name: "张三", orders: [] };
const order1 = { id: 101, product: "手机", user: null };
user.orders.push(order1);
order1.user = user;
// 序列化前移除循环引用
order1.user = null;
const jsonString = JSON.stringify(user); // 正常序列化
// 序列化后恢复（如果需要）
order1.user = user;

使用`replacer`函数过滤循环属性

JSON.stringify()支持第二个参数replacer，可以自定义序列化过程，我们可以通过replacer检测循环引用,并跳过相关属性。

用一个Set记录已遍历的对象：

function circularReplacer() {
  const seen = new Set();
  return (key, value) => {
    if (typeof value === "object" && value !== null) {
      if (seen.has(value)) {
        return "[Circular]"; // 遇到循环引用，返回标记
      }
      seen.add(value);
    }
    return value;
  };
}
const user = { id: 1, name: "张三", orders: [] };
const order1 = { id: 101, product: "手机", user: null };
user.orders.push(order1);
order1.user = user;
const jsonString = JSON.stringify(user, circularReplacer());
console.log(jsonString);
// 输出：{"id":1,"name":"张三","orders":[{"id":101,"product":"手机","user":"[Circular]"}]}

使用第三方库处理

对于复杂的循环引用，手动处理容易出错，可以使用成熟的第三方库，比如flatted、circular-json等，这些库专门处理循环引用的序列化/反序列化

正文

JSON为什么会有循环引用