关于递归的用法

最新推荐文章于 2024-06-08 02:30:07 发布
原创 最新推荐文章于 2024-06-08 02:30:07 发布 · 482 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #递归法

一个人走路可能会孤单，但有一群人陪你将会奋勇直前、
关于递归的理解
1.函数调用自身
2.需要有结束条件 否则会进入死循环
3.提取重复的逻辑，优化代码结构

最近在使用 Vue 开发的一个后台管理系统时 由于需要根据权限生成动态路由，和获取路由标题 和 icon等需求 由于开始数据结构层级比较简单 只有简单的二级路由，所以就使用了双层 for循环遍历获取,
但由于后面需求的更新需要添更多的层级的功能模块，
于是想到了 两种方法解决:1.传统for多层级循环遍历 2.递归调用
原数据结构

      let permission = [{
            path: '/',
            name: 'index',
            component: BasicLayout,
            meta: { title: '首页' },
            redirect: '/api/router',
            children: [
                //客户管理
                {
                    path: '/customer',
                    component: RouteView,
                    redirect: '/customer/AdminStration',
                    name: 'customer',
                    meta: { title: '客户管理', icon: 'github', keepAlive: true, permission: ['/customer/AdminStration'] },
                    children: [{
                        path: '/customer/AdminStration',
                        name: 'AdminStration',
                        component: () =>
                            import('@/views/customer/AdminStration'),
                        meta: { title: '客户管理', keepAlive: true, permission: ['AdminStration'] }
                    },]
                },
                //客户合同管理
                {
                    path: '/contract',
                    component: RouteView,
                    redirect: '/contract/Contract',
                    name: 'contract',
                    meta: { title: '客户合同管理', icon: 'file-markdown', keepAlive: true, permission: ['/contract/Contract'] },
                    children: [{
                        path: '/contract/Contract',
                        name: 'Contract',
                        component: () =>
                            import('@/views/contract/Contract'),
                        meta: { title: '客户合同管理', keepAlive: true, permission: ['Contract'] }
                    },]
                },
                //市场活动管理
                {
                    path: '/market',
                    component: RouteView,
                    redirect: '/market/Market',
                    name: 'market',
                    meta: { title: '市场活动管理', icon: 'shop', keepAlive: true, permission: ['/market/Market'] },
                    children: [{
                        path: '/market/Apply',
                        name: 'Apply',
                        component: () =>
                            import('@/views/market/Apply'),
                        meta: { title: '申请记录', keepAlive: true, permission: ['Apply'] }
                    },
                    {
                        path: '/market/Market',
                        name: 'Market',
                        component: () =>
                            import('@/views/market/Market'),
                        meta: { title: '全部活动', keepAlive: true, permission: ['Market'] }
                    },

                    ]
                },
                //产品信息查看
                {
                    path: '/product',
                    component: RouteView,
                    redirect: '/product/Product',
                    name: 'product',
                    meta: { title: '产品信息查看', icon: 'pound', keepAlive: true, permission: ['/product/Product'] },
                    children: [{
                        path: '/product/Product',
                        name: 'Product',
                        component: () =>
                            import('@/views/product/Product'),
                        meta: { title: '产品信息查看', keepAlive: true, permission: ['Product'] }
                    },]
                },
                //团队成员
                {
                    path: '/team',
                    component: RouteView,
                    redirect: '/team/Team',
                    name: 'team',
                    meta: { title: '团队成员管理  ', icon: 'team', keepAlive: true, permission: ['/team/Team'] },
                    children: [{
                        path: '/team/Team',
                        name: 'Team',
                        component: () =>
                            import('@/views/team/Team'),
                        meta: { title: '团队成员管理', keepAlive: true, permission: ['Team'] }
                    },]
                },
                //权限管理
                {
                    path: '/jurisdiction',
                    component: RouteView,
                    redirect: '/jurisdiction/jurhome',
                    name: 'Jurisdiction',
                    meta: { title: '权限管理  ', icon: 'user', keepAlive: true, permission: ['/jurisdiction/jurhome'] },
                    children: [{
                        path: '/jurisdiction/jurhome',
                        name: 'Jurhome',
                        component: () =>
                            import('@/views/jurisdiction/JuriHome'),
                        meta: { title: '企业首页', keepAlive: true, permission: ['Jurhome'] }
                    },
                    {
                        path: '/jurisdiction/staff',
                        name: 'staff',
                        component: () =>
                            import('@/views/jurisdiction/Staff'),
                        meta: { title: '员工与部门管理', keepAlive: true, permission: ['staff'] }
                    },
                    {
                        path: '/jurisdiction/userrole',
                        name: 'UserRole',
                        component: () =>
                            import('@/views/jurisdiction/UserRole'),
                        meta: { title: '角色权限控制', keepAlive: true, permission: ['UserRole'] }
                    },
                    {
                        path: '/jurisdiction/approval',
                        name: 'Approval',
                        component: () =>
                            import('@/views/jurisdiction/Approval'),
                        meta: { title: '审批流程管理', keepAlive: true, permission: ['Approval'] }
                    },
                    ]
                },
                //资金及审核管理
                {
                    path: '/capital',
                    component: RouteView,
                    redirect: '/capital/moneygrade',
                    name: 'Jurisdiction',
                    meta: { title: '资金及审核管理  ', icon: 'money-collect', keepAlive: true, permission: ['/capital/moneygrade'] },
                    children: [{
                        path: '/capital/moneygrade',
                        name: 'moneygrade',
                        component: () =>
                            import('@/views/capital/MoneyGrade'),
                        meta: { title: '打款信息审核', keepAlive: true, permission: ['MoneyGrade'] }
                    },
                    {
                        path: '/capital/makemoney',
                        name: 'makemoney',
                        component: () =>
                            import('@/views/capital/MakeMoney'),
                        meta: { title: '佣金发放审核报批', keepAlive: true, permission: ['MakeMoney'] }
                    },
                    {
                        path: '/capital/moneygrant',
                        name: 'MoneyGrant',
                        component: () =>
                            import('@/views/capital/MoneyGrant'),
                        meta: { title: '佣金级别管理', keepAlive: true, permission: ['MoneyGrant'] }
                    },
                    {
                        path: '/capital/delcontract',
                        name: 'delcontract',
                        component: () =>
                            import('@/views/capital/DelContract '),
                        meta: { title: '合同报废核销', keepAlive: true, permission: ['DelContract'] }
                    },

                    ]
                },
                //客户及产品管理
                {
                    path: '/prodectmanage',
                    component: RouteView,
                    redirect: '/prodectmanage/userdata',
                    name: 'Jurisdiction',
                    meta: { title: '客户及产品管理  ', icon: 'desktop', keepAlive: false, permission: ['/prodectmanage/userdata'] },
                    children: [{
                        path: '/prodectmanage/userdata',
                        name: 'UserData',
                        component: () =>
                            import('@/views/prodectmanage/UserData'),
                        meta: { title: '客户资料', keepAlive: false, permission: ['UserData'] }
                    },
                    {
                        path: '/prodectmanage/contrancexamie',
                        name: 'ContrancExamie',
                        component: () =>
                            import('@/views/prodectmanage/ContrancExamie'),
                        meta: { title: '合同权限审核', keepAlive: false, permission: ['ContrancExamie'] }
                    },
                    {
                        path: '/prodectmanage/usermaintain',
                        name: 'UserMaintain',
                        component: () =>
                            import('@/views/prodectmanage/UserMaintain'),
                        meta: { title: '客户维护', keepAlive: false, permission: ['UserMaintain'] }
                    },
                    {
                        path: '/prodectmanage/productinfo',
                        name: 'ProductInfo',
                        component: RouteView,
                        redirect: '/prodectmanage/productinfo/datacensus',
                        meta: { title: '产品信息管理', keepAlive: true, permission: ['datacensus'] },
                        children: [{
                            path: '/prodectmanage/productinfo/manage',
                            name: 'Manage',
                            component: () =>
                                import('@/views/prodectmanage/ProductInfo/Manage'),
                            meta: { title: '产品信息', keepAlive: true, permission: ['Manage'] },
                        },
                        {
                            path: '/prodectmanage/productinfo/datacensus',
                            name: 'DataCensus',
                            component: () =>
                                import('@/views/prodectmanage/ProductInfo/DataCensus'),
                            meta: { title: '数据统计', keepAlive: true, permission: ['DataCensus'] },
                        },
                        {
                            path: '/prodectmanage/productinfo/echart',
                            name: 'Echart',
                            component: () =>
                                import('@/views/prodectmanage/ProductInfo/Echarts'),
                            meta: { title: '产品销售情况', keepAlive: true, permission: ['Echarts'] },
                        },
                        ]
                    },
                    {
                        path: '/prodectmanage/contrancmanage',
                        name: 'ContrancManage',
                        component: () =>
                            import('@/views/prodectmanage/ContrancManage'),
                        meta: { title: '合同管理', keepAlive: true, permission: ['ContrancManage'] }
                    },

                    ]
                },
                //市场活动管理
                {
                    path: '/marketing',
                    component: RouteView,
                    redirect: '/marketing/plan',
                    name: 'Marketing',
                    meta: { title: '市场活动管理 ', icon: 'radar-chart', keepAlive: false, permission: ['/marketing/plan'] },
                    children: [{
                        path: '/marketing/plan',
                        name: 'Plan',
                        component: () =>
                            import('@/views/marketing/Plan'),
                        meta: { title: '市场活动策划', keepAlive: false, permission: ['Plan'] }
                    },
                    {
                        path: '/marketing/activitymanage',
                        name: 'ActivityManage',
                        component: () =>
                            import('@/views/marketing/ActivityManage'),
                        meta: { title: '活动管理', keepAlive: false, permission: ['ActivityManage'] }
                    },
                    {
                        path: '/marketing/activityApply',
                        name: 'activityApply',
                        component: () =>
                            import('@/views/marketing/ActivityApply'),
                        meta: { title: '活动申请管理', keepAlive: false, permission: ['activity-apply'] }
                    }
                    ]
                },
                //后台接口管理
                {
                    path: '/api',
                    component: RouteView,
                    redirect: '/api/router',
                    name: 'Api',
                    meta: { title: '后台接口管理  ', icon: 'key', keepAlive: true, permission: ['/api/router'] },
                    children: [{
                        path: '/api/router',
                        name: 'router',
                        component: () =>
                            import('@/views/apirouter/ApiRouter'),
                        meta: { title: '后台接口菜单', keepAlive: true, permission: ['/api/router'] }
                    },]
                },

            ]
        },]

