当前位置: 首页 > news >正文

过滤和筛选树形结构数据

场景

在平时项目开发中经常会遇到树形数据的处理,如树形数据根据条件值过滤掉不符合条件的选项,如果是最后的子数据符合条件那么就会保存这条树形链路的所有直属数据并过滤掉所有非直属的数据。如果是符合条件的数据还有子元素,那么就保留所有的后代数据。

代码示例

    // 树形源数据const treeList = [{key: '0',title: '全局变量',children: [{title: '全局变量1',key: '1',},{title: '全局变量2',key: '2',},],},{key: '3',title: '全局变量3',children: [{title: '全局变量3-1',key: '4',},{title: '全局变量3-2',key: '5',},],}];// 定义过滤的函数(trees 为需要过滤的数值, filterValue 为过滤的条件值)const filterTree = (trees: any[], filterValue: string) => {function loopFilter(item) {// 如果当前项满足条件就直接通过此项数据校验if (item.title === filterValue) return true;// 否则就需要去递归判断他的子数据中是否有符合条件值if (item.children) {let children = item.children.filter((child) =>loopFilter(child),);if (children.length > 0) {// 将不符合条件的子数据移除item.children = children;return true;}}return false;};return trees.filter(item => loopFilter(item));};

使用示例

  console.log(filterTree(treeList, '全局变量3-1'));console.log(filterTree(treeList, '全局变量'));

打印验证

在这里插入图片描述

在这里插入图片描述

相关文章:

  • 北京网站建设多少钱?
  • 辽宁网页制作哪家好_网站建设
  • 高端品牌网站建设_汉中网站制作
  • 关于Redis持久化和集群模式(主从,哨兵,去中心化)使用和介绍
  • Spring Boot 缓存支持及其优缺点
  • Linux中安装C#的.net,创建运行后端或控制台项目
  • nginx反向代理+nginx黑白名单+nginx负载均衡+平滑升级+配置jdk环境-7.30
  • 【LLM】-12-部署Langchain-Chatchat-0.3.x版本
  • Springboot2.6.13整合flowable6.8.1
  • 递归方法清空多维数组中的指定元素为对应值(对象)
  • vue3 引入 wangeditor 富文本编辑器 与 highlight 代码高亮工具 的方法及注意事项
  • Android Dialog设置背景透明
  • [Spark] 详解 outputMode
  • 创建完整的APP页面
  • cuda编程Debug断点调试
  • web小游戏开发:拼图(二)图片切割
  • SQL必知必会
  • 从零到一:用Go语言构建你的第一个Web服务
  • eclipse(luna)创建web工程
  • LeetCode算法系列_0891_子序列宽度之和
  • maya建模与骨骼动画快速实现人工鱼
  • PHP 小技巧
  • Python socket服务器端、客户端传送信息
  • SpiderData 2019年2月13日 DApp数据排行榜
  • SSH 免密登录
  • Terraform入门 - 1. 安装Terraform
  • 关于字符编码你应该知道的事情
  • 三栏布局总结
  • 新书推荐|Windows黑客编程技术详解
  • 一些关于Rust在2019年的思考
  • 自动记录MySQL慢查询快照脚本
  • elasticsearch-head插件安装
  • 曾刷新两项世界纪录,腾讯优图人脸检测算法 DSFD 正式开源 ...
  • #[Composer学习笔记]Part1:安装composer并通过composer创建一个项目
  • #100天计划# 2013年9月29日
  • #WEB前端(HTML属性)
  • #控制台大学课堂点名问题_课堂随机点名
  • (Java实习生)每日10道面试题打卡——JavaWeb篇
  • (代码示例)使用setTimeout来延迟加载JS脚本文件
  • (六)什么是Vite——热更新时vite、webpack做了什么
  • (区间dp) (经典例题) 石子合并
  • (一)认识微服务
  • (转)Android中使用ormlite实现持久化(一)--HelloOrmLite
  • (转)MVC3 类型“System.Web.Mvc.ModelClientValidationRule”同时存在
  • (转)四层和七层负载均衡的区别
  • (转)淘淘商城系列——使用Spring来管理Redis单机版和集群版
  • ./mysql.server: 没有那个文件或目录_Linux下安装MySQL出现“ls: /var/lib/mysql/*.pid: 没有那个文件或目录”...
  • .NET Core6.0 MVC+layui+SqlSugar 简单增删改查
  • .net 逐行读取大文本文件_如何使用 Java 灵活读取 Excel 内容 ?
  • .NET学习全景图
  • .pings勒索病毒的威胁:如何应对.pings勒索病毒的突袭?
  • @antv/x6 利用interacting方法来设置禁止结点移动的方法实现。
  • @RequestMapping-占位符映射
  • [ SNOI 2013 ] Quare
  • [AI StoryDiffusion] 创造神奇故事,AI漫画大乱斗!
  • [Android] Upload package to device fails #2720
  • [Angular] 笔记 16:模板驱动表单 - 选择框与选项
  • [Ariticle] 厚黑之道 一 小狐狸听故事