如何通过visible属性过滤精简树节点并返回修改后的结果

开发者阿泽

2026-10-7

问题排查

原有代码存在两处核心错误：

for循环边界错误：使用i <= node.children.length作为判断条件，数组下标从0开始，最大下标为length-1，会导致最后一次循环读取node.children[node.children.length]得到undefined，触发异常逻辑
返回值逻辑错误：原有判断if(!node || !node?.children) return;会导致无子节点的合法节点返回undefined而非节点本身，同时递归顺序不合理，容易残留子树内的非法节点

修正后代码

function reduceTree(node: any): any {
    // 空节点直接返回空
    if (!node) return null;
    // 没有children的合法节点直接返回自身
    if (!Array.isArray(node.children)) return node;

    // 先递归处理所有子节点，再过滤不符合可见性要求的节点
    const processedChildren = node.children
        .map(child => reduceTree(child))
        .filter(child => {
            return child && (child.visible === undefined || child.visible === true);
        });

    node.children = processedChildren;
    return node;
}

console.log(reduceTree(data));