原生js vue react通用的递归函数

c31bb4314f4144bbb11cf5a0a93bec2f.gif

 

🙂博主:锅盖哒
🙂文章核心:原生js vue react通用的递归函数

目录大纲

1.递归函数的由来

 2.代码逻辑


 

1.递归函数的由来

        递归函数的由来可以追溯到数学中的递归概念和数学归纳法。

        在数学中,递归是指通过定义基本情况和递推公式,将一个问题分解为更简单的、与原问题具有相同结构的子问题,并用子问题的解来构建原问题的解。递归的思想在解决一些数学问题时非常有用。

        当计算机科学发展起来后,人们将递归思想应用到程序设计中,形成了递归函数的概念。递归函数是一种能够调用自身的函数。 递归函数的使用可以有效地解决一些需要重复执行相似任务或处理具有递归结构的问题。

递归函数的设计通常包括两部分:

  1. 基本情况(边界条件):定义问题的最简单情况和对应的解,作为递归的终止条件。
  2. 递推公式(递归关系):描述问题和子问题之间的联系,通过递归调用函数本身来解决规模较小的子问题。

         递归函数的执行过程中,每次调用都会创建一个新的函数上下文(包括参数、局部变量等),并将其压入执行栈。递归函数通过不断调用自身,并处理更小规模的子问题,直到达到基本情况为止,然后逐步返回结果,并依次弹出执行栈中的上下文,完成整个递归过程。

递归函数在实际编程中有广泛的应用,例如树的遍历、图的搜索、排列组合、动态规划等领域。但需要注意的是,递归函数的设计要合理,避免无限递归或重复计算,以确保程序的正确性和效率。

 2.代码逻辑

假设下方的数据是我们从接口中获取到的

