TypeError: Converting circular structure to JSON - Javascript

在JavaScript开发中，经常会遇到将对象转换为JSON格式的情况。但是，当对象存在循环引用时，会抛出“Converting circular structure to JSON”错误。

什么是循环引用

循环引用是指一个对象引用了自己或者是被其它对象引用，形成了一个环状结构。

例如：

let a = {};
let b = {};
a.b = b;
b.a = a;

在此例子中，对象a引用了对象b，而对象b也引用了对象a。这就是一个典型的循环引用，因为对象a和b形成了一个环。

JSON 转换循环引用问题

当一个对象存在循环引用时，试图将其转换为JSON格式时，JSON.stringify() 方法将抛出一个 TypeError: Converting circular structure to JSON 异常，因为 JSON 格式不支持循环引用。

let a = {};
let b = { a };
a.b = b;

JSON.stringify(a); // TypeError: Converting circular structure to JSON

解决方法

手动解决循环引用

可以手动解决循环引用问题。将循环引用的部分省略或者改写成序列化后不包括循环引用的形式。

let a = { name: 'a' };
let b = { name: 'b' };
a.b = b;
b.c = { name: 'c' };
let c = { name: 'c' };
c.b = b;

let data = JSON.stringify({ a, b, c }, (key, val) => {
  if (val === b) return { name: 'b' };
  if (val === c) return { name: 'c' };
  return val;
});

console.log(data);
// output: {"a":{"b":{"name":"b"},"name":"a"},"b":{"c":{"name":"c"},"name":"b"},"c":{"b":{"name":"b"},"name":"c"}}

这里将对象b和c的部分都改写为不包含循环引用的形式。

使用第三方库

如果手动解决循环引用过于繁琐，可以使用第三方库来解决循环引用问题，如flatted。

const flatted = require('flatted');

let a = {};
let b = {};
a.b = b;
b.a = a;

let data = flatted.stringify({ a, b });

console.log(data);
// output: {"a":{"b":{"a":{}}},"b":{"a":{"b":{}}}}

flatted.stringify() 方法可以序列化对象，包括循环引用的部分。但是需要注意的是，flatted 不能保证对象结构不变。

结语

循环引用问题是一个在开发中容易遇到的问题。需要我们使用一些方法来解决这个问题，以免出现问题。