<!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 - 递归实现无限分类的更多相关文章

  1. TreeView递归绑定无限分类数据

    TreeView递归绑定无限分类数据 实现一个动态绑定,无限级分类数据时,需要将数据绑定到TreeView控件,分类表的结构是这样的: 字段 类型 Id int ParentId int Name N ...

  2. php不用递归完成无限分类,从表设计入手完整演示过程

    无限分类是什么就不废话了,可以用递归实现,但是递归从数据库取东西用递归效率偏低,如果从表设计入手,就很容易做到网站导航的实现,下面是某论坛导航,如下图 网上无限分类大多不全面,今天我会从设计表开始, ...

  3. java递归、js递归,无限极分类菜单表

    java-json import com.alibaba.fastjson.JSONObject; import java.util.ArrayList; import java.util.List; ...

  4. JS当中的无限分类递归树

    列表转换成树形结构方法定义: //javascript 树形结构 function toTree(data) { // 删除 所有 children,以防止多次调用 data.forEach(func ...

  5. php递归获取无限分类菜单

    从数据库获取所有菜单信息,需要根据id,pid字段获取主菜单及其子菜单,以及子菜单下的子菜单,可以通过函数递归来实现. <?php class Menu { public $menu = arr ...

  6. 后台树状菜单,js实现递归无限分类

    //新闻类别管理 public function new_classify() { $arr = M('news_classify')->where("fid = 0")-& ...

  7. Think PHP递归重新排序无限极子分类数组(递归无限极分类)

    Think PHP递归重新排序无限极子分类数组 // 递归重新排序无限极子分类数组 function recursive($array,$pid=0,$level=0){ $arr = array() ...

  8. php不使用递归实现无限极分类

    无限极分类常用的是递归,但是比较不好理解,其实可以用数据库path,pid两个字段的设计来实现无限分类的功能 1.数据库设计 通过上图可以看出pid就是该栏目的父id,而path = 父path+pi ...

  9. php递归无限分类、根据子类获取所有顶类

    //递归无限分类树 public static function diGui($data, $pid) { $arr = collect([]); if (empty($data)) { return ...

  10. MySql无限分类数据结构--预排序遍历树算法

    MySql无限分类数据结构--预排序遍历树算法 无限分类是我们开发中非常常见的应用,像论坛的的版块,CMS的类别,应用的地方特别多. 我们最常见最简单的方法就是在MySql里ID ,parentID, ...

随机推荐

  1. 『Flutter』开发环境搭建

    1.前言 大家好,我是 BNTang,今天给大家介绍一下 Flutter 的开发环境搭建.在之前我已经将 Dart 的基本语法给大家介绍了,所以今天就不再介绍 Dart 的基本语法了,直接进入 Flu ...

  2. Pikachu漏洞靶场 ../../(目录遍历)

    目录遍历 概述 在web功能设计中,很多时候我们会要将需要访问的文件定义成变量,从而让前端的功能便的更加灵活.当用户发起一个前端的请求时,便会将请求的这个文件的值(比如文件名称)传递到后台,后台再执行 ...

  3. 【scikit-learn基础】--『监督学习』之 支持向量机分类

    支持向量机也是一种既可以处理分类问题,也可以处理回归问题的算法.关于支持向量机在回归问题上的应用,请参考:TODO 支持向量机分类广泛应用于图像识别.文本分类.生物信息学(例如基因分类).手写数字识别 ...

  4. 【OpenVINO 】在 MacOS 上编译 OpenVINO C++ 项目

    前言 英特尔公司发行的模型部署工具OpenVINO模型部署套件,可以实现在不同系统环境下运行,且发布的OpenVINO 2023最新版目前已经支持MacOS系统并同时支持在苹果M系列芯片上部署模型.在 ...

  5. 关于Triple DES(3DES)对称加密算法

    一.引言 在网络安全领域,对称加密算法作为一种常见的加密手段,被广泛应用于保障数据传输的保密性和完整性.其中,DES(Data Encryption Standard)算法作为一种经典的对称加密算法, ...

  6. 【华为云技术分享】空间异常即刻诊断,华为云数据管理服务DAS又出新招

    摘要:华为云数据管理服务DAS提供的云DBA智能化运维平台于日前发布了空间&元数据分析特性,支持查看实例空间异常列表.实例空间概况.数据库列表信息,帮助用户及时发现数据库中的空间和元数据异常, ...

  7. 3层结构+7大特点,带你认识华为云IoTEdge

    摘要:华为云IoTEdge三层架构联合打造的IoT边缘平台功能,持续为更多企业和开发者带来价值. 本文分享自华为云社区<[华为云IoTEdge学习笔记]华为云IoT边缘功能特点及价值>,作 ...

  8. 从零开始学python | 什么是Python JSON?

    摘要:您知道如何从在线API传输数据或将各种数据存储到本地计算机吗?您已经将自己沉浸于JSON的一种方式中,JSON表示Java Script Object Notation.它是一种著名的流行数据格 ...

  9. 基于RNN和CTC的语音识别模型,探索语境偏移解决之道

    摘要:在本文介绍的工作中,我们展示了一个基于RNN和CTC的语音识别模型,在这个模型中,基于WFST的解码能够有效地融合词典和语言模型. 本文分享自华为云社区<语境偏移如何解决?专有领域端到端A ...

  10. 云小课丨SA基线检查:给云服务来一次全面“体检”

    摘要:随着企业上云进程的加快,由于云服务配置不合理.不合规等引发的安全风险与日俱增.如果没有加以重视并做及时的诊断处置,将会对企业云上业务带来巨大的安全隐患. 本文分享自华为云社区<云小课丨安全 ...