JS实现树形结构生成面包屑

 

// 树形结构数据
const treeData = [
  {
    id: 1,
    name: '首页',
    children: []
  },
  {
    id: 2,
    name: '产品',
    children: [
      {
        id: 3,
        name: '产品分类',
        children: [
          {
            id: 4,
            name: '手机',
            children: []
          },
          {
            id: 5,
            name: '电脑',
            children: []
          }
        ]
      },
      {
        id: 6,
        name: '产品列表',
        children: []
      }
    ]
  },
  {
    id: 7,
    name: '关于我们',
    children: []
  }
];

// 生成面包屑
function generateBreadcrumb(treeData, id) {
  let breadcrumb = [];
  
  // 递归查找当前页面的路径
  function findPath(data, id, path) {
    for (let i = 0; i < data.length; i++) {
      const node = data[i];
      
      // 找到当前页面
      if (node.id === id) {
        breadcrumb = path.concat(node.name);
        break;
      }
      
      // 在子节点中继续查找
      if (node.children && node.children.length > 0) {
        findPath(node.children, id, path.concat(node.name));
      }
    }
  }
  
  findPath(treeData, id, []);
  
  return breadcrumb;
}

// 示例用法
const currentId = 5;
const breadcrumb = generateBreadcrumb(treeData, currentId);
console.log(breadcrumb);
 

在上面的示例代码中，我们定义了一个树形结构数据 treeData，每个节点包含一个 id 和 name 字段，并且可以有子节点。然后我们定义了一个 generateBreadcrumb 函数，用于生成面包屑。

在 generateBreadcrumb 函数中，我们使用递归的方式查找当前页面的路径。我们定义了一个 findPath 函数，它接受一个树形结构数据 data、当前页面的 id 和当前已经查找到的路径 path。在 findPath 函数中，我们遍历树形结构数据，找到当前页面时将当前已经查找到的路径与当前节点的 name 连接起来，然后赋值给 breadcrumb 变量。如果当前节点有子节点，则在子节点中继续查找。

最后，我们调用 generateBreadcrumb 函数，传入当前页面的 id，即可生成对应的面包屑。

在示例代码中，我们假设当前页面的 id 是 5，然后调用 generateBreadcrumb 函数，最终打印出面包屑 ["首页", "产品", "产品分类", "电脑"]。这表示当前页面位于树形结构的首页、产品、产品分类和电脑四个节点下。