js遍历树形结构并返回所有的子节点id值
场景
很多时候我么需要返回返回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值的更多相关文章
- 树形结构的数据库表Schema设计-基于左右值编码
树形结构的数据库表Schema设计 程序设计过程中,我们常常用树形结构来表征某些数据的关联关系,如企业上下级部门.栏目结构.商品分类等等,通常而言,这些树状结构需要借助于数据库完 成持久化.然而目前的 ...
- vue_elementUI_ tree树形控件 获取选中的父节点ID
el-tree 的 this.$refs.tree.getCheckedKeys() 只可以获取选中的id 无法获取选中的父节点ID想要获取选中父节点的id;需要如下操作1. 找到工程下的node_m ...
- js,jq获取父,兄弟,子节点整理
js获取节点 父: parentNode 获取已知节点的父节点. 子: childNodes; 得到全部子节点 children 得到全部子节点 firstChild 获得第一个子节点 lastChi ...
- js和jq获取父,兄弟,子节点
1,js获取节点: 父: parentNode 获取已知节点的父节点. 子: childNodes; 得到全部子节点 children 得到全部子节点 firstChild 获得第一个子节点 last ...
- element el-tree循环遍历树形结构,并动态赋值disabled属性
凌晨3点,功夫不负有心人,已经累趴,效果终于出来: 贴上代码: <style scoped> .form { width: 50%; } </style> <templa ...
- js遍历ajax回调函数返回值中的object对象
function printObject(obj) { //obj = {"cid":"C0","ctext":"区县& ...
- 别再写一堆的 for 循环了!Java 8 中的 Stream 轻松遍历树形结构,是真的牛逼
实体类:Menu.java /** * Menu * * @author lcry */ @Data @Builder public class Menu { /** * id */ public I ...
- Js 遍历json对象所有key及根据动态key获取值
var obj = {}; for(var k in obj) { //遍历对象,k即为key,obj[k]为当前k对应的值 console.log(obj[k]); } 文章来自:https://z ...
- Mybatis+Mysql插入数据库返回自增主键id值的三种方法
一.场景: 插入数据库的值需要立即得到返回的主键id进行下一步程序操作 二.解决方法: 第一种:使用通用mapper的插入方法 Mapper.insertSelective(record): 此方法: ...
- oracle使用execute immediate方式完成函数动态传入表名并操作 返回新的主键id值
CREATE OR REPLACE FUNCTION SEQ1 (v_bname in VARCHAR2) return NUMBER is v_bcount NUMBER; BEGIN execut ...
随机推荐
- DBA:介里有你没有用过的“CHUAN”新社区版本Redis6.0
摘要:华为云DCS Redis 6.0社区版带来了极致性能.功能全面.可靠性强.性价比高的云服务,并且完全兼容开源Redis,客户端无需修改代码,开通后即可使用,使企业完全无需后顾之忧就能享受到业务响 ...
- Solon:Hello world!
Solon:Hello world! (一)新建一个 maven 空项目 (二)添加 maven 引用 <dependency> <groupId>org.noear</ ...
- Axure 绘制表格添加删除
1.添加按钮:白底黑框,80X30,文本和命名均为"添加"; 2.数据表格(表头):1行5列,灰底黑框的表格作为表头,从左到右每个格子的文字分别为:姓名.性别.年龄.电话和操作: ...
- redis之列表 redis之hash redis其他操作 redis管道 django中使用redis celery介绍和安装 celery快速使用 celery包结构
目录 昨日回顾 今日内容 1 redis之列表 2 redis之hash 3 redis其他操作 4 redis 管道 5 django中使用redis 6 celery介绍和安装 7 celery快 ...
- 使用Expression代替反射读取IDataReader或IDataRecord给实体类赋值
ExpressionMapper代码 using System; using System.Collections.Concurrent; using System.Collections.Gener ...
- 库函数 | C++17 std::filesystem文件系统 用法指北
本文将针对常用的场景,对 std::filesystem 的使用逐一进行验证: 判断文件夹是否存在 创建单层目录 逐级创建多层目录 创建多级目录 当前文件路径 创建文件"from.dat&q ...
- 十、docker镜像的分层
系列导航 一.docker入门(概念) 二.docker的安装和镜像管理 三.docker容器的常用命令 四.容器的网络访问 五.容器端口转发 六.docker数据卷 七.手动制作docker镜像 八 ...
- C#设计模式08——桥接模式的写法
什么是C#桥接模式?桥接模式是一种结构型设计模式,它可以将抽象部分与实现部分分离,使它们可以独立地变化.这种模式通过将实现细节从抽象类中分离出来,从而让它们可以根据需要独立变化. 为什么要使用C#桥接 ...
- Angular系列教程之观察者模式和RxJS
.markdown-body { line-height: 1.75; font-weight: 400; font-size: 16px; overflow-x: hidden; color: rg ...
- 修改Keil uvison4 字体样式
1.点击扳手配置 2.点击Colors & Fonts,选择其中的8051:Editor C Files,选择Text,点击右侧的Courier New... 3.在里面就可以调节字体了