需要获取到 每个页面的title

普通forEach 循环获取

      /*普通循环*/
        var roleList = []
        permission.forEach(itemT1 => {
            roleList.push(itemT1.meta.title)
            itemT1.children.forEach(itemT2 => {
                roleList.push(itemT2.meta.title)
                itemT2.children.forEach(itemT3 => {
                    roleList.push(itemT3.meta.title)
                    if (itemT3.children) {
                        itemT3.children.forEach(itemT4 => {
                            roleList.push(itemT4.meta.title)
                        })
                    }

                })
            })
        })
        console.log(roleList)

页面打印
在这里插入图片描述
虽然成功拿到每个页的 title 但多层级 的forEach 遍历 着实看着恶心，如果再添加数据结构层级还需要添加循环，而且不方便后期维护

采用递归的方法

     /*递归调用*/
        function setRole(permission) {
            let roleList = []
            function setPermission(permission) {
                permission.map(role => {
                    roleList.push(role.meta.title) //将每次遍历的 title 存入数组中
                    if (role.children) { //递归结束条件 如果有 子页面 children 将该数据执行调用 
                        setPermission(role.children)
                    }
                })
            }
            setPermission(permission)
            return roleList  //返回遍历结果
        }
        let role = setRole(permission)
        console.log(role)

