TypeError: JSON.stringify cannot serialize cyclic structures

在这里插入图片描述

🤍 前端开发工程师、技术日更博主、已过CET6
🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1
🕠 牛客高级专题作者、打造专栏《前端面试必备》、《2024面试高频手撕题》、《前端求职突破计划》
🍚 蓝桥云课签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》

文章目录

- 问题描述
- 原因分析
- 解决方案
- - 1. 使用 `JSON.stringify` 的第二个参数（replacer）
  - 2. 使用第三方库
  - 3. 避免循环引用
- 实战案例
- 总结

问题描述

在JavaScript开发过程中，开发者经常会遇到 TypeError: JSON.stringify cannot serialize cyclic structures 的错误提示。该错误通常表示在尝试将包含循环引用的对象序列化为JSON字符串时，序列化过程无法完成而抛出错误。

原因分析

循环引用：对象之间相互引用，形成无限循环。例如：
```
const obj = {};
obj.self = obj;
JSON.stringify(obj); // TypeError: Converting circular structure to JSON
```
在这个例子中，obj 的 self 属性指向了 obj 本身，导致序列化时陷入无限循环。
JSON.stringify的限制：JSON.stringify 无法处理循环引用，因为无法确定循环的终止点，从而引发错误。

解决方案

1. 使用 `JSON.stringify` 的第二个参数（replacer）

可以通过自定义replacer函数来处理循环引用。replacer函数可以检查对象中的属性是否是循环引用，并返回适当的值以避免错误。例如：

function stringifyWithCircularRef(obj) {
    const seen = new WeakSet();
    return JSON.stringify(obj, (key, value) => {
        if (typeof value === 'object' && value !== null) {
            if (seen.has(value)) {
                return '[Circular]'; // 或者返回其他合适的值
            }
            seen.add(value);
        }
        return value;
    });
}

const obj = { name: 'John' };
obj.self = obj;
console.log(stringifyWithCircularRef(obj)); // 输出: '{"name":"John","self":"[Circular]"}'

2. 使用第三方库

可以使用第三方库来处理循环引用，例如 circular-json 或 flatted。这些库提供了更强大的序列化功能，能够处理循环引用和其他复杂的数据结构。

3. 避免循环引用

在设计和实现数据结构时，尽量避免循环引用。可以通过设计良好的数据模型和使用适当的数据结构（如Map）来避免循环引用。

实战案例

假设有一个对象包含循环引用，需要将其序列化为JSON字符串：

const obj = { name: 'John' };
obj.self = obj;

try {
    const jsonString = JSON.stringify(obj);
    console.log(jsonString);
} catch (error) {
    console.error('JSON.stringify error:', error.message);
}

解决方案是使用自定义replacer函数：

function stringifyWithCircularRef(obj) {
    const seen = new WeakSet();
    return JSON.stringify(obj, (key, value) => {
        if (typeof value === 'object' && value !== null) {
            if (seen.has(value)) {
                return '[Circular]';
            }
            seen.add(value);
        }
        return value;
    });
}

const obj = { name: 'John' };
obj.self = obj;
console.log(stringifyWithCircularRef(obj)); // 输出: '{"name":"John","self":"[Circular]"}'