友情提示:阅读本文需花 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. 在react项目添加看板娘(react-live2d)

    有留意到看板娘这么个东西,简直就是我们程序员+动漫迷的挚爱.但是回观网上,大多只是在老旧的html的静态引入.vue甚至也有几个不怎么维护的,还是老旧的不行的SDK2.X的版本.这这这这!我们的rea ...

  2. shell小技巧(4)AIX和Linux计算天前日期

    Linux计算天前日期: date -d "- day" +%Y%m%d AIX计算5天前日期: perl -e "use POSIX qw(strftime); pri ...

  3. Docker启动失败

    报错信息: Job for docker.service failed because the control process exited with error code. See "sy ...

  4. composer 三大组成部分

    composer 三大组成部分:1. 仓库 2. 命令行下载器 3. 自动加载. 1. 仓库 公有仓库 https://packagist.org 私有仓库 https://packagist.com ...

  5. [补题]求a[i]+a[j]+i-j的最大值,要求i<j

    题目 如题. 例: 输入: 5 11 6 5 18 12 输出: 29 题解 思路: 一直是按着(a[i]+a[j])+(i-j)想后序的思路,不应该限制住自己,应该多考虑拆的方法.正确思路是把a[i ...

  6. Linux实战(11):Centos安装Jenkins

    前言 本文采用的是yum安装方式. 环境安装 以下操作为配置java8,node,maven,注意装之前请将其他版本删除干净, 离线包下载 tar -zxvf apache-maven-3.6.3-b ...

  7. yum管理——搭建iso镜像私有yum源仓库(1)

    在服务器上一般是没有光驱的,那么我们怎么制作iso本地repo镜像源仓库? 通过本地iso镜像,copy到linux系统中一个目录中,进行伪文件系统挂载,执行如下命令: 挂载:mount -o loo ...

  8. VC 编译 MATLAB 的 mex 文件

    VC 编译 MATLAB 的 mex 文件mex 文件是 MATLAB 调用其他程序设计语言程序或算法的接口.在 Windows 环境中,mex 文件是扩展文件名为 DLL 的动态链接库,可以在 m ...

  9. nginx的安装和启动

    https://www.cnblogs.com/wyd168/p/6636529.html nginx开机启动 https://www.cnblogs.com/gimin/p/8893559.html

  10. 用友yonsuite产品二开之简单的yonsql查询小工具

    和以往的用友产品不同,yonsuite产品开发了低代码平台,满足客户的个性化开发需求.嗯~,一句话不知当讲不当讲,那就讲:所谓低代码平台就是开发不想用实施不会用系列.让我一个开发感受到了憋屈.