js遍历树形结构并返回所有的子节点id值

简介: 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));

1425695-20210812233351287-1215089464.png




相关文章
|
3月前
|
JavaScript 前端开发 索引
js遍历的方法与区别
js遍历的方法与区别
57 3
|
2月前
|
JavaScript 前端开发
JavaScript基础知识-数组的遍历
关于JavaScript数组遍历基础知识的文章。
36 2
JavaScript基础知识-数组的遍历
|
28天前
|
JavaScript
js之遍历方法
js之遍历方法
10 0
|
3月前
|
JavaScript 前端开发
JavaScript基础&实战(5)js中的数组、forEach遍历、Date对象、Math、String对象
这篇文章介绍了JavaScript中的数组、Date对象、Math对象以及包装类(String、Number、Boolean),并详细讲解了数组的创建、方法(如forEach、push、pop、unshift、slice、splice)和遍历操作,以及工厂方法创建对象和原型对象的概念。
JavaScript基础&实战(5)js中的数组、forEach遍历、Date对象、Math、String对象
|
3月前
|
机器学习/深度学习 JavaScript
node.js实现遍历所有文件夹里面的js文件,提取所有的url
node.js实现遍历所有文件夹里面的js文件,提取所有的url
|
3月前
|
JavaScript
js之遍历方法
js之遍历方法
35 0
|
4月前
|
JavaScript API
js【最佳实践】遍历数组的八种方法(含数组遍历 API 的对比)for,forEach,for of,map,filter,reduce,every,some
js【最佳实践】遍历数组的八种方法(含数组遍历 API 的对比)for,forEach,for of,map,filter,reduce,every,some
74 1
|
4月前
|
算法 JavaScript
JS 【详解】树的遍历(含深度优先遍历和广度优先遍历的算法实现)
JS 【详解】树的遍历(含深度优先遍历和广度优先遍历的算法实现)
66 0
JS 【详解】树的遍历(含深度优先遍历和广度优先遍历的算法实现)
|
4月前
|
网络架构
若依修改 :id 不跳转注释的资料,路由配置:id不跳转修改,若依的store的permission.js对动态路由有控制
若依修改 :id 不跳转注释的资料,路由配置:id不跳转修改,若依的store的permission.js对动态路由有控制
若依修改 :id 不跳转注释的资料,路由配置:id不跳转修改,若依的store的permission.js对动态路由有控制
|
4月前
|
算法 JavaScript
JS 【详解】二叉树(含二叉树的前、中、后序遍历技巧和算法实现)
JS 【详解】二叉树(含二叉树的前、中、后序遍历技巧和算法实现)
48 0