JS - 递归实现无限分类
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>无限分类</title>
</head>
<body>
<script>
window.onload = function () {
console.log(deeploop(0));
}; /**
* 根据 id 查询到数据并将数据存储到数组 返回
*/
var findById = function (id) {
let child = [];
arr.forEach((value) => {
if (value.pid == id) {
child.push(value);
}
});
return child;
}; /**
* 递归查询 到数据并将数据存储到数组 返回
*/
var deeploop = function (id) {
let dataArr = findById(id);
if (dataArr.length <= 0) {
return null;
} else {
dataArr.forEach((value) => {
if (deeploop(value.id) != null) {
value["children"] = deeploop(value.id);
}
});
}
return dataArr;
}; /**
* 每一个分类都有记录它的父级id (pid 意为 parent id)
* 当为顶级分类时，它的父级id为0
*/
var arr = [
{ id: 1, name: "计算机专业", pid: 0 },
{ id: 2, name: "软件专业", pid: 1 },
{ id: 3, name: "前端", pid: 2 },
{ id: 33, name: "html", pid: 3 },
{ id: 34, name: "css", pid: 3 },
{ id: 4, name: "后端", pid: 2 },
{ id: 41, name: "php", pid: 4 },
{ id: 42, name: "java", pid: 4 },
{ id: 5, name: "动漫专业", pid: 0 },
{ id: 51, name: "2d动漫", pid: 5 },
{ id: 511, name: "插画设计", pid: 51 },
{ id: 52, name: "3d动漫", pid: 5 },
];
</script>
</body>
</html>
JS - 递归实现无限分类的更多相关文章
- TreeView递归绑定无限分类数据
TreeView递归绑定无限分类数据 实现一个动态绑定,无限级分类数据时,需要将数据绑定到TreeView控件,分类表的结构是这样的: 字段 类型 Id int ParentId int Name N ...
- php不用递归完成无限分类，从表设计入手完整演示过程
无限分类是什么就不废话了,可以用递归实现,但是递归从数据库取东西用递归效率偏低,如果从表设计入手,就很容易做到网站导航的实现,下面是某论坛导航,如下图 网上无限分类大多不全面,今天我会从设计表开始, ...
- java递归、js递归，无限极分类菜单表
java-json import com.alibaba.fastjson.JSONObject; import java.util.ArrayList; import java.util.List; ...
- JS当中的无限分类递归树
列表转换成树形结构方法定义: //javascript 树形结构 function toTree(data) { // 删除 所有 children,以防止多次调用 data.forEach(func ...
- php递归获取无限分类菜单
从数据库获取所有菜单信息,需要根据id,pid字段获取主菜单及其子菜单,以及子菜单下的子菜单,可以通过函数递归来实现. <?php class Menu { public $menu = arr ...
- 后台树状菜单，js实现递归无限分类
//新闻类别管理 public function new_classify() { $arr = M('news_classify')->where("fid = 0")-& ...
- Think PHP递归重新排序无限极子分类数组（递归无限极分类）
Think PHP递归重新排序无限极子分类数组 // 递归重新排序无限极子分类数组 function recursive($array,$pid=0,$level=0){ $arr = array() ...
- php不使用递归实现无限极分类
无限极分类常用的是递归,但是比较不好理解,其实可以用数据库path,pid两个字段的设计来实现无限分类的功能 1.数据库设计 通过上图可以看出pid就是该栏目的父id,而path = 父path+pi ...
- php递归无限分类、根据子类获取所有顶类
//递归无限分类树 public static function diGui($data, $pid) { $arr = collect([]); if (empty($data)) { return ...
- MySql无限分类数据结构--预排序遍历树算法
MySql无限分类数据结构--预排序遍历树算法 无限分类是我们开发中非常常见的应用,像论坛的的版块,CMS的类别,应用的地方特别多. 我们最常见最简单的方法就是在MySql里ID ,parentID, ...
随机推荐
- ASR项目实战-任务队列在文件转写特性中的应用
转写时长超出60秒的语音文件,业界的竞品通常会使用创建异步转写任务的方式来提供支持. 一个简单.直接的实现方案,即: 网关服务接收到来自客户的转写请求时,将任务信息持久化至任务队列中. 由算法服务的实 ...
- Python——第五章：pickle模块
序列化:把对象转化成二进制字节 反序列化:把二进制字节转化回对象 Pickle模块的常见用法: Pickle.dunps 把对象(数据)转化成字节 Pickle.loads 把字节转化回对象( ...
- DVWA Brute Force（暴力破解）全等级
Brute Force(暴力破解) 目录: Brute Force(暴力破解) 1.Low 2.Medium 3.High 方法1--Burp爆破 方法2--Python脚本爆破 4.Impossib ...
- 微信小程序数组
常用函数 concat(): 连接两个或多个数组,返回连接后的新数组. 示例:const arr1 = [1, 2, 3]; const arr2 = [4, 5, 6]; const arr3 = ...
- picker组件增加搜索item条目的功能
picker组件顶部有搜索框,能搜索条目,如果条目很多的时候,上下翻很麻烦了,而且不容易找到,可以先全查,然后js搜索 wxml <button bindtap="openFlag&q ...
- CNCF首个云原生多云容器编排项目Karmada正式晋级孵化
文分享自华为云社区<CNCF首个云原生多云容器编排项目Karmada正式晋级孵化]>,作者:云容器大未来. 近日,云原生计算基金会(CNCF)宣布,CNCF技术监督委员会(TOC)已投票通 ...
- 物联网常见协议之Amqp协议及使用场景解析
摘要:本文围绕AMQP协议,为大家详细解析AMQP协议.核心技术亮点.多协议之间的对比以及使用实践. 本文分享自华为云社区<物联网常见协议之Amqp协议及使用场景解析>,作者:张俭. 引言 ...
- WeLink的杀手锏和远程办公软件的另一面
摘要:看WeLink如何从内到外,为广大企业用户带来数字化办公转型上的突破? 本文分享自华为云社区<[大厂内参]第11期:WeLink的杀手锏和远程办公软件的另一面>,作者: 华为云社区精 ...
- 火山引擎DataTester分享：A/B实验中常见的8个错误
火山引擎DataTester是科学可信的A/B测试与智能优化平台,源自字节跳动长期沉淀,能够深度耦合推荐.广告.搜索.UI.产品功能等多种行业场景需求,为业务增长.转化.产品迭代,运营提效等各环节提供 ...
- 火山引擎 DataTester：抖音的设计团队是如何用 A/B 测试实现高效优化的？
更多技术交流.求职机会,欢迎关注字节跳动数据平台微信公众号,回复[1]进入官方交流群 对 C 端产品而言,产品的每一个细节设置都或多或少影响着用户的产品体验,本文介绍字节跳动的 A/B 实验文化的同时 ...