背景

现在项目中哟这样的一个需求，左边显示一棵树目录，点击目录的一级或二级节点，右边显示其子节点中的所有叶子节点，而且要求前端来做这个，不用调用接口请求了，那么，这里记录一下我的实现方法。点击叶子节点，是另外的显示，此处不做讨论。

树结构

先来构造一个树形的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') {

// 查找叶子节点

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);

调用结果：

完整代码查看：递归遍历树结构，从某个节点开始查找其子节点中的所有叶子节点，打开这个代码示例页面,F12打开控制台可以看到输出。

参考