如何实现一个树结构的深度遍历every,some,filter判断

大家好，我是辉夜真是太可爱啦，本文主要讲述一个 children 树结构数据的遍历思路，内容也比较简单。同理，可以自由封装深度的 some ， find 等方法。

最近在做一个带有分支的流程图，效果如图：

由于数据比较复杂，所以我只简化为只有一个 template 字段

let list = [
  {
    template: '',
    children: [
      {
        template: '测试',
      },
      {
        template: '',
        children: [{ template: '我的' }],
      },
    ],
  },
]

假如现在有一个需求，是需要校验结构中，所有的 template 都不为空，也就是让用户都将积木中的 template 选择填充。

首先，我们可以自己实现一个 myEvery 方法。

export const myEvery = (list, callback) => {
  return list.every((item) => {
    if (!callback(item)) {
      return false
    } else {
      return true
    }
  })
}

调用起来就是如下：

myEvery(list,(x)=>x.template)

但目前也只能实现当前第一层的 every 判断。

加入children更深度的判断，那判断 item 中是否有 children ，然后再进行方法的自调用

// 深度遍历判断当前每个节点是否全都符合条件
export const childrenEveryDeep = (list, callback) => {
  return list.every((item) => {
    if (!callback(item)) {
      return false
    } else if (item.children) {
      return childrenEveryDeep(item.children, callback)
    } else {
      return true
    }
  })
}

方法的自调用是遍历中的一个常用方法， Vue 中的组件也可以使用自调用，例如 cascader 级联选择框或者 tree 数组件等。

同理，我们来写一下深度的 some 方法

// 深度遍历判断当前是否其中有一个节点符合条件
export const childrenSomeDeep = (list, callback) => {
  return list.some((item) => {
    if (callback(item)) {
      return true
    } else if (item.children) {
      return childrenSomeDeep(item.children, callback)
    } else {
      return false
    }
  })
}

以及深度的 filter 方法，其中的 cloneDeep 来自于 lodash

// 深度遍历过滤符合条件的节点item (已将item的children剔除)
export const childrenFilterDeep = (list, callback, result = []) => {
  list.forEach((item) => {
    if (callback(item)) {
      let temp = cloneDeep(item)
      delete temp.children
      result.push(temp)
    }
    if (item.children) {
      childrenFilterDeep(item.children, callback, result)
    }
  })
  return result
}

// 深度遍历过滤符合条件的节点item的总个数 (已将item的children剔除)
export const getChildrenFilterDeepLength = (list, callback, result = []) => {
  if (Array.isArray(list)) {
    list.forEach((item) => {
      if (callback(item)) {
        let temp = cloneDeep(item)
        delete temp.children
        result.push(temp)
      }
      if (item.children) {
        getChildrenFilterDeepLength(item.children, callback, result)
      }
    })
  }
  return result?.length || 0
}