JavaScript 如何以JSON格式打印循环结构

循环结构指的是当你尝试引用一个直接或间接引用自身的对象。

示例：

A -> B -> A   OR   A -> A

在开发应用程序时，循环结构是非常常见的。例如，假设您正在开发一个社交媒体应用程序，每个用户可能有一个或多个图片。每个图片可能引用它的所有者。就像这样：

{
    User1: {
        Image1:{
            URL: 'Image Url',
            Owner: **User1** (object)
        },
        Image2:{
            URL: 'Image Url',
            Owner: **User1** (object)
        }
    }
}

在这里，您可以通过将用户id传递给 Owner 而不是用户对象来轻松解决此问题。

将这些对象传递给JSON.stringify()将导致 ‘将圆形结构转换为JSON错误’ 。

让我们以一个示例来尝试解决这个问题。

示例：

var object = {}; 
object.array = {'first':1}; 
object.array2 = object; 
  
console.log(object);

输出应该类似于这样：

JavaScript 如何以JSON格式打印循环结构

我们创建一个名为circularReplacer的函数。

const circularReplacer = () => {

    // Creating new WeakSet to keep 
    // track of previously seen objects
    const seen = new WeakSet();

    return (key, value) => {
        // If type of value is an 
        // object or value is null
        if (typeof(value) === "object" 
            && value !== null) {

        // If it has been seen before
        if (seen.has(value)) {
                 return;
             }

             // Add current value to the set
             seen.add(value);
       }

       // return the value
       return value;
   };
};

解释：

上面的函数首先会创建一个WeakSet来记录先前见过的对象。WeakSet在JavaScript中用于存储一组对象。它采用了set的属性，即不存储重复的对象。在这里了解更多关于WeakSet的内容。
检查value的类型是否为对象且值不为null。然后检查之前是否见过该对象。如果是，则直接返回。如果不是，则将其添加到集合中。
不仅仅是当对象已被见过时返回空值，我们还可以返回更有用的信息，例如返回”Object”，这将告诉我们该值创建了一个循环结构。
如果value的类型不是对象或值为null，则简单地返回该值。

示例1：

var object = {}; 
object.array = {'first':1}; 
object.array2 = object; 
  
const circularReplacer = () => { 
  
    // Creating new WeakSet to keep  
    // track of previously seen objects 
    const seen = new WeakSet(); 
      
    return (key, value) => { 
  
        // If type of value is an  
        // object or value is null 
        if (typeof(value) === "object" 
                   && value !== null) { 
          
        // If it has been seen before 
        if (seen.has(value)) { 
                 return; 
             } 
               
             // Add current value to the set 
             seen.add(value); 
       } 
         
       // return the value 
       return value; 
   }; 
}; 
  
var jsonString = JSON.stringify( 
         object, circularReplacer()); 
console.log(jsonString);

输出：

JavaScript 如何以JSON格式打印循环结构

注意： 如果我们在遇到循环结构时仅返回，则该键不会添加到输出字符串中。

示例2： 让我们返回一个字符串而不是什么都不返回。

var object = {}; 
object.array = {'first':1}; 
object.array2 = object; 
object.array3 = object.array2; 
  
const circularReplacer = () => { 
  
    // Creating new WeakSet to keep  
    // track of previously seen objects 
    const seen = new WeakSet(); 
      
    return (key, value) => { 
  
        // If type of value is an  
        // object or value is null 
        if (typeof(value) === "object" 
                  && value !== null) { 
          
        // If it has been seen before 
        if (seen.has(value)) { 
                 return 'Object'; 
             } 
               
             // Add current value to the set 
             seen.add(value); 
       } 
         
       // return the value 
       return value; 
   }; 
}; 
  
var jsonString = JSON.stringify( 
       object, circularReplacer()); 
console.log(jsonString);

输出：

JavaScript 如何以JSON格式打印循环结构