场景

很多时候我么需要返回返回tree结构下的所有自己节点
很显然这个时候需要遍历了
废话不多说
直接递归遍历

数据结构

var treeData = [{
id: 111,
title: "机构1",
children: [{
id: 123,
title: "机构1",
},
{
id: 11123,
title: "机构1231",
children: [{
id: 111211231233,
title: "机构1231",
}]
},
{
id: 11121212123,
title: "机构11111231",
}
]
},
{
id: 1112111113,
title: "机构1211131",
children: [{
id: 1110000211231233,
title: "机构12300001",
}]
},
{
id: 110001112113,
title: "机构1211000111211331",
children: [{
id: 11100999911231233,
title: "机构100002300001",
children: [{
id: 100,
title: "机构l",
}]
}]
},
{
id: 9999,
title: "部门11",
children: [{
id: 000233,
title: "部门31",
children: [{
id: 110,
title: "机2构l",
}]
}]
},
]

我的思路

首先肯定是需要进行循环的,我使用的是for of循环
假设tree数据是一个[{},{}]这样类型的
那么直接将id值push进去就可以了
如果{}中有children这个字段的话
我们需要判断是否有children并且长度是否大于0
if (item.children && item.children.length)
如果有的话
我们需要自己调用自己并且需要传递参数给自己
第一个参数肯定被遍历的值;也就是 item.children
第二个参数是arr,用来需要返回的所有id值

返回所有的id值

function lookForAllId(data = [], arr = []) {
for (let item of data) {
arr.push(item.id)
if (item.children && item.children.length) lookForAllId(item.children, arr)
}
return arr
}
console.log(lookForAllId(treeData));

还有没有更优秀的写法

明天继续写

js遍历树形结构并返回所有的子节点id值的更多相关文章

  1. 树形结构的数据库表Schema设计-基于左右值编码

    树形结构的数据库表Schema设计 程序设计过程中,我们常常用树形结构来表征某些数据的关联关系,如企业上下级部门.栏目结构.商品分类等等,通常而言,这些树状结构需要借助于数据库完 成持久化.然而目前的 ...

  2. vue_elementUI_ tree树形控件 获取选中的父节点ID

    el-tree 的 this.$refs.tree.getCheckedKeys() 只可以获取选中的id 无法获取选中的父节点ID想要获取选中父节点的id;需要如下操作1. 找到工程下的node_m ...

  3. js,jq获取父,兄弟,子节点整理

    js获取节点 父: parentNode 获取已知节点的父节点. 子: childNodes; 得到全部子节点 children 得到全部子节点 firstChild 获得第一个子节点 lastChi ...

  4. js和jq获取父,兄弟,子节点

    1,js获取节点: 父: parentNode 获取已知节点的父节点. 子: childNodes; 得到全部子节点 children 得到全部子节点 firstChild 获得第一个子节点 last ...

  5. element el-tree循环遍历树形结构,并动态赋值disabled属性

    凌晨3点,功夫不负有心人,已经累趴,效果终于出来: 贴上代码: <style scoped> .form { width: 50%; } </style> <templa ...

  6. js遍历ajax回调函数返回值中的object对象

    function printObject(obj) {      //obj = {"cid":"C0","ctext":"区县& ...

  7. 别再写一堆的 for 循环了!Java 8 中的 Stream 轻松遍历树形结构,是真的牛逼

    实体类:Menu.java /** * Menu * * @author lcry */ @Data @Builder public class Menu { /** * id */ public I ...

  8. Js 遍历json对象所有key及根据动态key获取值

    var obj = {}; for(var k in obj) { //遍历对象,k即为key,obj[k]为当前k对应的值 console.log(obj[k]); } 文章来自:https://z ...

  9. Mybatis+Mysql插入数据库返回自增主键id值的三种方法

    一.场景: 插入数据库的值需要立即得到返回的主键id进行下一步程序操作 二.解决方法: 第一种:使用通用mapper的插入方法 Mapper.insertSelective(record): 此方法: ...

  10. oracle使用execute immediate方式完成函数动态传入表名并操作 返回新的主键id值

    CREATE OR REPLACE FUNCTION SEQ1 (v_bname in VARCHAR2) return NUMBER is v_bcount NUMBER; BEGIN execut ...

随机推荐

  1. 传统到敏捷的转型中,谁更适合做Scrum Master?

    摘要:本文主要讲述的是从传统到敏捷Scrum团队转型中,对Scrum Master这一角色的分析. 本文分享自华为云社区<传统到敏捷的转型中,谁更适合做Scrum Master?>,作者: ...

  2. 字节跳动基于ClickHouse优化实践之“高可用”

    更多技术交流.求职机会,欢迎关注字节跳动数据平台微信公众号,回复[1]进入官方交流群 相信大家都对大名鼎鼎的ClickHouse有一定的了解了,它强大的数据分析性能让人印象深刻.但在字节大量生产使用中 ...

  3. 对不起,你做的 A/B 实验都是错的——火山引擎 DataTester 科普

    DataTester 是火山引擎数智平台旗下产品,能基于先进的底层算法,提供科学分流能力和智能的统计引擎,支持多种复杂的 A/B 实验类型.DataTester 深度耦合推荐.广告.搜索.UI.产品功 ...

  4. (error) MOVED 12706 10.176.246.204:9736

    使用redis-cli连接上redis后,执行get命令报错: (error) MOVED 12706 10.176.246.204:9736 百度到原因是未以集群模式连接,在连接时加上-c参数就可以 ...

  5. acwing算法提高课程笔记—数字三角形模型,最长上升子序列模型

    转自自网络,仅作为学习使用 1015摘花生 /*Hello Kitty想摘点花生送给她喜欢的米老鼠. 她来到一片有网格状道路的矩形花生地(如下图),从西北角进去,东南角出来. 地里每个道路的交叉点上都 ...

  6. Eureka相关相关接口和代码位置

    1.服务注册:com.netflix.eureka.registry.AbstractInstanceRegistry#register(InstanceInfo registrant, int le ...

  7. python进阶(2)--列表

    文档目录:一.访问列表元素二.更新列表三.删除元素四.列表排序五.len()与range()/list()六.创建一个包含1-10平方的列表七.复制列表两种方式八.元组:不可变的列表 -------- ...

  8. C++ 不使用虚析构的后果及分析

    很多 C++ 方面的书籍都说明了虚析构的作用: 保证派生类的析构函数被调用,并且使析构顺序与构造函数相反 保证资源能够被正确释放 很久一段时间以来,我一直认为第 2 点仅仅指的是:当派生类使用 RAI ...

  9. Skywalking 的使用

    本文为博主原创,未经允许不得转载: 官网:http://skywalking.apache.org/下载:http://skywalking.apache.org/downloads/Github:h ...

  10. Autowired注入Service变成了biaomidou的Mapper代理

    问题概述 一个Springboot工程,使用Mybatis-plus作为数据层框架 使用@MapperScan注解扫描Mapper接口 @MapperScan("org.net5ijy.cl ...