几行代码的深层树形结构检索

前言

今天没有大活,分享一个悟出来的小招式。

前些天有一个需求,有一个组织机构树要做筛选,这个功能后端不接,甩到了我手上,一般来讲,这种未知层级的树形结构数据,处理起来会非常麻烦,我磨了半个小时,突然灵光一现,悟出来一招,废话不多说了,直接上码。

map 的大用

js 复制代码
function treeFilter (tree, searchText) {

  const res = tree.map(item => {
  
    // 检测当前节点是否匹配
    if (item.name.includes(searchText)) return { ...item }
    
    // 检测子节点是否匹配
    if (item.children) {
    
      const childMatchs = treeFilter(item.children, searchText)
      if (childMatchs.length) {
        return {
          ...item,
          children: childMatchs
        }
      }
      
      return null
      
    }
    
    return null
  
  })
  
  return res.filter(item => item)

}

好啦,这样就大功告成了,是不是很简单?

这里的匹配校验我写的比较简单,只用 includes 做了个包含检测,有更复杂应用需求的同学可以上正则处理下。

这里的核心思路其实就是利用 map 函数的返回值重塑了树形结构的数据体,比在原结构上动刀要顺畅的多。

思路其实也简单,我们在一个递归层中只做了两件事,第一,利用 map 函数遍历筛选当前层的节点名称是否匹配,若匹配,则返回整个节点的数据;第二,利用递归来筛选节点的字层级。需要格外注意的是 treeFilter 的返回值,treeFilter 的返回值是衔接整个递归链的精髓。

写在最后

多嘴一句,map 函数在树形数据结构转扁平化 map 结构时也有大用,感兴趣的同学可以一试。

好啦,今天就到这里了,若有纰漏之处还望指正。路过的大佬们若有心得的,还望不吝分享一二,以提携本小蚂蚁奋进!!

相关推荐
拾光拾趣录12 分钟前
for..in 和 Object.keys 的区别:从“遍历对象属性的坑”说起
前端·javascript
OpenTiny社区22 分钟前
把 SearchBox 塞进项目,搜索转化率怒涨 400%?
前端·vue.js·github
编程猪猪侠1 小时前
Tailwind CSS 自定义工具类与主题配置指南
前端·css
qhd吴飞1 小时前
mybatis 差异更新法
java·前端·mybatis
YGY Webgis糕手之路1 小时前
OpenLayers 快速入门(九)Extent 介绍
前端·经验分享·笔记·vue·web
患得患失9491 小时前
【前端】【vueDevTools】使用 vueDevTools 插件并修改默认打开编辑器
前端·编辑器
ReturnTrue8681 小时前
Vue路由状态持久化方案,优雅实现记住表单历史搜索记录!
前端·vue.js
UncleKyrie1 小时前
一个浏览器插件帮你查看Figma设计稿代码图片和转码
前端
遂心_1 小时前
深入解析前后端分离中的 /api 设计:从路由到代理的完整指南
前端·javascript·api
你听得到112 小时前
Flutter - 手搓一个日历组件,集成单日选择、日期范围选择、国际化、农历和节气显示
前端·flutter·架构