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