js，ts 便利树形结构每个节点

最新推荐文章于 2023-12-15 01:20:55 发布

闪电松鼠~

最新推荐文章于 2023-12-15 01:20:55 发布

阅读量399

点赞数

分类专栏： vue3+ts项目中应用文章标签： javascript 开发语言

本文链接：https://blog.csdn.net/dzb1993/article/details/126489732

版权

vue3+ts项目中应用专栏收录该内容

8 篇文章 0 订阅

订阅专栏

这篇博客主要展示了如何通过JavaScript实现递归遍历一个包含多级children的对象数组，生成路由配置。示例中，函数`getAllList`接收一个包含路由信息的对象数组，如果当前项有children并且不为空，则递归调用自身，最终返回完整的路由配置结构。这个过程涉及到前端开发中的路由管理和数据结构操作。

摘要由CSDN通过智能技术生成

调用函数时传递的值

let resultArr = getAllList([
    {
      name: '一级路由',
      path: 'first/',
      component: 'first',
      children: [
        {
          name: '二级路由',
          path: 'first/child',
          component: 'firstchild',
          children: [
            {
              name: '三级路由',
              path: 'first/child/child',
              component: 'firstchildchild',
            },
          ],
        },
        {
          name: '二级路由',
          path: 'first/child',
          component: 'firstchild',
          children: [
            {
              name: '三级路由',
              path: 'first/child/child',
              component: 'firstchildchild',
            },
          ],
        },
        {
          name: '二级路由',
          path: 'first/child',
          component: 'firstchild',
          children: [
            {
              name: '三级路由',
              path: 'first/child/child',
              component: 'firstchildchild',
            },
          ],
        },
      ],
    },
    {
      name: '二级路由',
      path: 'second/',
      component: 'second',
      children: [
        {
          name: '二级路由',
          path: 'two/child',
          component: 'towchild',
          children: [
            {
              name: '三级路由',
              path: 'first/child/child',
              component: 'firstchildchild',
            },
          ],
        },
      ],
    },
  ])

  console.log(resultArr, '这里是resultArr')

执行过程:如果一直由children 那么就一直调用自身，直到最后一层则返回对应的值

const getAllList = (currentArr: any) => {
  let result = currentArr.map((item: any) => {
    if (item.children && item.children.length && item.children[0]) {
      item.children = getAllList(item.children)

      return {
        name: item.name,
        path: item.path,
        component: item.component,
        children: item.children,
        role: '超人',
      }
    } else {
      return {
        name: item.name,
        path: item.path,
        component: item.component,
      }
    }
  })
  return result
}

这里是返回值