建设电子商务网站需要什么,学生网站建设总结报告,wordpress 查看更多,最好的网站开发系统目录
前言
一、递归函数的由来
二、功能实现
1.后台数据
2.处理数据
3.整体代码
总结 #x1f642;博主#xff1a;冰海恋雨. #x1f642;文章核心#xff1a;【前端开发】JS Vue React中的通用递归函数
前言
大家好#xff0c;今天和大家分享一下在前端开发中j…
目录
前言
一、递归函数的由来
二、功能实现
1.后台数据
2.处理数据
3.整体代码
总结 博主冰海恋雨. 文章核心【前端开发】JS Vue React中的通用递归函数
前言
大家好今天和大家分享一下在前端开发中jsvuereact的通用递归方法。
递归是指一个函数在执行过程中调用自身的行为。通过递归可以将一个复杂的问题拆解成多个子问题并通过解决子问题来解决原始问题。递归在编程中非常常见特别是在解决树型结构或者需要进行重复操作的情况下。
一、递归函数的由来
递归函数的由来可以追溯到数学中的递归概念和数学归纳法。 在数学中递归是指通过定义基本情况和递推公式将一个问题分解为更简单的、与原问题具有相同结构的子问题并用子问题的解来构建原问题的解。递归的思想在解决一些数学问题时非常有用。当计算机科学发展起来后人们将递归思想应用到程序设计中形成了递归函数的概念。递归函数是一种能够调用自身的函数。 递归函数的使用可以有效地解决一些需要重复执行相似任务或处理具有递归结构的问题。 递归函数的设计通常包括两部分 基本情况边界条件定义问题的最简单情况和对应的解作为递归的终止条件。 递推公式递归关系描述问题和子问题之间的联系通过递归调用函数本身来解决规模较小的子问题。
递归函数的执行过程中每次调用都会创建一个新的函数上下文包括参数、局部变量等并将其压入执行栈。递归函数通过不断调用自身并处理更小规模的子问题直到达到基本情况为止然后逐步返回结果并依次弹出执行栈中的上下文完成整个递归过程。
递归函数在实际编程中有广泛的应用例如树的遍历、图的搜索、排列组合、动态规划等领域。但需要注意的是递归函数的设计要合理避免无限递归或重复计算以确保程序的正确性和效率。
二、功能实现
1.后台数据
下面的数据是一个假数据相当于接口数据大家写的时候接口有数据就直接获取就好。 数据结构 每个元素都具有 id、pid、title 和 money 属性其中 id 是每个元素的唯一标识pid 是父级元素的 idtitle 是该元素的标题money 是一些金额。 var temp [{id: 1,pid: 0,title: 一档,money: 666.00
},
{id: 2,pid: 0,title: 二档,money: 1900.00
},
{id: 9,pid: 1,title: 一档1级,money: 1800.00
},
{id: 3,pid: 0,title: 三档,money: 2000.00
},
{id: 4,pid: 0,title: 四档,money: 2200.00
},
{id: 6,pid: 4,title: 四档1级,money: 2200.00
},
{id: 7,pid: 2,title: 二档1级,money: 3700.00
},
{id: 8,pid: 3,title: 三档1级,money: 2000.00
}
]2.处理数据
递归构建树 函数 getTree(list, pid, data) 被调用时它的目标是在 data 数组中构建一个树状结构。参数 list 是原始数据数组pid 是当前节点的父级 IDdata 是用来存储构建的树状结构的数组。
//处理好的数据
let res getTree(temp,0,[]);
console.log(res); //控制台打印先获取到所有的数据 获取一级节点 使用 for…of 循环遍历原始数据 list查找所有父级 ID 等于当前 pid 的元素然后将这些元素添加到 data 数组中这些元素就成为了一级节点。
获取子级节点 对于每个一级节点使用 for…of 循环遍历 data为每个一级节点添加一个空数组 children然后再次调用 getTree 函数将当前一级节点的 id 作为新的 pid并传入该一级节点的 children 数组。
//处理数据方法
function getTree(list,pid,data){//获取所有一级for(let item of list){if(item.pid pid){ata.push(item);}}return data;
}获取二级及三级数据 删除空的 children 属性 在每个一级节点的循环中如果它没有子级节点即 children 数组为空则删除该属性以使最终结果更清晰。
//获取子级for(let i of data){i.children [];getTree(list,i.id,i.children);//递归调用if(i.children.length 0){delete i.children;}}返回树状数据结构 函数返回构建好的树状结构即 data 数组其中每个元素都带有 children 属性表示它的子级节点。 日志输出 最后你使用 console.log(res) 将构建好的树状结构打印到控制台。
3.整体代码 //处理好的数据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;}了解更多原生js vue react通用的递归函数-CSDN博客
总结
需要注意的是递归函数在实际应用中需要注意性能和空间占用不当的使用可能会导致栈溢出等问题。在编写递归函数时要确保问题可以通过有限次数的递归调用得到解决并且考虑如何优化递归算法避免不必要的重复计算。 以上就是本章的全部内容了希望这篇文章能够帮助到您感谢您的阅读。
