关于#树结构循环#的问题，如何解决？

Question

碰到循环树结构问题

需求是传入一个id,例如:B3OCM,通过循环得到只包含B3OCM的树结构:同时单板级和之前节点的不变
请注意! 此段树结构要寻找的 boardId 是数组内包多个id

const BoardMenus = [
    {
        key: '/neConfig/dvm/Spec/SystemConfiguration',
        display: ['System Configuration', '配置管理'],
        children: [
            {
                key: '/Subrack',
                display: ['Subrack', '单板级'],
                children: [
                    {
                        key: '/Configuration',
                        display: ['Configuration', '配置'],
                        children: [
                            {
                                key: '/WDM_Interface/WDMInterface', display: ['WDM Interface', 'WDM接口'],
                                boardId: ['B3OCM', 'B3PDU'],
                                type: '1'
                            },
                            {
                                key: '/Optical_Power_Management/OpticalPowerManagement', display: ['Optical Power Management', '光功率管理'],
                                boardId: ['B3PDU', 'B3OCM'],
                                type: '1'
                            },
                            {
                                key: '/Environment_Monitor', display: ['Environment Monitor', '环境监视配置'],
                                children: [
                                    {
                                        key: '/Environment_Monitor_Interface/Monitor_Interface', display: ['Environment Monitor Interface', '环境监视接口'],
                                        boardId: ['B3PDU', 'B3OCM'],
                                        type: '1'
                                    }
                                ]
                            },
                            {
                                key: '/Flexgrid_Monitor_Wavelength/FlexgridMonitorWavelength', display: ['Flexgrid Monitor Wavelength', 'Flexgrid监控器波长'],
                                boardId: ['B3LDU'],
                                type: '1'
                            },
                            {
                                key: '/Threshold_Management/ThresholdManagement', display: ['Threshold Management', '阈值管理'],
                                boardId: ['B3LDU'],
                                type: '1'
                            },
                        ]
                    },
                    {
                        key: '/Alarm',
                        display: ['Board Alarm', '告警'],
                        children: [
                            {
                                key: '/Alarm_Severity_Auto/AlarmSeverityAuto', display: ['Alarm Severity Auto', '告警级别和自动上报设置'],
                                boardId: ['B3OCM', 'B3PDU'],
                                type: '2'
                            },
                            { key: '/Alarm_Suppression/AlarmSuppression', display: ['Alarm Suppression', '告警抑制'] },
                            { key: '/Alarm_Reversion/AlarmReversion', display: ['Alarm Reversion', '告警恢复'] },

                        ]
                    },
                    {
                        key: '/Performance',
                        display: ['Subrack Performance', '性能'],
                        children: [
                            {
                                key: '/CurrentPerformance', display: ['Current Performance', '当前性能'],
                                boardId: ['B3OCM', 'B3LDU', 'B3PDU'],
                                type: '3'
                            },
                        ],
                    },

                ],
            },
        ]
    }

]

如果传入上面树结构 并且传入id B3OCM

想要得到的结构是这样的

const Menus = [
    {
        key: '/neConfig/dvm/Spec/SystemConfiguration',
        display: ['System Configuration', '配置管理'],
        children: [
            {
                key: '/Subrack',
                display: ['Subrack', '单板级'],
                children: [
                    {
                        key: '/Configuration',
                        display: ['Configuration', '配置'],
                        type: '1',
                        children: [
                            {
                                key: '/WDM_Interface/WDMInterface', display: ['WDM Interface', 'WDM接口'],
                                boardId: ['B3OCM', 'B3PDU'],
                                type: '1'
                            },
                            {
                                key: '/Optical_Power_Management/OpticalPowerManagement', display: ['Optical Power Management', '光功率管理'],
                                boardId: ['B3PDU', 'B3OCM'],
                                type: '1'
                            },
                            {
                                key: '/Environment_Monitor', display: ['Environment Monitor', '环境监视配置'],
                                children: [
                                    {
                                        key: '/Environment_Monitor_Interface/Monitor_Interface', display: ['Environment Monitor Interface', '环境监视接口'],
                                        boardId: ['B3PDU', 'B3OCM'],
                                        type: '1'
                                    }
                                ]
                            },
                        ]
                    },
                    {
                        key: '/Alarm',
                        display: ['Board Alarm', '告警'],
                        type: '2',
                        children: [
                            {
                                key: '/Alarm_Severity_Auto/AlarmSeverityAuto', display: ['Alarm Severity Auto', '告警级别和自动上报设置'],
                                boardId: ['B3OCM', 'B3PDU'],
                                type: '2'
                            },
                        ]
                    },
                    {
                        key: '/Performance',
                        display: ['Subrack Performance', '性能'],
                        type: '3',
                        children: [
                            {
                                key: '/CurrentPerformance', display: ['Current Performance', '当前性能'],
                                boardId: ['B3OCM', 'B3LDU', 'B3PDU'],
                                type: '3'
                            },
                        ],
                    },

                ],
            },
        ]
    }
]

Answer 1

这个问题看起来需要对 BoardMenus 数组进行递归遍历，找到包含特定 boardId 的节点，并且保留其祖先节点的信息。以下是一个可能的实现方式：

function filterBoardMenusById(menus, targetId) {
  return menus.filter(menu => {
    if (menu.children) {
      menu.children = filterBoardMenusById(menu.children, targetId);
    }
    if (menu.boardId && menu.boardId.includes(targetId)) {
      delete menu.boardId; // 删除目标节点的 boardId 属性
      return true;
    }
    return menu.children && menu.children.length > 0;
  });
}

// 例如，查找包含 B3OCM 的树结构
const targetId = 'B3OCM';
const Menus = filterBoardMenusById([...BoardMenus], targetId);

这里的 filterBoardMenusById 函数接收一个数组参数 menus 和一个字符串参数 targetId，返回一个新的数组。它会先对 menus 进行过滤，对于每个元素：
如果有 children 属性，递归调用 filterBoardMenusById 并更新 children 属性。
如果有 boardId 属性，检查其是否包含 targetId，如果是则删除该属性并返回 true。
如果都不符合，则检查是否有子节点，并且子节点个数大于 0，如果是则返回 true。
最终返回的新数组就是符合条件的树结构。