js解析递归json

前端南秋

已于 2022-08-30 15:08:02 修改

阅读量2.9k

点赞数 2

CC 4.0 BY-SA版权

分类专栏：前端 vue 文章标签： javaScript js vue 数组前端

于 2019-03-01 13:52:46 首次发布

本文链接：https://blog.youkuaiyun.com/qq_31281245/article/details/88056398

前端同时被 2 个专栏收录

24 篇文章

订阅专栏

vue

14 篇文章

订阅专栏

本文介绍了一种将复杂的递归JSON菜单转换为一维数组的方法，通过解析递归数组，简化了前端处理后台管理系统左侧菜单的过程。

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

日常在后台管理系统中我们常用到的有递归json。

前端根据后端给的接口获取到当前后台管理系统左侧菜单列json。而这个json是一个递归数组。

类似于如下：

var data = [
    {
        type:'1',
        children:[
            {
                type:'2',
                children:[
                    {
                        type:'3'
                    }
                ]    
            }
            
        ]
    }

]

当我们要点击每个菜单的时候获取当前的type 属性，这时候就比较懵逼了，我们怎么做呢？

解析它！把这个递归数组解析成一个一维数组，无疑，就简单了许多。

代码如下：

var arr = [];

function getMenuAll (arr) {
    arr.filter(item => {
      menuArr.push(item)
      if(item.children && item.children.length) {
        getMenuAll(item.children)
      }
    })
  }
getMenuAll(data)
console.log(arr)

其实总的思想跟写递归组件的思想是差不多的，代码也很简单。各位顺手给个赞呗。