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

前言

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

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

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 结构时也有大用,感兴趣的同学可以一试。

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

相关推荐
青皮桔23 分钟前
CSS实现百分比水柱图
前端·css
影子信息28 分钟前
vue 前端动态导入文件 import.meta.glob
前端·javascript·vue.js
青阳流月29 分钟前
1.vue权衡的艺术
前端·vue.js·开源
样子201834 分钟前
Vue3 之dialog弹框简单制作
前端·javascript·vue.js·前端框架·ecmascript
kevin_水滴石穿34 分钟前
Vue 中报错 TypeError: crypto$2.getRandomValues is not a function
前端·javascript·vue.js
孤水寒月2 小时前
给自己网站增加一个免费的AI助手,纯HTML
前端·人工智能·html
CoderLiu2 小时前
用这个MCP,只给大模型一个figma链接就能直接导出图片,还能自动压缩上传?
前端·llm·mcp
伍哥的传说2 小时前
鸿蒙系统(HarmonyOS)应用开发之实现电子签名效果
开发语言·前端·华为·harmonyos·鸿蒙·鸿蒙系统
海的诗篇_2 小时前
前端开发面试题总结-原生小程序部分
前端·javascript·面试·小程序·vue·html
uncleTom6663 小时前
前端地图可视化的新宠儿:Cesium 地图封装实践
前端