JavaScript 如何在JSON中遍历子节点以创建面包屑UI

使用JavaScript在JSON中遍历子节点以创建面包屑UI可以通过几种方式实现，但其中一种最高效的方式是使用递归。面包屑是一种导航类型，显示用户在网站或应用程序中的当前位置。通常以一系列由分隔符（如“>”或“/”）分隔的链接显示。递归是一种函数调用自身执行特定任务的技术。在这种情况下，我们将使用递归来遍历JSON对象并构建面包屑UI。

方法：

创建一个函数，该函数以JSON对象和路径作为参数。路径参数将跟踪JSON对象中的当前位置。
检查当前对象是否有子节点。如果有，循环遍历每个子节点，并使用更新后的路径再次调用函数。
如果当前对象没有子节点，则将当前对象添加到面包屑UI并返回。
继续这个过程，直到所有对象都被处理。

让我们看一个示例来更好地理解这个过程。

示例1： 考虑以下JSON数据。在此示例中，我们使用了一个递归函数traverse来循环遍历JSON数据的每个子节点。该函数接受两个参数：节点和路径。节点参数是当前正在处理的节点，路径参数是一个数组，用于跟踪父子关系。

如果当前节点没有子节点，我们将路径数组添加到面包屑数组中。如果它有子节点，我们将以当前节点的子节点为节点参数和更新后的路径数组再次调用traverse函数。

Javascript

let data = { 
    "home": { 
        "about": { 
            "team": {}, 
            "careers": {} 
        }, 
        "services": { 
            "web-development": {}, 
            "mobile-apps": {} 
        } 
    } 
};

要从此JSON数据创建面包屑UI，我们可以使用以下代码：

Javascript

let breadcrumb = []; 
  
function traverse(node, path) { 
    for (let key in node) { 
        let newPath = path.concat(key); 
        if (Object.keys(node[key]).length === 0) { 
            breadcrumb.push(newPath); 
        } else { 
            traverse(node[key], newPath); 
        } 
    } 
} 
  
traverse(data, []); 
  
console.log(breadcrumb);

输出：

[ [ "home", "about", "team" ], 
[ "home", "about", "careers" ], 
[ "home", "services", "web-development" ], 
[ "home", "services", "mobile-apps" ] ]

示例2： 考虑以下JSON数据。在这个示例中，使用数据对象和一个空数组作为路径参数调用遍历函数。函数循环遍历当前节点中的每个键，并将键添加到路径数组中。如果当前节点没有子节点，则将路径数组添加到面包屑数组中。如果当前节点有子节点，则再次使用子节点和更新后的路径数组调用遍历函数。

一旦遍历函数完成遍历所有节点，面包屑数组就会包含JSON数据中所有父子关系。然后可以使用该数组来构建面包屑用户界面。

JavaScript

let data = { 
    "home": { 
        "about": { 
            "team": { 
                "developers": {}, 
                "designers": {} 
            }, 
            "careers": {} 
        }, 
        "services": { 
            "web-development": {}, 
            "mobile-apps": {} 
        } 
    } 
};

要从这个JSON数据创建一个面包屑导航界面，我们可以使用以下代码：

JavaScript

let breadcrumb = []; 
  
function traverse(node, path) { 
    for (let key in node) { 
        let newPath = path.concat(key); 
        if (Object.keys(node[key]).length === 0) { 
            breadcrumb.push(newPath); 
        } else { 
            traverse(node[key], newPath); 
        } 
    } 
} 
  
traverse(data, []); 
  
console.log(breadcrumb);

输出：

[ [ "home", "about", "team", "developers" ], 
[ "home", "about", "team", "designers" ], 
[ "home", "about", "careers" ], 
[ "home", "services", "web-development" ], 
[ "home", "services", "mobile-apps" ] ]