解决 ES6/ES7 环境下使用 JSON.stringify() 时出现的 “TypeError: cyclic object value” 问题

在前端开发中，我们经常会使用 JSON.stringify() 方法将 JavaScript 对象转换为字符串，以便于在网络传输或本地存储中使用。然而，在 ES6/ES7 环境下，当我们使用 JSON.stringify() 方法处理具有循环引用的对象时，很容易遇到 “TypeError: cyclic object value” 的错误。本文将详细介绍这个问题的原因和解决方法，并给出示例代码。

问题原因

在 ES6/ES7 环境下，JavaScript 引擎默认启用了“弱引用垃圾回收机制”，也就是说，当一个对象没有被任何变量或函数引用时，它就会被自动回收。这个机制可以有效地减少内存占用，但是也带来了一个问题：当一个对象被多个其他对象引用时，我们无法判断它是否可以被回收，因为它可能仍然被其他对象引用。这就是“循环引用”的概念。

当我们使用 JSON.stringify() 方法处理具有循环引用的对象时，它会尝试将整个对象序列化为 JSON 字符串。但由于循环引用的存在，这个过程可能永远无法结束，从而导致 “TypeError: cyclic object value” 的错误。

解决方法

有两种解决方法可以解决这个问题：

方法一：手动处理循环引用

我们可以手动处理循环引用，将循环引用的部分替换为一个占位符，然后再使用 JSON.stringify() 方法将对象序列化为 JSON 字符串。在反序列化时，我们可以将占位符替换为原始的对象。示例代码如下：

// javascriptcn.com 代码示例
function stringify(obj) {
  const cache = new Set();
  return JSON.stringify(obj, (key, value) => {
    if (typeof value === 'object' && value !== null) {
      if (cache.has(value)) {
        return '[Circular]';
      }
      cache.add(value);
    }
    return value;
  });
}

function parse(str) {
  const cache = new Map();
  return JSON.parse(str, (key, value) => {
    if (typeof value === 'string' && /^"\[Circular\]"$/.test(value)) {
      return cache.get(key);
    }
    if (typeof value === 'object' && value !== null) {
      if (cache.has(value)) {
        throw new Error('Circular reference detected');
      }
      cache.set(key, value);
    }
    return value;
  });
}

const obj = { a: 1 };
obj.b = obj;
const str = stringify(obj);
console.log(str); // {"a":1,"b":"[Circular]"}
const obj2 = parse(str);
console.log(obj2); // { a: 1, b: { a: 1, b: [Circular] } }

方法二：使用第三方库

如果我们不想手动处理循环引用，也可以使用第三方库来解决这个问题。目前比较流行的库有 flatted 和 circular-json。这些库提供了类似 JSON.stringify() 和 JSON.parse() 的 API，但支持处理循环引用。示例代码如下：

import flatted from 'flatted';

const obj = { a: 1 };
obj.b = obj;
const str = flatted.stringify(obj);
console.log(str); // {"a":1,"b":{"$ref":"$[0]"}} 
const obj2 = flatted.parse(str);
console.log(obj2); // { a: 1, b: { a: 1, b: [Circular] } }

总结

在 ES6/ES7 环境下，处理具有循环引用的对象时，使用 JSON.stringify() 方法可能会出现 “TypeError: cyclic object value” 的错误。我们可以手动处理循环引用，或者使用第三方库来解决这个问题。无论使用哪种方法，我们都应该注意避免出现循环引用的情况，以减少这个问题的发生。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6576bb88d2f5e1655d02134b