JS的有关递归的知识点(数据无限级联的实现）

已于 2023-06-01 10:25:39 修改
阅读量338 收藏 1
点赞数
文章标签： javascript
于 2020-06-16 18:12:43 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/github_39427902/article/details/106792631
版权 
<!DOCTYPE html>

<html lang="en">



<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>



<body>



</body>

<script>

const intention_common = {

    "data": {

        "list": [{

            "id": 61,

            "name": "教育",

            "parent_id": 0,

            "parent_name": "",

            "city_level": "CITY_LEVEL_NONE"

        }, {

            "id": 15,

            "name": "早教与学前教育",

            "parent_id": 61,

            "parent_name": "教育",

            "city_level": "CITY_LEVEL_NONE"

        }, {

            "id": 3,

            "name": "中小学教育",

            "parent_id": 61,

            "parent_name": "教育",

            "city_level": "CITY_LEVEL_NONE"

        }, {

            "id": 88,

            "name": "小学辅导",

            "parent_id": 3,

            "parent_name": "中小学教育",

            "city_level": "CITY_LEVEL_NONE"

        }, {

            "id": 81,

            "name": "初中辅导",

            "parent_id": 3,

            "parent_name": "中小学教育",

            "city_level": "CITY_LEVEL_NONE"

        }, {

            "id": 105,

            "name": "高中辅导",

            "parent_id": 3,

            "parent_name": "中小学教育",

            "city_level": "CITY_LEVEL_NONE"

        }, {

            "id": 18,

            "name": "职业教育",

            "parent_id": 61,

            "parent_name": "教育",

            "city_level": "CITY_LEVEL_NONE"

        }, {

            "id": 327,

            "name": "IT培训与考试",

            "parent_id": 18,

            "parent_name": "职业教育",

            "city_level": "CITY_LEVEL_NONE"

        }, {

            "id": 582,

            "name": "UI设计",

            "parent_id": 327,

            "parent_name": "IT培训与考试",

            "city_level": "CITY_LEVEL_NONE"

        }, {

            "id": 442,

            "name": "编程语言",

            "parent_id": 327,

            "parent_name": "IT培训与考试",

            "city_level": "CITY_LEVEL_NONE"

        }, {

            "id": 511,

            "name": "企业员工培训",

            "parent_id": 18,

            "parent_name": "职业教育",

            "city_level": "CITY_LEVEL_NONE"

        }, {

            "id": 594,

            "name": "MBA\/EMBA",

            "parent_id": 511,

            "parent_name": "企业员工培训",

            "city_level": "CITY_LEVEL_NONE"

        }, {

            "id": 330,

            "name": "医学资格培训与考试",

            "parent_id": 18,

            "parent_name": "职业教育",

            "city_level": "CITY_LEVEL_NONE"

        }, {

            "id": 338,

            "name": "教师资格考试",

            "parent_id": 18,

            "parent_name": "职业教育",

            "city_level": "CITY_LEVEL_NONE"

        }, {

            "id": 595,

            "name": "财经考试",

            "parent_id": 18,

            "parent_name": "职业教育",

            "city_level": "CITY_LEVEL_NONE"

        }, {

            "id": 318,

            "name": "会计师资格考试",

            "parent_id": 595,

            "parent_name": "财经考试",

            "city_level": "CITY_LEVEL_NONE"

        }, {

            "id": 376,

            "name": "司法考试",

            "parent_id": 18,

            "parent_name": "职业教育",

            "city_level": "CITY_LEVEL_NONE"

        }, {

            "id": 399,

            "name": "建造师资格考试",

            "parent_id": 18,

            "parent_name": "职业教育",

            "city_level": "CITY_LEVEL_NONE"

        }, {

            "id": 98,

            "name": "驾驶培训与考试",

            "parent_id": 18,

            "parent_name": "职业教育",

            "city_level": "CITY_LEVEL_NONE"

        }, {

            "id": 492,

            "name": "汽修培训与考试",

            "parent_id": 18,

            "parent_name": "职业教育",

            "city_level": "CITY_LEVEL_NONE"

        }, {

            "id": 24,

            "name": "学历教育",

            "parent_id": 61,

            "parent_name": "教育",

            "city_level": "CITY_LEVEL_NONE"

        }, {

            "id": 313,

            "name": "四六级英语考试",

            "parent_id": 24,

            "parent_name": "学历教育",

            "city_level": "CITY_LEVEL_NONE"

        }, {

            "id": 469,

            "name": "考研英语考试",

            "parent_id": 24,

            "parent_name": "学历教育",

            "city_level": "CITY_LEVEL_NONE"

        }, {

            "id": 520,

            "name": "考研辅导",

            "parent_id": 24,

            "parent_name": "学历教育",

            "city_level": "CITY_LEVEL_NONE"

        }, {

            "id": 155,

            "name": "非学历教育",

            "parent_id": 61,

            "parent_name": "教育",

            "city_level": "CITY_LEVEL_NONE"

        }, {

            "id": 460,

            "name": "在职教育",

            "parent_id": 155,

            "parent_name": "非学历教育",

            "city_level": "CITY_LEVEL_NONE"

        }, {

            "id": 414,

            "name": "成人教育",

            "parent_id": 155,

            "parent_name": "非学历教育",

            "city_level": "CITY_LEVEL_NONE"

        }, {

            "id": 75,

            "name": "语言培训",

            "parent_id": 61,

            "parent_name": "教育",

            "city_level": "CITY_LEVEL_NONE"

        }, {

            "id": 319,

            "name": "少儿英语",

            "parent_id": 75,

            "parent_name": "语言培训",

            "city_level": "CITY_LEVEL_NONE"

        }, {

            "id": 216,

            "name": "青少年英语",

            "parent_id": 75,

            "parent_name": "语言培训",

            "city_level": "CITY_LEVEL_NONE"

        }, {

            "id": 248,

            "name": "成人英语",

            "parent_id": 75,

            "parent_name": "语言培训",

            "city_level": "CITY_LEVEL_NONE"

        }, {

            "id": 303,

            "name": "其他小语种",

            "parent_id": 75,

            "parent_name": "语言培训",

            "city_level": "CITY_LEVEL_NONE"

        }, {

            "id": 349,

            "name": "日语",

            "parent_id": 303,

            "parent_name": "其他小语种",

            "city_level": "CITY_LEVEL_NONE"

        }, {

            "id": 375,

            "name": "韩语",

            "parent_id": 303,

            "parent_name": "其他小语种",

            "city_level": "CITY_LEVEL_NONE"

        }, {

            "id": 96,

            "name": "出国留学\/移民",

            "parent_id": 61,

            "parent_name": "教育",

            "city_level": "CITY_LEVEL_NONE"

        }, {

            "id": 312,

            "name": "雅思托福",

            "parent_id": 96,

            "parent_name": "出国留学\/移民",

            "city_level": "CITY_LEVEL_NONE"

        }, {

            "id": 877,

            "name": "兴趣教育",

            "parent_id": 61,

            "parent_name": "教育",

            "city_level": "CITY_LEVEL_NONE"

        }, {

            "id": 881,

            "name": "科技与编程",

            "parent_id": 877,

            "parent_name": "兴趣教育",

            "city_level": "CITY_LEVEL_NONE"

        }, {

            "id": 197,

            "name": "旅游",

            "parent_id": 0,

            "parent_name": "",

            "city_level": "CITY_LEVEL_NONE"

        }]

    },

    "code": 0,

    "message": "",

    "message_cn": ""

}

    function toTreeData(data, pid) {

        function tree(id) {

            let arr = []

            data.filter(item => {

                return item.parent_id === id;

            }).forEach(item => {

                let {...a} = item;

                a.children = tree(item.id);

                arr.push(a)

            })

            return arr.length > 0 ? arr : []

        }

        return tree(pid) // 第一级节点的父id，是null或者0，视情况传入

    }

    var tmp = toTreeData(intention_common.data.list, 0);

    console.log(tmp);

</script>



</html>

https://www.cnblogs.com/song-zmin/p/12808786.html

旧识君
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JS实现树型级联选择
08-04
用JS实现树型结构的级联选择..类似XP的资源管理器.
基于vue与elementui组件中talbe实现的无限级联treetable
08-10
5. **处理无限级联**：要实现无限级联，我们需要在获取数据时处理每个节点的子节点。如果一个节点有子节点，我们可以递归调用数据获取方法。此外，还需要监听`expand-change`事件来控制展开和折叠。 6. **优化性能*...
js递归无限级联
以爱护甲,爱满枫林。
11-23 652
依赖jquery 可根据配置参数（方向，样式，标签名称）得到自己想要 select.js (function ($) { $.fn.select = function (url, option, callback) { var setting = { el: $("body"), data: null, labels: [], isOpenSearch: true,
js 嵌套联级数组的递归
qq_42552455的博客
09-22 969
1、根据子级标识获取其所在的对象 //调用 this.getTreeObjByUrl(嵌套数组data, url); // 根据url找到其相应的tree位置 getTreeObjByUrl(treeData, url) { for (let item of treeData) { if (item.children && item.url != url) { this.getTreeObjByUrl(item.childre
javascript处理树形结构数据（级联选择器，省市县联动）
qq_43955202的博客
01-18 2014
后端返回给我们数据： const dataList = [ { id: 1, pid: 0, name: '服装类', }, { id: 2, pid: 0, name: '手机类', }, { id: 3, pid: 0, name: '食品类', }, { id: 4, pid: 1, name: '连衣裙', }, { id: 5, pid: 2,
JavaScript级联链表
知而好问，然后能才
05-06 1713
级联链表：数据驱动
无限级级联菜单源码，asp.net，ajax
03-04
以下是关于这个主题的详细知识点： 1. **无限级级联菜单**：这是一种菜单系统，能够展示多层级的数据，且层级数量不受限制。通常在导航或选择树状结构数据时使用，如组织结构、产品分类等。用户可以逐级展开子菜单...
纯JS+HTML写的checkBox Tree 级联选中 好用无BUG
07-06
在该实现中，主要涉及以下几个关键知识点： 1. **HTML结构**： - 树形结构通常由`<ul>`和`<li>`元素构建，每个节点包含一个`<input type="checkbox">`和相应的标签文本。 - 通过CSS样式和JavaScript事件处理来...
asp+access 无限级联
07-24
在"多级级联ASP"这个文件中，可能包含以下关键知识点： 1. **数据库设计**：如何创建一个适合存储无限级联数据的数据库结构，通常会有一个类别表，包含类别ID、父类别ID和类别名称等字段。 2. **ASP与数据库交互**...
react级联选择器/支持多选/单选
最新发布
01-31
下面将详细解释这个组件的核心知识点： 1. **React组件化开发**：React.js 是一个用于构建用户界面的JavaScript库，其核心思想是组件化。在这里，级联选择器是一个自定义组件，它封装了选择逻辑和UI渲染，可以复用...
JS多级联动下拉列表(不限级数)
01-10
oselect.js 原生JS写的多级联动下拉列表，联动级数可以自定义，不限级数。可用作省、市、区联动，或其他的多级分类选择。使用方法请参考demo。
JavaScript实现JSON合并操作示例【递归深度合并】
12-11
本文实例讲述了JavaScript实现JSON合并操作。分享给大家供大家参考，具体如下： 为什么我会想到写这几行代码 在实际工作中，我们会使用许多或自主开发或第三方的工具，有些工具的配置文件相当细节，使用频率低倒也罢了，使用频率高的话必然造成很多代码冗余。所以我都会对这些工具做二次封装，把不经常改动的配置给予默认值。如果需要改动，传入新的配置覆盖原来的配置即可。 起初我以为这是一项很简单的需求 var json1 = { // 固定的配置 a: 1, b: 2, c: 3, } var json2 = { // 作为参数传入的配置 a: 11, d: 14, } json3 =
JS多级菜单联动
11-22
用纯Javascript实现的多级(三级以上)菜单联动，非常不错，代码很少，很简单
通过递归实现多级联动
weixin_57128596的博客
07-29 523
主要是子菜单添加到主节点这个方法，并且返回主节点首先需要在主节点设置children集合，然后遍历所有数据，找到与父菜单相对应的菜单，并且设置层级level，判断父菜单children为null后，将满足条件的子菜单加入父中。获取全部菜单用list返回是因为后面还是要添加父菜单的，所以得用list，不好直接返回父菜单，思路不好找，当然也许。其实很简单，也是找当前父菜单的子菜单，然后对子菜单进行递归就好了，所有的id添加到集合中，最后delete行删除。我们的id是当前菜单，pid是父菜单。...
递归构建级联关系 -- 分级处理
weixin_30613727的博客
07-19 224
import java.util.ArrayList; import java.util.List; import org.apache.commons.lang.StringUtils; import com.xiaoyu.test.model.Group; import com.ecfund.system.utils.TreeUtils; /** * @Title:...
关于JS中返回上一级
热门推荐
蓝_蓝的博客
02-23 1万+
返回上一级，有两种情况，第一：刷新上一个页面；第二：不刷新上一个页面。首先是，刷新上一个页面，不保留上一个页面的任何操作；（1）&lt;a href="JavaScript:history.go(-1)"&gt;返回上一级&lt;/a&gt;；（2）使用require进行操作。代码如下：// returnLeve.js是返回上一级的js,// returnLeve是使用require进行封装的一个...
通过递归的方式数组每一层加入层级属性
qq_43568811的博客
05-28 1765
var level = 0;//层级从零开始，每调用一次 层级数+1 var forData = function(arr, level) { level += 1 for(var i = 0; i < arr.length; i++) { var obj = arr[i]; obj.level = level if(obj.apprentice) { f...
自己常用的一个递归代码片段及获取级联代码
不积跬步无以至千里，不积小流无以成江河
02-27 283
1、查询出所有的权限 2、创建一个集合存放所有的一级菜单 1、 遍历一级菜单 //递归 for (MerPermissionVo pid : parentList) { List<MerPermissionVo> childList = dgPermissionList(allList, pid.getId()); ...
JS数组递归——构建 element 级联选择器树形数据
FungLeo's Blog
02-20 4238
JS数组递归——构建 element 级联选择器树形数据 通常，我们前端在开发管理后台的时候，会选择 vue+element 这样的技术栈去实现。但我们后端给的数据格式通常并不符合 element 的参数数据要求。比如，级联选择器 cascader 的参数数据格式如下： [{ "label": "第一级", "value": 2, "children": [{ "label": "第二级...
理解递归：从数据结构到算法实现
本文将深入探讨递归的概念、设计以及在实际问题中的应用，特别是与数据结构相关的递归算法。 首先，递归可以定义为：在定义一个过程或函数时，该过程或函数内部包含对自身的调用。直接递归指的是函数直接调用自身，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值