页面打印
在这里插入图片描述
结果一样，每个页面的title都能拿到，代码结构更加简洁易懂，如果需要在添加更深层次的数据结构 只需增加原数据结构即可，功能代码无需修改便于后期维护功能迭代

个人关于递归的理解：
1.多用于 省 市 县，多层树形结构数据遍历
2.重复的逻辑调用
3.一定要有结束调用条件
4.优化代码结构
5.阶乘算法（虽然没用过！！！）

用递归发求1加到100 关于递归用法（一）C语言初学者
wufujuquan的博客
10-29 7043
作为一个C语言初学者，一步步摸索。有疑问会在网站上面提出，然后也在这里总结出自己遇见的问题，并在这里发布。 第一、为了自己记住信息。避免以后犯错 第二、希望有其他初学者，共同学习。避免犯同样错误。 第三、期待有更好的解决方法
递归方法的使用
z_p1754的博客
12-14 605
递归 1.什么是递归: 程序调用自身的编程技巧称为递归（ recursion）。递归作为一种算法在程序设计语言中广泛应用。 一个过程或函数在其定义或说明中有直接或间接调用自身的一种方法，它通常把一个大型复杂的问题层层转化为一个与原问题相似的规模较小的问题来求解，递归策略只需少量的程序就可描述出解题过程所需要的多次重复计算，大大地减少了程序的代码量。递归的能力在于用有限的语句来定义对象的无限集合。一般来说，递归需要有边界条件、递归前进段和递归返回段。当边界条件不满足时，递归前进；当边界条件满足时，递归返回
递归用法总结
weixin_34138521的博客
03-11 164
递归定义 递归调用：在调用一个函数的过程中，这个函数本身又直接或间接地调用了函数本身。 通俗地说，举个例子。有5个学生在一起，问第5个学生有多少钱，他说比第4个学生多2块，第四个又说比第三个多2块，第三个比第二个多2块，第二个又比第一个多2块。第一个人说自己只有10块。在这个例子中，我们求第5个人有多少钱的时候，可以通过第四个人，第四个通过第三个，一次类推。这就是递归的思想。 上述求学生钱的例子表...
递归的使用
m0_64239036的博客
10-22 355
递归的使用
递归用法
weixin_30919571的博客
03-19 152
转载于:https://www.cnblogs.com/moye8187/p/6579613.html
递归的用法
sunhy007的博客
07-04 156
递：递进，把同性质的大问题，拆成小问题，拆成更小的问题，把小问题解决之后，大问题也就解决了 归：拿到最小的问题的答案，向上去解决大问题 函数中自己调用自己就是递归，切记要有终止条件，不然进入死循环 1.求数字的和 function sum(n){ if(n===1){ return n=1 } return n+sum(n-1) } console.log(sum(5)); 打印 5+sum(n-1) 5+4+sum(n-1.
es6函数之尾递归用法实例分析
11-21
本文实例讲述了es6函数之尾递归用法。分享给大家供大家参考，具体如下： 函数调用自身，称为递归，如果尾调用自身，就称为尾递归。 递归非常耗费内存。因为需要同时保存成千上百个调用帧，很容易发生“栈溢出”错误...
c++用递归的方法编写函数求Fibonacci级数_递归_
10-02
递归是一种解决问题的方法，它将问题分解为更小的子问题，直到子问题简单到可以直接解决。C++是一种强大的面向对象的编程语言，支持函数调用自身的技术，即递归。 Fibonacci数列的定义如下：序列的前两个数字是0和1...
C# 递归函数详细介绍及使用方法
01-01
任何一个方法既可以调用其他方法也可以调用自己，而当这个方法调用自己时，我们就叫它递归函数或递归方法。 通常递归有两个特点： 1. 递归方法一直会调用自己直到某些条件被满足 2. 递归方法会有一些参数，而它会把...
递归（一）递归的基本用法
fff2zrx的博客
08-24 866
本文为学习数据结构与算法Python版的个人笔记 递归的 进制转换 将整数转换为任意进制 def toStr(number,base): str_dict='0123456789ABCDEF' if number<base: return str_dict[number] x1=number//base x2=number%base return toStr(x1,base)+str_dict[x2] 才开始写的时候，明白用取整来减少规模.
简单递归用法
qq_41960196的博客
06-30 386
1.求一个数num的阶层，num！。  #include&lt;stdio.h&gt; int main() {     int n,sum;     scanf("%d",&amp;n);     sum = fun(n);     printf("sum = %d\n",sum); } int fun(int n) {     int r;     if( n == 0)     {  ...
如何使用递归？
一只攻城狮的博客
12-03 2033
如何使用递归？ 「递归」这个词语我们经常在很多地方看到，在很多地方用到。但是初学递归时可能会有些难以理解。本文从一些易懂、常见的例子中介绍一下「递归」。 当我们看到「递归」时，不要把它看成一个词语，而是分开看成两个字「递」和「归」。 举一个生活中的例子 有几个人在柜台前排队，现在甲想知道他排到第几个了，所以他会问排在他前面的乙是第几个，然后加1即可。 但是乙也不知道他是第几个，所以乙会问排在他前面的丙是第几个，然后加1即可。 这样一直向前问…… 直到问到戊了，此时戊就站在柜台前，所以戊知道
怎么使用递归呢
weixin_44649793的博客
06-06 2105
1 概述 递归：指在当前方法内调用自己的这种现象。 递归的分类: 递归分为两种，直接递归和间接递归。 直接递归称为方法自身调用自己。 间接递归可以A方法调用B方法，B方法调用C方法，C方法调用A方法。 注意事项： 递归一定要有条件限定，保证递归能够停止下来，否则会发生栈内存溢出。 在递归中虽然有限定条件，但是递归次数不能太多。否则也会发生栈内存溢出。 构造方法,禁止递归 递归的使用前提： 当调用方法的时候，方法的主题不变，每次调用方法的参数不同，可以使用递归 代码如下： public
递归及其使用
最新发布
itigoitie的博客
06-08 1018
递归是指在函数的定义中使用函数自身的过程。简单来说，递归是通过将大问题分解为更小的子问题来解决问题的一种方法。递归函数在执行时会反复调用自身，直到达到某个终止条件。
递归的概念及用法
m0_70905607的博客
07-16 1279
非规律化递归问题自己看着办，需要注释化的编程思维（有猴子吃桃、啤酒瓶换兑问题）（1）方法递归方法直接调用自己或者间接调用自己的形式称为方法递归。把一个复杂的问题层面转化为一个与原问题相似的、规模较小的问题求解。递归如果没有控制好终止，会出现递归死循环，导致栈内存溢出现象。间接递归方法调用其他方法，其他方法又回调方法自己。（1）递归的公式f(n)=f(n-1)*n;递归作为一种算法在程序设计语言中广泛应用。（2）递归的终结点f(1)（3）递归的方向必须走向终点。直接递归方法自己调用自己。...
递归方法实现节点增加技术解析
由于文件名称列表中只有一个文件名“用递归方法增加节点”，我们可以推断这个RAR压缩包可能包含了关于如何使用递归方法来增加树形结构或链表中节点的示例代码、教程或文档等资料。这些内容将具体指导开发者如何在...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值