友情提示:阅读本文需花 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. 柱状图bar

    1.bar的基本设置宽度和圆角 let box1 = document.getElementById('box1') let myEcharts = echarts.init(box1) let op ...

  2. PHP复杂变量

    eval($str="${${phpinfo()}}";)     →   可以执行phpinfo() ${phpinfo()} = {${phpindo()}} PHP复杂变量 ...

  3. JS的全局变量无法给Ajax里的变量赋值

    前阶段遇到这么一个问题,在JS定义一个全局变量,JS方法里的其他地方都能使用,偏偏ajax里无法赋值,也不是无法赋值,但赋值总是慢一拍,具体的解决方案如下图所示:

  4. 提升开发幸福度-IDE配置

    插件 vscode插件 Settings Sync Atom One Dark Theme Bracket Pair Colorizer Code Runner Dracular Official E ...

  5. selenuim常用api

    1.通过代码跳转到页面的方法:前提:已安装驱动,并加入到path下 安装ie驱动或火狐驱动的情况: 2.当链接跳转按钮在页面最上方时,用window.scrollTo(0,0);显示在页面最上方后,再 ...

  6. Sql Server中使用特定字符分割字符串

    在T-SQL中我们经常批量操作时都会对字符串进行拆分,可是SQL Server中却没有自带Split函数,所以要自己来实现了.这里将字符串分割以table形式输出 语法如下: SET ANSI_NUL ...

  7. fiddler工具介绍及证书设置

    fiddler 目录 1.Fiddler介绍 01.介绍 02.简单使用 03.结果状态码 介绍完了,接下来就到证书了 2.Fiddler证书设置 这就是fiddler证书设置的全部步骤了 1.Fid ...

  8. 痞子衡嵌入式:MCUXpresso IDE下添加C++源文件进SDK工程编译的方法

    大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是MCUXpresso IDE下添加C++源文件进SDK工程编译的方法. 最近有客户反映在MCUXpresso IDE下的SDK工程里添加 ...

  9. 一道JavaScript的二维数组求平均数的题

    JavaScript中只支持一维数组,但是可以在数组中嵌套数组来创建二维以至于多维的数组.今天下午在看书时候,发现一道感觉比较有意思的题,就是js中如何求二维数组的列之和和行之和,现在就给大家分享下, ...

  10. 规则引擎在IoT的重要性?

    前言 物联网的强大功能主要来自于它使我们能够实时做出更准确的决策的能力,这些在通知.自动化和预测性维护上都有所体现.因此我们需要能对实时数据进行实时响应的工具,答案就是规则引擎.规则引擎可以通过摄取实 ...