【JS】检索树结构,并返回结果节点的路径与子节点

【JS】检索树结构,并返回结果节点的路径与子节点

  • 需求
  • 代码
  • 效果展示

需求

一个树结构,需要添加条件检索功能,检索结果依然是一个树结构,包含所有的符合要求的节点,以及他们到根节点的路径,与他们的子节点

代码

searchTree(departments, queryParams) {// 用于克隆具有匹配子项的节点的辅助函数const cloneWithChildren = (node) => {return {...node,children: node?.children?.map(cloneWithChildren) || [], // 克隆所有的子节点};};// 核心递归搜索功能function searchNode(node, queryParams) {let judge = () => {let name = queryParams.deptName ? node.deptName.includes(queryParams.deptName) : true;let status = ['0', '1'].includes(queryParams.status + '')? queryParams.status + '' === node.status + '': true;return name && status;//这里是我个人的搜索条件,一个名称的模糊查询与状态值匹配。};if (judge()) {// 如果当前节点包含关键词,克隆整个节点连同其子节点return cloneWithChildren(node);}if (node.children) {const matchingChildren = node.children.map((child) => searchNode(child, queryParams)).filter((child) => child !== null);if (matchingChildren.length > 0) {// 如果任何子节点包含匹配项,则克隆父节点并连接匹配的子节点return { ...node, deptName: node.deptName, children: matchingChildren };}}// 如果当前节点和子节点都不包含关键词,则不包含它在内return null;}// 递归遍历部门列表并构建结果树return departments.map((dept) => searchNode(dept, queryParams)).filter((dept) => dept !== null);},

效果展示

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/202204.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Spring Boot基础

文章目录 一、Spring Boot1. Spring的缺点2. Spring Boot 改变了什么3. Spring Boot项目搭建4. 热部署5. 依赖管理6. 代码生成器7. 日志8. 日期转换9. 接口文档10. 打包部署11. 自动装配 一、Spring Boot 1. Spring的缺点 在Spring Boot出现以前,使用Spring框架的…

二叉树OJ题之三

哈喽伙伴们,有一段时间没更新博客了,主要是这段时间要准备学校的期末考试,所以没有把部分时间分给博客,今天我们一起去接着看二叉树递归有关的OJ题,今天我们要学习的是 判断相同的树,力扣题目--100 &…

JSONArray添加JSONObject数据组装后,toString()发现值有{“$ref“:“$[0]“}乱码问题

出现这个问题是FastJson的循环引用造车的,可以手动设置取消FastJson的循环引用的检查。代码如下: JSONArray oaArr new JSONArray(); //取消JSON循环引用检查 String s JSON.toJSONString(oaArr, SerializerFeature.DisableCircularReferenceDetect)…

龙芯loongarch64服务器编译安装pytorch

前言 PyTorch是一个开源的Python机器学习库,基于Torch,用于自然语言处理等应用程序,它是一个基于Python的可续计算包。在通过龙芯开源仓库下载依赖包后,执行import torch后,发现其中安装的"pytorch"就无法正常使用,这里就演示下pytorch整个编译流程。 1、环境准…

推荐一款Excel快速加载SQL的插件,方便又好用

如果告诉你只需要双击一下,SQL数据库中存放在表里面的数据,就能加载到你的Excel中,你想不想要? 今天给大家推荐一款好用的Excel插件,安装简单,使用方便,是经常使用SQL数据库的不二。 这款插件…

Web开发学习HTTP协议、通过浏览器控制台学习HTTP协议。

文章目录 HTTP协议1.HTTP协议是什么?2.HTTP协议的特点3.什么是URL?4.通过浏览器控制台学习HTTP协议Request Headers请求数据格式说明Response Headers请求数据格式说明 5.HTTP工作原理 HTTP协议 1.HTTP协议是什么? HTTP协议是一种超文本传输协议&…

前端实现主题(深色模式)切换的几种方案

方案一:link 动态引入 通过改变link 标签的 href 属性实现动态修改样式(暂不推荐这种方案) 优点:实现了按需加载,提高了性能; 缺点:动态加载样式文件,可能会因为网络问题导致样式…

使用Scanner扫描器和if语句来判断QQ等级的活跃程度

一、主要特点 总体使用try包围起来,用到了Scanner扫描器,还用到了若干if语句。 二、运行代码 import java.util.Scanner; public class QQtest {public static void main(String[] args){try (Scanner scan new Scanner(System.in)) {System.out.pr…

吉利护航,宣称比友商“更懂车”,魅族造车的底气与底色

继小米、华为后,又一家手机厂商宣布跨界造车。 在近日举办的2023魅族秋季无界生态发布会上,星纪魅族集团(下称“魅族”)董事长兼CEO沈子瑜宣布,魅族正式进入汽车市场,将在2024年第一季度启动“DreamCar共创…

【STM32】STM32学习笔记-课程简介(01)

00. 目录 文章目录 00. 目录01. 课程简介02. 硬件设备03. 软件工具04. 硬件套件4.1 面包板和跳线/飞线4.2 杜邦线和STM32最小系统板4.3 STLINK和OLED显示屏4.4 LED和按键4.5 电位器和蜂鸣器4.6 传感器和旋转编码器4.7 USB转串口和MPU60504.8 Flash闪存和电机模块4.9 SG90舵机 0…

win10与 vm虚拟机win7共享文件夹创建

1:在win10(主机)电脑先随意共享一个文件夹 2:在win10(主机)上创建一个网络映射 右键此电脑选择映射网络驱动器 成功后会多出这个网络位置 3:win7虚拟机设置 在虚拟机中点击计算机右键添加一个网络位置

C# Onnx CenterNet目标检测

目录 效果 模型信息 项目 代码 下载 效果 模型信息 Inputs ------------------------- name:input.1 tensor:Float[1, 3, 384, 384] --------------------------------------------------------------- Outputs ------------------------- name&a…

安卓开发引入网络图片

<ImageViewandroid:id"id/img01"android:layout_width"match_parent"android:layout_height"200dp"android:layout_weight"1"/>ImageView加载网路图片 第一步&#xff1a;添加网络权限 <uses-permission android:name"…

vue使用实现录音功能js-audio-recorder

前言 最近项目中需要实现一个录音上传功能&#xff0c;用于语音评论可以上录音。 下载插件&#xff1a; npm i js-audio-recorder完整代码 <template><div style"padding: 20px;"><h3>录音上传</h3><div style"font-size:14px"…

“轻松管理视频文件:高效归类与统一重命名“

随着电子设备的普及&#xff0c;我们的视频文件可能来自各种不同的源头&#xff0c;如何高效地管理和查找这些文件成为了一个问题。今天&#xff0c;我们将为您提供一个完美的解决方案——自动归类并统一重命名视频文件。 首先&#xff0c;第一步&#xff0c;我们要进入文件批…

我一人全干!之vue3后台管理中的大屏展示。

使用大屏展示的时候有很多种场景&#xff0c;众多场景都是为了实现大屏自适应。 大屏&#xff0c;顾名思义&#xff0c;就是放在一个固定的屏幕上看的&#xff0c;即使你不做自适应&#xff0c;放在一个固定的屏幕上看也没啥问题&#xff0c;但是很多做大屏的是为了在PC端看&am…

【JAVA】Maven构建java-grpc-protobuf代码生成测试

本次是通过Maven工具构建Java测试工程&#xff0c;需要将原本通过gradle构建的项目需要通过maven构建加入公司代码库&#xff0c;通过Maven构建涉及到接下来要介绍的插件&#xff0c;总是发现pom.xml编译不通过&#xff0c;看到网上都是千篇一律的插件配置&#xff0c;自己就是…

软件产品研发过程 - 二、概要设计

软件产品研发过程 - 概要设计 相关系列文章 软件产品研发管理经验总结-管理细分 软件研发管理经验总结 - 事务管理 软件研发管理经验总结 - 技术管理 软件产品研发过程 - 二、概要设计 目录 软件产品研发过程 - 概要设计一、概要设计概述二、概要设计过程1、模块概述2、应用场景…

68从零开始学Java之Set集合都有哪些特性

作者&#xff1a;孙玉昌&#xff0c;昵称【一一哥】&#xff0c;另外【壹壹哥】也是我哦 千锋教育高级教研员、CSDN博客专家、万粉博主、阿里云专家博主、掘金优质作者 前言 在上一篇文章中&#xff0c;壹哥带大家学习了List集合的用法和特性&#xff0c;尤其是对ArrayList和L…

无人奶柜:零售业的自助革命

无人奶柜&#xff1a;零售业的自助革命 无人奶柜作为零售业的一项创新技术&#xff0c;正在改变人们购买奶制品的方式&#xff0c;并对零售业产生深远的影响。它的出现提供了更便捷、高效、便利的购物体验&#xff0c;节省了人力成本&#xff0c;同时也为零售商带来了创新机会和…