js递归面包屑导航

// 假设我们有一个表示页面层级的数组
const pageHierarchy = [
  { name: 'Home', url: '/' },
  { name: 'Category', url: '/category' },
  { name: 'SubCategory', url: '/category/subcategory' },
  { name: 'Product', url: '/category/subcategory/product' }
];

// 递归函数，用于生成面包屑导航的HTML
function generateBreadcrumb(hierarchy, index = 0) {
  if (index >= hierarchy.length) return '';

  const { name, url } = hierarchy[index];
  const breadcrumbItem = `<a href="${url}">${name}</a>`;

  if (index === hierarchy.length - 1) {
    return `${breadcrumbItem} <span>></span>`;
  }

  return `${breadcrumbItem} > ${generateBreadcrumb(hierarchy, index + 1)}`;
}

// 使用递归函数生成面包屑导航
const breadcrumbHtml = generateBreadcrumb(pageHierarchy);
console.log(breadcrumbHtml);
// 输出: <a href="/">Home</a> > <a href="/category">Category</a> > <a href="/category/subcategory">SubCategory</a> > <a href="/category/subcategory/product">Product</a> <span>></span>

// 将生成的面包屑导航插入到页面中
document.getElementById('breadcrumb').innerHTML = breadcrumbHtml;