前端获取嵌套数据指定层级的数据

最新推荐文章于 2024-03-14 16:33:43 发布

ZL随心

最新推荐文章于 2024-03-14 16:33:43 发布

阅读量528

点赞数

分类专栏： js 文章标签： javascript

本文链接：https://blog.youkuaiyun.com/weixin_44832362/article/details/128911925

版权

js 专栏收录该内容

12 篇文章

订阅专栏

文章介绍了如何处理嵌套数据，只显示前两层内容。提供了一个函数`getLevelData`，该函数接受嵌套数据、目标层级和当前递归层级作为参数，通过递归删除超出指定层级的子数据，从而返回只包含前两层的数据结构。

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

前言

比如一个这样的数据，我们不想展示全部，只要前两层数据，那么就会用到下面的方法了

const data = [
      {
        label: '1',
        children: [
          {
            label: '1-1',
            children: [
              {
                label: '1-1-1'
              },
              {
                label: '1-1-2'
              }
            ]
          },
          {
            label: '1-2',
            children: [
              {
                label: '1-2-1'
              },
              {
                label: '1-2-2'
              }
            ]
          }
        ]
      },
      {
        label: '1',
        children: [
          {
            label: '1-1',
            children: [
              {
                label: '1-1-1'
              },
              {
                label: '1-1-2'
              }
            ]
          },
          {
            label: '1-2',
            children: [
              {
                label: '1-2-1'
              },
              {
                label: '1-2-2'
              }
            ]
          }
        ]
      }
    ]

处理方法

/**
     * @function 获取嵌套数据的指定层级的数据
     * @param data 嵌套数据
     * @level 获取多少层
     * @flag 当前递归到那一层
     * @return 返回指定层级的数据
     */
    function getLevelData (data, level, currentLevel) {
      if (level < currentLevel) return []

      data?.forEach(item => {
        // 遍历到指定层级
        let cur = currentLevel
        if (cur >= level) {
          delete item.children
        } else {
          getLevelData(item.children, level, ++cur)
        }
      })
    }

使用

// 只需要第二个参数，输入我们想要的层级即可，返回指定层级的数据
getLevelData(data, 2, 1)
console.log(data);