JS JSON序列化_循环引用处理方案-js教程-PHP中文网

JS JSON序列化_循环引用处理方案

夢幻星辰

发布： 2025-11-20 21:48:05

原创

193人浏览过

答案：处理JavaScript循环引用序列化需根据是否需还原选择方案。1. 用replacer函数配合WeakSet过滤重复引用；2. 使用flatted库实现完整序列化与反序列化；3. 自定义toJSON方法控制输出结构；4. 利用cycle.js的decycle和retrocycle转换并恢复循环结构。

js json序列化_循环引用处理方案

在使用 JavaScript 的 JSON.stringify() 方法时，如果对象中存在循环引用（Circular Reference），会抛出错误：“Converting circular structure to JSON”。这是因为 JSON 格式本身不支持引用结构，无法序列化指向自身的对象。下面介绍几种实用的处理方案。

1. 使用 replacer 函数过滤循环引用

通过 JSON.stringify() 的第二个参数 replacer，可以在序列化过程中排除已访问的对象。

手动实现一个简单的去环逻辑：

function stringifySafe(obj) {
  const seen = new WeakSet();
  return JSON.stringify(obj, (key, value) => {
    if (typeof value === "object" && value !== null) {
      if (seen.has(value)) {
        return; // 过滤掉循环引用
      }
      seen.add(value);
    }
    return value;
  });
}

登录后复制

这个方法利用 WeakSet 记录已访问的对象，一旦发现重复引用就跳过，避免无限递归。

2. 使用第三方库：flatted

如果需要保留循环结构并在反序列化时还原，可以使用 flatted 库，它能安全处理循环引用。

安装：

npm install flatted

登录后复制

使用示例：

import { stringify, parse } from 'flatted';

const obj = { name: "Alice" };
obj.self = obj; // 循环引用

const str = stringify(obj); // 成功序列化
const restored = parse(str); // 还原对象

登录后复制

flatted 使用扁平化结构表示嵌套和循环，适合需要完整还原场景。

千图设计室AI海报

千图网旗下的智能海报在线设计平台

172

查看详情

3. 自定义 toJSON 方法

为可能产生循环引用的对象定义 toJSON() 方法，控制序列化输出。

例如：

const user = {
  name: "Bob",
  friends: []
};

user.friends.push(user);

user.toJSON = function() {
  return { name: this.name, hasFriends: this.friends.length };
};

登录后复制

调用 JSON.stringify(user) 时，会自动使用 toJSON 返回的简洁结构，避开循环问题。

4. 使用 cycle.js（Mozilla 提供）

Nicholas C. Zakas 开发的 cycle.js 提供了 decycle 和 retrocycle 方法，可将循环对象转为可序列化形式，并支持还原。

使用方式：

import { decycle, retrocycle } from 'json-cycle';

const obj = { };
obj.self = obj;

const safe = decycle(obj);
const str = JSON.stringify(safe);

// 反序列化并恢复引用
const parsed = JSON.parse(str);
const original = retrocycle(parsed);

登录后复制

基本上就这些常用方案。根据是否需要还原引用关系来选择：简单过滤用 replacer，需还原用 flatted 或 cycle.js，定制输出则用 toJSON。关键是理解循环引用的本质，并在序列化前做好结构清理。

以上就是JS JSON序列化_循环引用处理方案的详细内容，更多请关注php中文网其它相关文章！