使用递归实现 多级 面包屑

当点击不同菜单时 来定位当前到位置

 

 

let arr = [
  { title: "一级0" },
  { title: "一级1" },
  {
    title: "一级2",
    subs: [
      { title: "二级0" },
      { title: "二级1", subs: [{ title: "三级0" }, { title: "三级1" , subs: [{title: '四级0'}]}] },
      { title: "二级2" },
    ],
  },
  { title: "一级3" },
];
/* 
* list 这里开始为 arr 数组
* ico 连接 的字符
* site 记录前一段的位置
 */
function fnb(list, ico = '', site = '当前位置:') {
  return list.map(item => {
    // 判断有没有子节点 NO
    if(!item.subs) {
      return site + ico + item.title
    }else {
      // 如果有 subs 则进行递归
      return fnb(item.subs, ' > ', site + ico + item.title )
    }
  })
}
console.log(fnb(arr))
/* [  "当前位置:一级0", 
      "当前位置:一级1", 
      ["当前位置:一级2 > 二级0", 
        ["当前位置:一级2 > 二级1 > 三级0", 
          ["当前位置:一级2 > 二级1 > 三级1 > 四级0"]
        ], "当前位置:一级2 > 二级2"
      ], 
      "当前位置:一级3"
    ] 
*/

 

posted @ 2020-08-28 15:20  林中有风  阅读(518)  评论(0编辑  收藏  举报