TypeError: 循环对象值

当在 JSON 中找到对象引用时,就会发生 JavaScript 异常 "循环对象值"。 JSON.stringify() 不会尝试解决它们,并相应地失败。

信息

TypeError: Converting circular structure to JSON (V8-based)
TypeError: cyclic object value (Firefox)
TypeError: JSON.stringify cannot serialize cyclic structures. (Safari)

错误类型

发生了什么错误?

本身 JSON 格式 不支持对象引用(尽管 IETF 草案存在),因此 JSON.stringify() 不会尝试解决它们,并相应地失败。

示例

循环引用

在如下循环结构中

js
const circularReference = { otherData: 123 };
circularReference.myself = circularReference;

JSON.stringify() 将失败

js
JSON.stringify(circularReference);
// TypeError: cyclic object value

为了序列化循环引用,您可以使用支持它们的库(例如 cycle.js)或自己实现解决方案,这将需要通过可序列化值查找和替换(或删除)循环引用。

以下代码片段说明了如何使用 JSON.stringify()replacer 参数查找和过滤(从而导致数据丢失)循环引用

js
function getCircularReplacer() {
  const ancestors = [];
  return function (key, value) {
    if (typeof value !== "object" || value === null) {
      return value;
    }
    // `this` is the object that value is contained in,
    // i.e., its direct parent.
    while (ancestors.length > 0 && ancestors.at(-1) !== this) {
      ancestors.pop();
    }
    if (ancestors.includes(value)) {
      return "[Circular]";
    }
    ancestors.push(value);
    return value;
  };
}

JSON.stringify(circularReference, getCircularReplacer());
// {"otherData":123,"myself":"[Circular]"}

const o = {};
const notCircularReference = [o, o];
JSON.stringify(notCircularReference, getCircularReplacer());
// [{},{}]

另请参阅