场景

很多时候我么需要返回返回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. DBA:介里有你没有用过的“CHUAN”新社区版本Redis6.0

    摘要:华为云DCS Redis 6.0社区版带来了极致性能.功能全面.可靠性强.性价比高的云服务,并且完全兼容开源Redis,客户端无需修改代码,开通后即可使用,使企业完全无需后顾之忧就能享受到业务响 ...

  2. Solon:Hello world!

    Solon:Hello world! (一)新建一个 maven 空项目 (二)添加 maven 引用 <dependency> <groupId>org.noear</ ...

  3. Axure 绘制表格添加删除

    1.添加按钮:白底黑框,80X30,文本和命名均为"添加"; 2.数据表格(表头):1行5列,灰底黑框的表格作为表头,从左到右每个格子的文字分别为:姓名.性别.年龄.电话和操作: ...

  4. 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快 ...

  5. 使用Expression代替反射读取IDataReader或IDataRecord给实体类赋值

    ExpressionMapper代码 using System; using System.Collections.Concurrent; using System.Collections.Gener ...

  6. 库函数 | C++17 std::filesystem文件系统 用法指北

    本文将针对常用的场景,对 std::filesystem 的使用逐一进行验证: 判断文件夹是否存在 创建单层目录 逐级创建多层目录 创建多级目录 当前文件路径 创建文件"from.dat&q ...

  7. 十、docker镜像的分层

    系列导航 一.docker入门(概念) 二.docker的安装和镜像管理 三.docker容器的常用命令 四.容器的网络访问 五.容器端口转发 六.docker数据卷 七.手动制作docker镜像 八 ...

  8. C#设计模式08——桥接模式的写法

    什么是C#桥接模式?桥接模式是一种结构型设计模式,它可以将抽象部分与实现部分分离,使它们可以独立地变化.这种模式通过将实现细节从抽象类中分离出来,从而让它们可以根据需要独立变化. 为什么要使用C#桥接 ...

  9. Angular系列教程之观察者模式和RxJS

    .markdown-body { line-height: 1.75; font-weight: 400; font-size: 16px; overflow-x: hidden; color: rg ...

  10. 修改Keil uvison4 字体样式

    1.点击扳手配置 2.点击Colors & Fonts,选择其中的8051:Editor C Files,选择Text,点击右侧的Courier New... 3.在里面就可以调节字体了