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

smile_逸仙2025-07-04 9:16

前言

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

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

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

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