前言
今天没有大活，分享一个悟出来的小招式。
前些天有一个需求，有一个组织机构树要做筛选，这个功能后端不接，甩到了我手上，一般来讲，这种未知层级的树形结构数据，处理起来会非常麻烦，我磨了半个小时，突然灵光一现，悟出来一招，废话不多说了，直接上码。
map 的大用
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 结构时也有大用，感兴趣的同学可以一试。
好啦，今天就到这里了，若有纰漏之处还望指正。路过的大佬们若有心得的，还望不吝分享一二，以提携本小蚂蚁奋进！！
