如何实现一个树结构的深度遍历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 数组件等。

相关推荐
今天不要写bug1 分钟前
基于elementUI实现一个可编辑的表格(简洁版)
前端·javascript·elementui
上优4 分钟前
Vue3纯前端同源跨窗口通信移动AGV小车
前端·vue.js·状态模式
h_k100864 分钟前
Chrome 插件开发入门技术文章大纲
前端·chrome
一只小阿乐4 分钟前
vue-router 的实现原理
前端·javascript·vue.js·路由·vue-router
Zz_waiting.5 分钟前
案例开发 - 日程管理 - 第七期
开发语言·前端·javascript·vue.js·html·路由
writeone6 分钟前
9-10关于JS初学产生的问题
开发语言·javascript·ecmascript
一只小风华~9 分钟前
Vue:事件处理机制详解
前端·javascript·vue.js·typescript·前端框架
dy17174 小时前
element-plus表格默认展开有子的数据
前端·javascript·vue.js
2501_915918418 小时前
Web 前端可视化开发工具对比 低代码平台、可视化搭建工具、前端可视化编辑器与在线可视化开发环境的实战分析
前端·低代码·ios·小程序·uni-app·编辑器·iphone
程序员的世界你不懂8 小时前
【Flask】测试平台开发,新增说明书编写和展示功能 第二十三篇
java·前端·数据库