友情提示:阅读本文需花 3分钟左右!

  • 递归函数必须接受参数。 (比如我要递归谁?)
  • 在递归函数的定义初始,应该有一个判断条件,当参数满足这个条件的时候,函数停止执行,并返回值。(指定退出条件,否则就会死循环)
  • 每次递归函数执行自己的时候,都需要把当前参数做某种修改,然后传入下一次递归。(每次循环在调用自己一次并传参)
  • 当参数被累积修改到符合初始判断条件了,递归就停止了。(最后满足条件就退出)

一句话概括:所谓的递归函数就是在函数体内调用n次本函数。

幼儿园化: 自己玩自己(强撸灰飞XX),或者累了(满足条件)自己退出。

具体示例(直接复制可运行):

 // 递归简单demo
    let num = 0;
    function recursion(params) {
        if (params > 100) {
            return
        } else {
            //debugger
            num += params;
            return recursion(params + 1)
        }
    }
    recursion(0)
    console.log(num);  // 5050
 
 
// 递归升级版,递归树
    const data = [{
        "area_id": 5,
        "name": "广东省",
        "parent_id": 0,
    }, {
        "area_id": 6,
        "name": "广州市",
        "parent_id": 5,
    }, {
        "area_id": 7,
        "name": "深圳市",
        "parent_id": 5,
    }, {
        "area_id": 4,
        "name": "北京市",
        "parent_id": 3,
    }, {
        "area_id": 3,
        "name": "北京",
        "parent_id": 0,
    }, {
        "area_id": 2,
        "name": "测试子地区",
        "parent_id": 1,
    }, {
        "area_id": 1,
        "name": "测试地区",
        "parent_id": 0,
    }]
    function toTreeData(data, pid) {
        function tree(id) {
            let arr = []
            data.filter(item => {
                return item.parent_id === id;
            }).forEach(item => {
                console.log(arr.length);
                if (!tree(item.area_id).length) {
                    arr.push({
                        area_id: item.area_id,
                        label: item.name,
                    })
                } else {
                    arr.push({
                        area_id: item.area_id,
                        label: item.name,
                        children: tree(item.area_id)
                    })
                }
            })
            return arr
        }
        return tree(pid) // 第一级节点的父id,是null或者0,视情况传入
    }
    console.log(toTreeData(data, 0));
结果如下

js 递归的理解的更多相关文章

  1. JS底层知识理解之执行上下文篇

    JS底层知识理解之执行上下文篇 一.什么是执行上下文(Execution Context) 执行上下文可以理解为当前代码的执行环境,它会形成一个作用域. 二.JavaScript引擎会以什么方式去处理 ...

  2. angular.js的一点理解

    对angular.js的一点理解 2015-01-14 13:18 by MrGeorgeZhao, 317 阅读, 4 评论, 收藏, 编辑 最近一直在学习angular.js.不得不说和jquer ...

  3. 前端基本知识(三):JS的闭包理解

    JS闭包的理解 一.变量的作用域 二.如何从外部读取局部变量 三.什么是闭包 四.深入理解闭包 五.闭包的用途 六.使用闭包注意情况 七.JavaScript的垃圾回收机制 八.一些思考题 一.变量作 ...

  4. 前端基本知识(三):JS的闭包理解(第一个思考题有错误,已修改)

    JS闭包的理解 一.变量的作用域 二.如何从外部读取局部变量 三.什么是闭包 四.深入理解闭包 五.闭包的用途 六.使用闭包注意情况 七.JavaScript的垃圾回收机制 八.一些思考题 一.变量作 ...

  5. js递归遍历多维数组并在修改数组的key后返回新的多维数组

    我司最近正在用VUE做一个基于用户权限显示不同左侧菜单的后台管理系统,接口会根据用户的权限不同返回不同的菜单名称.URL等,前端要将这些菜单名称及URL动态添加到系统的左侧,这里就用到了vue-rou ...

  6. 37.js----浅谈js原型的理解

    浅谈Js原型的理解 一.js中的原型毫无疑问一个难点,学习如果不深入很容易就晕了!    在参考了多方面的资料后,发现解释都太过专业,对于很多还没有接触过面向对象    语言的小白来说,有理解不了里面 ...

  7. 【Vue.js实战案例】- Vue.js递归组件实现组织架构树和选人功能

    大家好!先上图看看本次案例的整体效果. 浪奔,浪流,万里涛涛江水永不休.如果在jq时代来实这个功能简直有些噩梦了,但是自从前端思想发展到现在的以MVVM为主流的大背景下,来实现一个这样繁杂的功能简直不 ...

  8. js 递归调用

    js递归调用 function fact(num) { ) { ; } else { ); } } 以下代码可导致出错: var anotherFact = fact; fact = null; al ...

  9. 关于js回调方法 js递归时使用方法

    js中递归调用本身可以这样: function a1(n){ a1(n)}但是如果需要在参数n进行自增的情况下判断会出错: function a1(n){ if(n>10) return 'aa ...

随机推荐

  1. Java面试题(1):详解int与Integer

    Java面试题(1):详解int与Integer int与Integer的区别 int是Java的基本数据类型之一,Integer是int的包装类 int直接再内存中储存值,Integer进行new操 ...

  2. springboot入门遇到Whitelabel Error Page错误

    错误页面: 解决方法: 启动类要放在最外层,改成下面的

  3. pwnable.kr之leg

    查看原题代码: #include <stdio.h> #include <fcntl.h> int key1(){ asm("mov r3, pc\n"); ...

  4. Java Web项目实现写日志功能

    第一步:导入log4j-1.2.16的jar包 第二步:在servlet包里编写写日志的servlet,代码如下: public class InitServlet extends HttpServl ...

  5. Tomcat +Nginx+Redis实现session共享

    一.准备工作 中间件:Tomcat.Redis.Nginx jar包:commons-pool2-2.4.2.jar.jedis-2.8.0.jar.tomcat-redis-session-mana ...

  6. LVM最佳实践

    LVM逻辑卷管理器 LVM概念 在Linux中,逻辑卷管理器(Logical Volume Manager, LVM)是为Linux内核提供逻辑卷管理的设备映射器目标.大多数现代Linux发行版都能够 ...

  7. PHP程序十点未来的建议

    1. Composer 第一点就要提 Composer ,自从 Composer 出现后,PHP 的依赖管理可以变得非常简单.程序内依赖一些类库和框架,直接使用 Composer 引入即可,通过使用 ...

  8. Java读取excel 支持xls 和 xlsx格式

    1.工具类public class InExcelTool { //根据指定位置单独读取一个 public static String getContent(String file, int page ...

  9. Debian、kali类虚拟机网络设置

    Linux发行版分类 先说一下Linux发行版的分类,因为不同的发行版,各自设置的网络的方式就不相同, - 我常用的Linux发行版 -- Debian --- debian --- ubuntu - ...

  10. 一文读懂MySQL的索引结构及查询优化

    回顾前文: 一文学会MySQL的explain工具 (同时再次强调,这几篇关于MySQL的探究都是基于5.7版本,相关总结与结论不一定适用于其他版本) MySQL官方文档中(https://dev.m ...