场景

很多时候我么需要返回返回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. 数仓无损压缩算法:gzip算法

    摘要:一种无损的压缩数据格式,是一个在类Unix上的一种文件解压缩软件. 本文分享自华为云社区<GaussDB(DWS) gzip算法简介>,作者:hw0086. [算法原理] gzip是 ...

  2. 买家手册:企业在选择 SBOM 供应商时需要注意什么?

    Apache Log4j 和 Log4Shell 两大事件的发生,将软件物料清单(Software Bill of Materials, SBOM)推向安全防护前沿,成为企业保护其软件供应链的方式之一 ...

  3. 查询速度最高提升50倍!火山引擎ByteHouse在广告投放领域实践分享

     更多技术交流.求职机会,欢迎关注字节跳动数据平台微信公众号,回复[1]进入官方交流群   据QuestMobile报告显示,移动互联网已经进入了下半场,在使用人数和使用时长方面已经没有明显增长,互联 ...

  4. kubernetes实战(三十一):Prometheus监控Windows主机

    1. 基本说明 使用Prometheus监控Windows主机和Linux主机并无太大区别,都是使用社区的Exporter进行采集数据,之后暴露一个接口,可以让Prometheus采集到主机的数据. ...

  5. Python 将省、市 json 替换 成拼音

    1.将 city_code_cn.json 中的省.市.区,翻译成英文,或直接替换去掉省.市 如:苏州市  -> 苏州 转成拼音后就变成 Suzhou,否则就会转成 Suzhoushi 怪怪的 ...

  6. 【Vue】阶段练习

    目录 需求 参考汽车之家 首页 登录功能 展示所有汽车页面 项目 登录页面 跨域请求 一 同源策略 二 CORS(跨域资源共享)简介 三 CORS基本流程 四 CORS两种请求详解 五 Django项 ...

  7. 2013年 第四届蓝桥杯C/C++ B组(省赛)

    第一题:高斯日记 大数学家高斯有个好习惯:无论如何都要记日记. 他的日记有个与众不同的地方,他从不注明年月日,而是用一个整数代替,比如:4210 后来人们知道,那个整数就是日期,它表示那一天是高斯出生 ...

  8. Kafka 原理以及分区分配策略剖析

    一.简介 Apache Kafka 是一个分布式的流处理平台(分布式的基于发布/订阅模式的消息队列[Message Queue]). 流处理平台有以下3个特性: 可以让你发布和订阅流式的记录.这一方面 ...

  9. Webpack Vue瘦身,感受快到飞起的加载速度!

    症结 在利用webpack脚手架搭建vue项目后,往往最终打包的.js和.css文件过于庞大,造成首次加载的时候白屏时间过长,影响用户体验,下图为未经任何优化直接npm run build之后的情况: ...

  10. freeswitch服务器的时间同步设置

    概述 在生产环境中,一般会有N台freeswitch 服务器,不同服务器之间的信令和话单的时间不能相差太多,否则对查找和定位问题会造成一定的困扰. 同时,freeswitch的默认运行设置并未直接使用 ...