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 ...
随机推荐
- 从 Uber 数据泄露事件我们可以学到什么?
Uber 数据泄露始于一名黑客从暗网市场购买属于一名 Uber 员工的被盗凭证.最初尝试使用这些凭据连接到 Uber 的网络失败,因为该帐户受 MFA 保护.为了克服这一安全障碍,黑客通过 What' ...
- 零售品牌如何挑选达人 KOL?火山引擎 VeDI 有妙招!
更多技术交流.求职机会,欢迎关注字节跳动数据平台微信公众号,回复[1]进入官方交流群 国内消费市场正在发生一些新变化. 近日,由中国人民大学国家发展与战略研究院.经济学院等联合主办的第 57 期宏观经 ...
- 一文快速了解火山引擎 A/B 测试平台
更多技术交流.求职机会,欢迎关注字节跳动数据平台微信公众号,回复[1]进入官方交流群 一. 概述 A/B Testing 作为因果推断的「黄金标准」,是效果评估的利器. 火山引擎 A/B 测试(Dat ...
- PyCharm View as Array 查看数组
代码中设置断点. 在Debug Variables 里面,点击 View as Array 如下图所示:
- Error creating bean with name 'eurekaAutoServiceRegistration': Singleton bean creation not allowed while singletons
新建一个配置类 package com.cloud.client.user.feign; import org.springframework.beans.BeansException; import ...
- HeaderMap Method has too many Body parameters
在 Feign 方法里面添加 Header 报 Method has too many Body parameters @PostMapping(value = "/sendsms" ...
- JAVA CRC16
JAVA CRC16 /** * CRC-16 * * <table width="400px" border="1" cellpadding=" ...
- Java 模拟数据库连接池的实现
前面学习过等待 - 通知机制,现在我们在其基础上添加一个超时机制,模拟从连接池中获取.使用和释放连接的过程.客户端获取连接的过程被设定为等待超时模式,即如果在 1000 毫秒内无法获取到可用连接,将会 ...
- Jmeter软件测试
1.1. 性能测试是什么 基于协议模拟用户发出请求,对服务器形成一定负载,来测试服务器的性能指标是否满足要求 性能指标关注点:时间性能.空间性能 性能测试与页面无关 性能测试定义:指通过自动化的测试工 ...
- 【第三方库】从编译到运行,轻松学会gflags库
gflags是Google开源的一个库,可以很方便地定义一些全局变量,并且可以从命令行设置他们的值,广泛应用于各个项目中以及自己平时的开发中.本期参考gflags的官方文档,简单直接介绍下怎么使用这个 ...