友情提示:阅读本文需花 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. 剑指 Offer 53 - I. 在排序数组中查找数字 I

    题目描述 统计一个数字在排序数组中出现的次数. 示例1: 输入: nums = [5,7,7,8,8,10], target = 8 输出: 2 示例2: 输入: nums = [5,7,7,8,8, ...

  2. 小白也能弄懂的目标检测之YOLO系列 - 第一期

    大家好,上期分享了电脑端几个免费无广告且实用的录屏软件,这期想给大家来讲解YOLO这个算法,从零基础学起,并最终学会YOLOV3的Pytorch实现,并学会自己制作数据集进行模型训练,然后用自己训练好 ...

  3. ASP.NET解压zip文件,并将解压后的文件放到指定路径中

    本文链接:https://www.cnblogs.com/yifeixue/p/11769905.html 本人已亲测有效(*^▽^*) 废话不多说了,直接上代码: 1 /// <summary ...

  4. CTF-BugKu-34-

    2020.09.15 做得好慢,,,心不在焉的,赶紧的啊,还得做别的呢 做题 第三十四题 很普通的数独(ISCCCTF) https://ctf.bugku.com/challenges#很普通的数独 ...

  5. [LeetCode]347. 前 K 个高频元素(堆)

    题目 给定一个非空的整数数组,返回其中出现频率前 k 高的元素. 示例 1: 输入: nums = [1,1,1,2,2,3], k = 2 输出: [1,2] 示例 2: 输入: nums = [1 ...

  6. 关于java基础_方法的简单习题

    package day05; import java.util.Arrays; /** * 方法作业 * @author ASUS * */ public class Demo6 { /* * 1.定 ...

  7. Python安装与环境变量配置 入门详解 - 精简归纳

    Python安装与环境变量配置 入门详解 - 精简归纳 JERRY_Z. ~ 2020 / 9 / 24 转载请注明出处!️ 目录 Python安装与环境变量配置 入门详解 - 精简归纳 一.下载Py ...

  8. 刷题[b01lers2020]Life on Mars

    解题思路 打开网站,检查常见的信息泄露,漏洞扫描等,都无hint.这时候有点难办了,又找了一会儿,发现抓包标签时,get的值会有参数 尝试访问,发现有如下内容: 因为实在其他地方找不到任何思路了,看着 ...

  9. Vue mustache语法

    mustache语法 Vue中的插值语法mustache本意为胡子,可能是{{}}长得像胡子吧. 下面是对mustache插值语法一个最简单的使用. 被管理元素会通过data属性拿到其中的数据对象. ...

  10. thinkphp上传图片,生成缩略图

    Image.php <?php /** * 实现图片上传,图片缩小, 增加水印 * 需要定义以下常量 * define('ERR_INVALID_IMAGE', 1); * define('ER ...