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

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

1.递归函数的由来


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

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

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

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

基本情况(边界条件):定义问题的最简单情况和对应的解,作为递归的终止条件。

递推公式(递归关系):描述问题和子问题之间的联系,通过递归调用函数本身来解决规模较小的子问题。

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

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


2.代码逻辑


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

数据结构: 每个元素都具有 idpidtitlemoney 属性,其中 id 是每个元素的唯一标识,pid 是父级元素的 idtitle 是该元素的标题,money 是一些金额。


      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"
      }]

首先将拿到的数据进行处理

递归构建树: 函数 getTree(list, pid, data) 被调用时,它的目标是在 data 数组中构建一个树状结构。参数 list 是原始数据数组,pid 是当前节点的父级 ID,data 是用来存储构建的树状结构的数组。

    //处理好的数据
    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){
                data.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) 将构建好的树状结构打印到控制台。

逻辑整体代码

    //处理好的数据
    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;
    }


效果如下: 

155ccd77a5cf4ea39393d8c285c206a8.png

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

相关文章
|
7月前
|
编解码 前端开发 JavaScript
js react antd 实现页面低分变率和高分变率下字体大小自适用,主要是配置antd
在React中结合Ant Design与媒体查询,通过less变量和响应式断点动态调整`@font-size-base`,实现多分辨率下字体自适应,提升跨设备体验。
345 2
|
10月前
|
机器学习/深度学习 JavaScript 前端开发
JS进阶教程:递归函数原理与篇例解析
通过对这些代码示例的学习,我们已经了解了递归的原理以及递归在JS中的应用方法。递归虽然有着理论升华,但弄清它的核心思想并不难。举个随手可见的例子,火影鸣人做的影分身,你看到的都是同一个鸣人,但他们的行为却能在全局产生影响,这不就是递归吗?雾里看花,透过其间你或许已经深入了递归的魅力之中。
383 19
|
前端开发 JavaScript NoSQL
使用 Node.js、Express 和 React 构建强大的 API
本文详细介绍如何使用 Node.js、Express 和 React 构建强大且动态的 API。从开发环境搭建到集成 React 前端,再到利用 APIPost 高效测试 API,适合各水平开发者。内容涵盖 Node.js 运行时、Express 框架与 React 库的基础知识及协同工作方式,还涉及数据库连接和前后端数据交互。通过实际代码示例,助你快速上手并优化应用性能。
|
JavaScript
JS实现多条件搜索函数
JS封装的多条件搜索
|
JavaScript 前端开发
JavaWeb JavaScript ③ JS的流程控制和函数
通过本文的详细介绍,您可以深入理解JavaScript的流程控制和函数的使用,进而编写出高效、可维护的代码。
293 32
|
JavaScript 前端开发 测试技术
盘点原生JavaScript中直接触发事件的方式
本文全面探讨了原生JavaScript中触发事件的多种方式,包括`dispatchEvent`、`Event`构造函数、`CustomEvent`构造器、直接调用事件处理器以及过时的`createEvent`和`initEvent`方法。通过技术案例分析,如模拟点击事件、派发自定义数据加载事件和实现提示框系统,帮助开发者掌握这些方法在实际开发中的应用,提升灵活性与兼容性。
552 3
|
JavaScript 前端开发 Java
详解js柯里化原理及用法,探究柯里化在Redux Selector 的场景模拟、构建复杂的数据流管道、优化深度嵌套函数中的精妙应用
柯里化是一种强大的函数式编程技术,它通过将函数分解为单参数形式,实现了灵活性与可复用性的统一。无论是参数复用、延迟执行,还是函数组合,柯里化都为现代编程提供了极大的便利。 从 Redux 的选择器优化到复杂的数据流处理,再到深度嵌套的函数优化,柯里化在实际开发中展现出了非凡的价值。如果你希望编写更简洁、更优雅的代码,柯里化无疑是一个值得深入学习和实践的工具。从简单的实现到复杂的应用,希望这篇博客能为你揭开柯里化的奥秘,助力你的开发之旅! 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一
|
前端开发 JavaScript 测试技术
React 中集成 Chart.js 图表库
本文介绍了如何在 React 项目中集成 Chart.js 创建动态图表,涵盖基础概念、安装步骤、代码示例及常见问题解决方法,帮助开发者轻松实现数据可视化。
484 11
|
监控 前端开发 JavaScript
React 静态网站生成工具 Next.js 入门指南
【10月更文挑战第20天】Next.js 是一个基于 React 的服务器端渲染框架,由 Vercel 开发。本文从基础概念出发,逐步探讨 Next.js 的常见问题、易错点及解决方法,并通过具体代码示例进行说明,帮助开发者快速构建高性能的 Web 应用。
971 10
|
资源调度 前端开发 数据可视化
构建高效的数据可视化仪表板:D3.js与React的融合之道
【10月更文挑战第25天】在数据驱动的时代,将复杂的数据集转换为直观、互动式的可视化表示已成为一项至关重要的技能。本文深入探讨了如何结合D3.js的强大可视化功能和React框架的响应式特性来构建高效、动态的数据可视化仪表板。文章首先介绍了D3.js和React的基础知识,然后通过一个实际的项目案例,详细阐述了如何将两者结合使用,并提供了实用的代码示例。无论你是数据科学家、前端开发者还是可视化爱好者,这篇文章都将为你提供宝贵的洞见和实用技能。
482 5