var temp = [{"id": 1,"pid": 0,"title": "一档","money": "666.00"},{"id": 2,"pid": 0,"title": "二档","money": "1900.00"},{"id": 3,"pid": 1,"title": "一档1级","money": "1800.00"},{"id": 4,"pid": 0,"title": "三档","money": "2000.00"},{"id": 5,"pid": 0,"title": "四档","money": "2200.00"},{"id": 6,"pid": 5,"title": "四档1级","money": "2200.00"},{"id": 7,"pid": 2,"title": "二档1级","money": "3700.00"},{"id": 8,"pid": 4,"title": "三档1级","money": "2000.00"},{"id": 10,"pid": 0,"title": "五档","money": "250.00"},{"id": 12,"pid": 10,"title": "五档1级","money": "10000.00"},{"id": 18,"pid": 1,"title": "一档2级","money": "1800.00"},{"id": 21,"pid": 0,"title": "六档","money": "0.00"},{"id": 24,"pid": 1,"title": "一档3级","money": "1800.00"},{"id": 25,"pid": 2,"title": "二档2级","money": "4100.00"},{"id": 26,"pid": 2,"title": "二档3级","money": "4400.00"},{"id": 27,"pid": 4,"title": "三档2级","money": "2000.00"},{"id": 28,"pid": 4,"title": "三档3级","money": "2000.00"},{"id": 29,"pid": 5,"title": "四档2级","money": "2200.00"},{"id": 30,"pid": 5,"title": "四档3级","money": "2200.00"},{"id": 31,"pid": 2,"title": "1","money": "4100.00"},{"id": 32,"pid": 2,"title": "3","money": "4400.00"},{"id": 38,"pid": 0,"title": "八档","money": "0.00"},{"id": 39,"pid": 10,"title": "轻微","money": "100000000.00"},{"id": 44,"pid": 42,"title": "一级","money": "12323.00"},{"id": 45,"pid": 42,"title": "二级","money": "755.00"},{"id": 47,"pid": 42,"title": "三级","money": "44444.00"},{"id": 49,"pid": 48,"title": "一级","money": "21234.00"},{"id": 50,"pid": 42,"title": "三级","money": "44444.00"},{"id": 52,"pid": 48,"title": "一级","money": "21234.00"},{"id": 57,"pid": 53,"title": "一级","money": "4332.00"},{"id": 61,"pid": 38,"title": "啊","money": "50.00"},{"id": 62,"pid": 1,"title": "1231","money": "1.00"},{"id": 63,"pid": 0,"title": "阿斯顿飞过","money": "0.00"},{"id": 66,"pid": 1,"title": "1","money": "23.00"},{"id": 67,"pid": 2,"title": "123","money": "123.00"},{"id": 70,"pid": 2,"title": "123","money": "123.00"},{"id": 71,"pid": 38,"title": "桀桀桀","money": "0.00"},{"id": 72,"pid": 12,"title": "11","money": "11.00"},{"id": 73,"pid": 12,"title": "11","money": "11.00"},{"id": 77,"pid": 1,"title": "测试一下","money": "10000000.00"},{"id": 78,"pid": 1,"title": "七龙珠1","money": "999.00"},{"id": 79,"pid": 2,"title": "测试","money": "100.00"},{"id": 80,"pid": 1,"title": "测试一下","money": "10000000.00"},{"id": 81,"pid": 0,"title": "我编辑了一下","money": "123123.00"},{"id": 94,"pid": 81,"title": "我添加了一下","money": "4567.00"},{"id": 97,"pid": 96,"title": "测试","money": "0.00"},{"id": 101,"pid": 100,"title": "神奇","money": "1.00"},{"id": 102,"pid": 101,"title": "神奇_yi","money": "1.00"},{"id": 103,"pid": 102,"title": "神奇_er","money": "1.00"},{"id": 104,"pid": 96,"title": "测试","money": "0.00"},{"id": 109,"pid": 105,"title": "测试","money": "1.00"},{"id": 111,"pid": 103,"title": "1","money": "1.00"},{"id": 112,"pid": 111,"title": "11","money": "11.00"},{"id": 113,"pid": 112,"title": "111","money": "111.00"},{"id": 114,"pid": 113,"title": "1112","money": "1112.00"},{"id": 115,"pid": 114,"title": "11122","money": "11122.00"},{"id": 116,"pid": 103,"title": "1","money": "1.00"},{"id": 117,"pid": 4,"title": "1","money": "1.00"},{"id": 118,"pid": 4,"title": "1","money": "1.00"},{"id": 119,"pid": 2,"title": "","money": "0.00"},{"id": 120,"pid": 2,"title": "","money": "0.00"},{"id": 121,"pid": 4,"title": "nihao","money": "789.00"},{"id": 122,"pid": 94,"title": "纳尼?","money": "1111.00"},{"id": 123,"pid": 122,"title": "测试1","money": "1111.00"},{"id": 124,"pid": 123,"title": "???","money": "1111.00"},{"id": 125,"pid": 124,"title": "嗯?","money": "1111.00"},{"id": 126,"pid": 125,"title": "怎么回事?","money": "1111.00"},{"id": 127,"pid": 94,"title": "纳尼?","money": "1111.00"},{"id": 128,"pid": 124,"title": "嗯?","money": "1111.00"},{"id": 129,"pid": 125,"title": "吆西","money": "123.00"},{"id": 130,"pid": 125,"title": "吆西","money": "123.00"},{"id": 131,"pid": 130,"title": "123","money": "123.00"},{"id": 132,"pid": 130,"title": "123","money": "123.00"}]

将数据获取到进行处理

    //处理好的数据let res = getTree(temp,0,[]);console.log(res);//打印观察//处理数据方法function getTree(list,pid,data){//获取所有一级for(let item of list){if(item.pid == pid){data.push(item);}}//获取子级for(let i of data){i.children = [];getTree(list,i.id,i.children);//递归调用if(i.children.length == 0){delete i.children;}}return data;}

效果如下:

044a51aa69ee4e99882bb29e7573e22b.png

本篇博客结束谢谢观看,如有更好的意见请在评论区发出来讨论。

 

3841e1bddc2c48a4916722101e7d7482.gif

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/12309.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

