原生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…

SRS开源代码框架,协程库state-threads的使用

本章内容解读SRS开源代码框架,无二次开发,以学习交流为目的。 SRS是国人开发的流媒体服务器,C语言开发,本章使用版本:https://github.com/ossrs/srs/tree/5.0release。 目录 SRS协程库ST的使用源码ST协程库测试SrsAut…

Go语言网络库net/http

Go语言网络库net/http Http 协议(Hyper Text Transfer Protocol,超文本传输协议)是一个简单的请求-响应协议,它通常运行在 TCP 之 上。超文本传输协议是互联网上应用最为广泛的一种网络传输协议,所有的WWW文件都必须遵守这个标准。 Http 协…

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;但是有碰撞停止的效果⭐ 文章目录…

渗透测试工程师的一些面试题1(同样适合刚入门的小白看哦~~!)

一、主要面试内容 1.什么是 WebShell? 2.什么是网络钓鱼&#xff1f; 3.你获取网络安全知识途径有哪些&#xff1f; 4.什么是 CC 攻击&#xff1f; 5.Web 服务器被入侵后&#xff0c;怎样进行排查&#xff1f; 6.dll 文件是什么意思&#xff0c;有什么用&#xff1f;DLL…

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…

测试,这是一个测试

这里写目录标题 一级目录二级目录三级目录 一级目录 二级目录 三级目录 测试&#xff0c;这是一个测试

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

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

electron 打开本地文件夹

使用的api为shell.openPath,有些文章会提到shell.openItem&#xff0c;这个方法在electron 9.0后就废弃被openPath替代了。 打开E盘根目录下名为test的文件夹 const { shell } require(electron) shell.openPath(E:\\test)能打开的前提是&#xff0c;E盘根目录下确实有这个文…

【ARM 常见汇编指令学习 6 - bic(位清除), orr(位或), eor(异或)】

文章目录 BIC 指令ORR 位或指令EOR 异或指令 上篇文章&#xff1a;ARM 常见汇编指令学习 5 – arm64汇编指令 wzr 和 xzr BIC 指令 指令格式 bic{条件}{S} Rd&#xff0c;Rn&#xff0c;operand根据operand哪个位为1&#xff0c;清除Rn对应的位&#xff0c;然后将结果存入Rd…