扁平化路由中的children

最新推荐文章于 2024-06-07 18:35:31 发布

furfur-jiang

最新推荐文章于 2024-06-07 18:35:31 发布

阅读量869

点赞数

CC 4.0 BY-SA版权

分类专栏：算法 vue 文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/weixin_44523860/article/details/122542852

算法同时被 2 个专栏收录

120 篇文章

订阅专栏

vue

40 篇文章

订阅专栏

本文介绍了一种使用递归方法遍历复杂树形结构数据的方法，包括仅获取叶子节点和获取所有节点的完整路径。通过具体示例展示了如何递归地处理每个节点，并拼接完整的路径。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

两种效果：

只取叶子
全部都要

思路：1 判断有子节点就递归，2传递res接收结果，3 把父path一层层传下去，使用args接收不定参数

let arr = [
  {
    path: '1',
    children: [
      { path: '/1.1', children: [{ path: '/1.1.1' }, { path: '/1.1.2 ' }] },
      { path: '/1.2 ' },
    ],
  },
  {
    path: '2',
    children: [
      { path: '/2.1', children: [{ path: '/2.1.1' }, { path: '/2.1.2 ' }] },
      { path: '/2.2 ' },
    ],
  },
  { path: '3', children: [{ path: '/3.1' }, { path: '/3.2 ' }] },
]

只取叶子

fun(arr)
function fun(arr) {
  let res = []
  funSub(arr, res, null)
  console.log(res)
}

function funSub(arr, res, ...args) {
  arr.forEach((item) => {
    if (item.children) {
      funSub(item.children, res, item, ...args)
    } else {
      let tmp = item.path
      if (args.length > 0) {
        args.forEach((arg) => {
          if (arg) {
            tmp = arg.path + tmp
          }
        })
      }
      res.push({ path: item.path, tmp })
    }
  })
}

效果

[
  { path: '/1.1.1', tmp: '1/1.1/1.1.1' },
  { path: '/1.1.2 ', tmp: '1/1.1/1.1.2 ' },
  { path: '/1.2 ', tmp: '1/1.2 ' },
  { path: '/2.1.1', tmp: '2/2.1/2.1.1' },
  { path: '/2.1.2 ', tmp: '2/2.1/2.1.2 ' },
  { path: '/2.2 ', tmp: '2/2.2 ' },
  { path: '/3.1', tmp: '3/3.1' },
  { path: '/3.2 ', tmp: '3/3.2 ' }
]

全部都要

fun(arr)
function fun(arr) {
  let res = []
  funSub(arr, res, null)
  console.log(res)
}

function funSub(arr, res, ...args) {
  arr.forEach((item) => {
    let tmp = item.path
    if (args.length > 0) {
      args.forEach((arg) => {
        if (arg) {
          tmp = arg.path + tmp
        }
      })
    }
    res.push({ path: item.path, tmp })
    if (item.children) {
      funSub(item.children, res, item, ...args)
    }
  })
}

效果

[
  { path: '1', tmp: '1' },
  { path: '/1.1', tmp: '1/1.1' },
  { path: '/1.1.1', tmp: '1/1.1/1.1.1' },
  { path: '/1.1.2 ', tmp: '1/1.1/1.1.2 ' },
  { path: '/1.2 ', tmp: '1/1.2 ' },
  { path: '2', tmp: '2' },
  { path: '/2.1', tmp: '2/2.1' },
  { path: '/2.1.1', tmp: '2/2.1/2.1.1' },
  { path: '/2.1.2 ', tmp: '2/2.1/2.1.2 ' },
  { path: '/2.2 ', tmp: '2/2.2 ' },
  { path: '3', tmp: '3' },
  { path: '/3.1', tmp: '3/3.1' },
  { path: '/3.2 ', tmp: '3/3.2 ' }
]