vue+leaflet笔记之地图聚合

vueleaflet笔记之地图聚合 文章目录 vueleaflet笔记之地图聚合开发环境代码简介插件简介与安装使用简介 详细源码(Vue3) 本文介绍了Web端使用Leaflet开发库进行地图聚合查询的一种方法 (底图来源:中科星图),结合Leaflet.markercluster插件能够快速的实现地图聚合查询…

计算机组成原理(2)- 浮点数的存储

1、浮点数的表示方法 假设有以下小数,它表示的十进制数是多少呢? 00000000 00000000 00000000 1010.10101*2^3 1*2^1 1*2^-1 1*2^-3 10.625 1010.1010可以用科学计数法来表示为1.0101010 * 2^3。关于科学计数法再举个例子0.10101用科学计数法表示…

Docker容器基本操作之启动-停止-重启

一、安装启动RabbitMQ容器 此处以rabbitmq容器为例 前提:需要安装配置好docker(设置镜像源、配置阿里云加速)、开启docker,停止(stop)或者禁用(disable)手动解压缩安装的rabbitmq,以防与docker中安装的rabbitmq冲突。 //查看docker状态 systemctl stat…

计算机视觉(四)神经网络与典型的机器学习步骤

文章目录 神经网络生物神经元人工神经元激活函数导数 人工神经网络“层”的通俗理解 前馈神经网络Delta学习规则前馈神经网络的目标函数梯度下降输出层权重改变量 误差方向传播算法误差传播迭代公式简单的BP算例随机梯度下降(SGD)Mini-batch Gradient De…

C++ malloc/free和new/delete

1.malloc和free malloc是开辟内存单元的库函数&#xff1b; malloc不会调用构造函数&#xff1b; free只是释放malloc所开辟的空间&#xff1b; free不会调用析构函数。 #include <iostream> using namespace std; class A { public:A(int i0) { cout << "A&…

滴水逆向三期笔记与作业——02C语言——05 正向基础/05 循环语句

目录 一、缓冲区溢出的HelloWorld二、永不停止的HelloWorld三、基础知识3.1 变量的声明3.2 类型转换&#xff08;一般用于小转大&#xff09;3.3 表达式3.4 语句和程序块3.5 参数与返回值3.6 关系运算符3.7 逻辑运算符&#xff1a;&& || !3.8 单目运算符3.9 三目运算符…

简单工厂模式VS策略模式

简单工厂模式VS策略模式 今天复习设计模式&#xff0c;由于简单工厂模式和策略模式太像了&#xff0c;重新整理梳理一下 简单工厂模式MUL图&#xff1a; 策略模式UML图&#xff1a; 1、简单工厂模式中只管创建实例&#xff0c;具体怎么使用工厂实例由调用方决定&#xff0c…

【unity细节】怎么让物体产生碰撞后不会被撞飞,但是有碰撞停止的效果

&#x1f468;‍&#x1f4bb;个人主页&#xff1a;元宇宙-秩沅 hallo 欢迎 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! 本文由 秩沅 原创 收录于专栏&#xff1a;unity细节和bug ⭐怎么让物体产生碰撞后不会被撞飞&#xff0c;但是有碰撞停止的效果⭐ 文章目录…

python与深度学习(九):CNN和cifar10

目录 1. 说明2. cifar10实战2.1 导入相关库2.2 加载数据2.3 数据预处理2.4 数据处理2.5 构建网络模型2.6 模型编译2.7 模型训练2.8 模型保存2.9 模型评价2.10 模型测试2.11 模型训练结果的可视化 3. cifar10的CNN模型可视化结果图4. 完整代码5. 改进后的代码和结果 1. 说明 本…

OnnxRuntime TensorRT OpenCV::DNN性能对比(YoloV8)实测

1. 前言 之前把ORT的一套推理环境框架搭好了,在项目中也运行得非常愉快,实现了cpu/gpu,fp32/fp16的推理运算,同onnx通用模型在不同推理框架下的性能差异对比贴一下,记录一下自己对各种推理框架的学习状况 YoloV8模型大小 模型名称参数量NANO3.2M...... 2. CPU篇 CPU推理框架性…

