前端 -- 树结构过滤（数遍历查询）

前言

前端在开发后台管理的时候应该都有处理过树结构组件，如权限管理，菜单管理，组织机构管理等等，那么在对这些树结构数据类型做处理时往往会遇到需要过滤数组的情况。

思路

树结构的复杂性决定了不能通过一次遍历解决，那么肯定需要用到递归调用，第二个难点是过滤的数组处理问题，往常通过数据结构查找节点添加数据的形式肯定是不能用的，那么我们可以通过函数参数传递 引用传递的特点（如果大家有不理解的地方，可以留言我们出一起函数传递类型的文章）来处理。

具体实现

例：过滤id后四位等于0000的数据

filterTree (tree = [],param = [], arr = []) {
  if (!tree.length) return []
      for (let item of tree) {
          let node = {...item, children: []} //存储节点 用于下次递归后引用传递处数据
          let id = item.id.substr(item.id.length - 4, 4) //过滤条件
          if (id == 0000) arr.push(node) // 过滤数组
          if (item.children && item.children.length) this.filterTree(item.children,param, node.children) // 判断是否有子节点，符合条件则递归调用               
  }
  return arr
},

业务代码可以再二次封装一下

优化

有时候我们会对树形结构数据进行不同条件的过滤， 这个时候我们只要把filterTree中的过滤判断抽成一个条件判断的函数就行如下所示：

function filterTree (tree = [], validate = () => {}, param = [], arr = []) {
    if (!tree.length) return []
        for (let item of tree) {
            if (!validate.apply(null,[item, ...param])) continue
            let node = {...item, children: []}
            arr.push(node)
            if (item.children && item.children.length) filterTree(item.children, validate, param, node.children)
    }
    return arr
}

validate 方法为业务代码 我们发现当把过滤条件抽离之后，整个filterTree函数就会变得非常灵活，可以自定义不同的validate函数去获取我们希望的树形结构数据。从中我们可以得知灵活的函数来源于灵活的配置，配置则通过入参进入函数，或者有兴趣的朋友可以自己再包个语法糖，这样在调用的时候会更加的直观和简洁。