es6遍历树结构并判断_递归遍历树结构，从某个节点开始查
其⼦节点中的所有叶⼦节点...
背景
现在项⽬中哟这样的⼀个需求，左边显⽰⼀棵树⽬录，点击⽬录的⼀级或⼆级节点，右边显⽰其⼦节点中的所有叶⼦节点，⽽且要求前端来做这个，不⽤调⽤接⼝请求了，那么，这⾥记录⼀下我的实现⽅法。点击叶⼦节点，是另外的显⽰，此处不做讨论。
树结构
先来构造⼀个树形的array：
var tree = [
{
"id": 1,
"lv": "L1",
"pid": 0,
"isLastLevel": 0,
"des": "根",
"children": [
{
"id": 2,
"lv": "L2",
"pid": 1,
"isLastLevel": 0,
"des": "项⽬",
"children": [
{
"id": 4,
"lv": "L3",
"pid": 2,
"isLastLevel": 1,
"des": "创建",
"children": null
}
]
},
{
"id": 3,
"lv": "L2", "pid": 1, "des": "任务", "isLastLevel": 0, "children": [
{
"id": 5,
"lv": "L3", "pid": 3, "isLastLevel": 1, "des": "创建", "children": null },
{
"id": 6,
"lv": "L3", "pid": 3, "isLastLevel": 1, "des": "开始", "children": null },
{
"id": 7,
"lv": "L3", "pid": 3, "isLastLevel": 1, "des": "结束", "children": null }
]
}
]
}
];
当然，实际上这棵树是后端接⼝返回的数据。
我们这⾥只是做个模拟。
树的效果：
树结构 查所有叶⼦节点
/* 参数
* array 树结构 查所有叶⼦节点
*/
function parseTreeJson(array) {
for (let index = 0; index < array.length; index++) {
const element = array[index];
// 1.判断element.children是对象
if (element.children && typeof (element.children) == 'object') {
parseTreeJson(element.children)
} else {
// 判断是否为⼦节点
if (element.isLastLevel === 1) {
console.log(element.des + '的id:' + element.id)
// 获得符合的 node
nodes.push(element);
// 获得符合的 nodeId
nodeIds.push(element.id);
}
}
}
}
调⽤⼀下试试看：
var nodes = [];
var nodeIds = [];
parseTreeJson(tree);
console.log('整棵树的 ⼦节点nodeIds:' + nodeIds)
树结构 遍历查某个节点
下⾯的⽅法⽤来遍历查某个节点，然后调⽤上⾯的parseTreeJson(array)⽅法，实现从该节点开始查其⼦节点中的所有叶⼦节点。/* 参数
* array 树结构
* nodeId 某个节点的id 从该节点开始查其⼦节点中的所有叶⼦节点
*/
function loopTreeJson(array, nodeId) {
for (let index = 0; index < array.length; index++) {
const element = array[index];
if (element.id === nodeId) {
// 判断element.children是对象
if (element.children && typeof (element.children) == 'object') {
typeof array
// 查叶⼦节点
parseTreeJson(element.children)
}
} else {
// 判断element.children是对象
if (element.children && typeof (element.children) == 'object') {
// 继续遍历⼦节点查当前nodeId
loopTreeJson(element.children, nodeId)
}
}
}
}
本来应该是点击树节点，获取当前节点id后，调⽤loopTreeJson(tree, id)即可，这⾥不再粘贴html显⽰树的逻辑，下⾯是模拟调⽤：nodes = [];
nodeIds = [];
loopTreeJson(tree, 1);
console.log('点击根nodeId:1 到的⼦节点nodeIds:' + nodeIds);
nodes = [];
nodeIds = [];
loopTreeJson(tree, 2);
console.log('点击项⽬nodeId:2 到的⼦节点nodeIds:' + nodeIds);
nodes = [];
nodeIds = [];
loopTreeJson(tree, 3);
console.log('点击任务nodeId:3 到的⼦节点nodeIds:' + nodeIds);
调⽤结果：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。