JavaScript递归：深入理解递归遍历树结构

在JavaScript编程中，树结构是一种常见的数据组织形式，它广泛应用于各种场景，如文件系统、组织结构图、菜单导航等。当需要处理树结构数据时，递归是一种非常有效的方法。本文将通过一个实际的例子，讲解如何使用递归遍历树结构，并筛选出特定的数据。

1. 目的

本例的目的是实现一个功能，当全选树形结构数据时，能够遍历并获取所有类型为channel的视频点位数据给到右边在线视频轮播数组，这些数据可能位于树的任意层级，包括一级和二级菜单下。

2. 源数据示例

以下是树形数据的示例：

"videoTreeList": [
    {
        "id": "1111111111111111111",
        "parentId": null,
        "label": "延长油田股份有限公司",
        "type": "channel",
        "children": [
            {
                "id": "1780860366510219633",
                "parentId": null,
                "label": "科技与信息化管理部",
                "type": "dept"
            },
            {
                "id": "1780860489814486529",
                "parentId": null,
                "label": "吴起采油厂",
                "type": "channel",
                "children": [
                    {
                        "id": "1721927218411265537",
                        "parentId": null,
                        "label": "车辆管控",
                        "type": "dept",
                        "children": [
                            {
                                "id": "1798960674111263970",
                                "parentId": null,
                                "label": "吴仓堡采油队",
                                "type": "channel"
                            }
                        ]
                    },
                    {
                        "id": "1798959832712606849",
                        "parentId": null,
                        "label": "联合站",
                        "type": "dept",
                        "children": [
                            {
                                "id": "1798960827117642882",
                                "parentId": null,
                                "label": "李安沟门联合站",
                                "type": "channel"
                            },
                        ]
                    },
                ]
            }
        ]
    }
]

3. 数据获取策略

由于源数据是树形结构，我们只对type为channel的数据感兴趣。为了避免在每次判断时都遍历整个树，我们可以在获取数据时就将需要的数据提取出来，转换成普通数组，这样在后续的判断和遍历中会更加快速和方便。

4. 递归遍历实现

递归是一种在函数执行过程中调用自身的方法。以下是如何实现递归遍历树并筛选出视频点位数据的代码示例：

// 定义视频点位数据数组
let videoList = [];

// 递归方法，用于获取视频点位ID数据
function getVideoList(videoTreeList, videoList) {
  for (let item of videoTreeList) {
    if (item.type === 'channel') {
      // 如果节点类型为channel，则将其ID添加到视频点位数组中
      videoList.push({
        videoId: item.id
      });
    }
    // 如果当前节点有子节点，则递归调用该方法遍历子节点
    if (item.children && item.children.length > 0) {
      getVideoList(item.children, videoList);
    }
  }
}

// 调用递归方法
getVideoList(videoTreeList, videoList);

5. 代码解释

• videoList：用于存储筛选后的视频点位数据。
• getVideoList：递归函数，接收树形数据和视频点位数组作为参数。
• 在递归函数中，我们首先检查当前节点的type属性。如果为channel，则将该节点的id添加到videoList中。
• 如果当前节点包含子节点（children属性），则递归调用getVideoList方法，传入子节点数组和视频点位数组，继续遍历。

7. 结语

递归是一种强大的工具，特别是在处理树形结构数据时。通过上述示例，我们可以看到递归如何帮助我们简洁而高效地解决问题。希望本文能够帮助你更好地理解和运用递归遍历树结构的方法。