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

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

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

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

javascript 复制代码
let list = [
  {
    template: '',
    children: [
      {
        template: '测试',
      },
      {
        template: '',
        children: [{ template: '我的' }],
      },
    ],
  },
]

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

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

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

调用起来就是如下:

javascript 复制代码
myEvery(list,(x)=>x.template)

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

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

javascript 复制代码
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 数组件等。

相关推荐
江城开朗的豌豆6 分钟前
小程序登录不迷路:一篇文章搞定用户身份验证
前端·javascript·微信小程序
aesthetician11 分钟前
React 19.2.0: 新特性与优化深度解析
前端·javascript·react.js
Django强哥14 分钟前
JSON Schema Draft-07 详细解析
javascript·算法·代码规范
FIN666826 分钟前
射频技术领域的领航者,昂瑞微IPO即将上会审议
前端·人工智能·前端框架·信息与通信
U.2 SSD35 分钟前
ECharts漏斗图示例
前端·javascript·echarts
江城开朗的豌豆35 分钟前
我的小程序登录优化记:从短信验证到“一键获取”手机号
前端·javascript·微信小程序
excel39 分钟前
Vue Mixin 全解析:概念、使用与源码
前端·javascript·vue.js
IT_陈寒1 小时前
Java性能优化:这5个Spring Boot隐藏技巧让你的应用提速40%
前端·人工智能·后端
勇往直前plus1 小时前
CentOS 7 环境下 RabbitMQ 的部署与 Web 管理界面基本使用指南
前端·docker·centos·rabbitmq
Never_Satisfied1 小时前
在JavaScript / HTML中,Chrome报错此服务器无法证实它就是xxxxx - 它的安全证书没有指定主题备用名称
javascript·chrome·html