CSS中display属性的inline-block导致布局错位问题

HTML部分代码 <div class"header_wrap"><ul><li><a href"#">首页</a></li><li>新闻</li><li>角色</li><li>世界</li><li>漫画</li><li>漫画</li><l…

力扣热门100题之轮转数组【中等】

题目描述 给定一个整数数组 nums&#xff0c;将数组中的元素向右轮转 k 个位置&#xff0c;其中 k 是非负数。 示例 1: 输入: nums [1,2,3,4,5,6,7], k 3 输出: [5,6,7,1,2,3,4] 解释: 向右轮转 1 步: [7,1,2,3,4,5,6] 向右轮转 2 步: [6,7,1,2,3,4,5] 向右轮转 3 步: [5,6…

libcomposite: Unknown symbol config_group_init (err 0)

加载libcomposite.ko 失败 问题描述 如图&#xff0c;在做USB OTG 设备模式的时候需要用到libcomposite.ko驱动&#xff0c;加载失败了。 原因&解决方法 有一个依赖叫configfs.ko的驱动没有安装。可以从内核代码的fs/configfs/configfs.ko中找到这个驱动。先加载confi…

王道数据结构-代码实操1(全注解版)

#include<stdio.h>void loveyou(int n){ // 传入参数类型为int型&#xff0c;在此函数中表示为n&#xff1b;返回值类型为void&#xff0c;即没有返回值&#xff1b; int i1; //定义了一个整数型变量i&#xff0c;且只在loveyou函数中有用&#xff1b;while(i…

QT第二讲

思维导图 完善登录框&#xff0c;当登录成功时&#xff0c;关闭登录界面&#xff0c;跳转到新的界面中 loginscuueed.h #ifndef LOGINSUCCEED_H #define LOGINSUCCEED_H#include <QWidget>namespace Ui { class loginSucceed; }class loginSucceed : public QWidget {…

PostgreSQL-Centos7源码安装

卸载服务器上的pg13 本来是想删除原来的postgis重新源码安装就行,但是yum安装的PostgreSQL不能直接使用,会提示以下问题: 之前服务是用yum安装的,现在需要删除 -- 删除数据的postgis插件 drop extension postgis; drop extension postgis cascade;删除相关安装包 # 查询…

Redis网络模型

文章目录 Redis网络模型用户空间与内核空间阻塞IO非阻塞IOIO多路复用事件通知机制web服务流程 信号驱动IO异步IO异步与同步 网络模型 Redis网络模型 用户空间与内核空间 服务器大多采用的是Linux系统&#xff0c;使用的应用都是需要通过Linux内核与硬件交互。 为了避免用户应…

F5 LTM 知识点和实验 4-持久化

第四章:持久化 持久化: 大多数应用都是有状态的,比如,使用一个购物网站,最重要的是用户在放入一个商品之后,刷新网页要能继续看到购物车里的东西,这就需要请求报文发到同一个后端服务器上,持久化就能完成这个功能。 持久化支持一下几种场景: 源地址目标地址SSLSIPH…

KNN模型进行分类和回归任务

KNN工作原理 “近朱者赤&#xff0c;近墨者黑”可以说是KNN的工作原理。整个计算过程分为三步&#xff1a;1:计算待分类物体与其他物体之间的距离&#xff1b;2:统计距离最近的K个邻居&#xff1b;3:对于K个最近的邻居&#xff0c;它们属于哪个分类最多&#xff0c;待分类物体就…

聊聊STM32的基本定时器

STM32 的基本定时器&#xff08;Basic Timer&#xff09;是一种简单的定时器模块&#xff0c;用于生成基于时钟频率的定时中断。它可以用于实现各种定时和计时功能&#xff0c;例如延时、频率测量、PWM 生成等。 基本定时器通常由一个 16 位的自由运行计数器和一个预分频器组成…