JavaScript中如何对嵌套树数组进行条件过滤与排序（菜单树场景）

核心实现逻辑 #

整个处理过程通过递归实现，严格匹配两个需求规则：

• 过滤规则：移除所有status !== true的节点，无论该节点是否含有状态为true的子节点（即状态为false的节点及其整个分支直接丢弃）
• 排序规则：对每一层级的有效节点，按照sort字段值做升序排列，从根节点层到最深嵌套的子节点层全量生效

完整实现代码 #

// 递归处理菜单树的方法
function processMenuTree(originTree) {
  // 1. 过滤当前层状态为true的有效节点
  const validNodes = originTree.filter(node => node.status === true)

  // 2. 递归处理每个有效节点的子节点
  const nodesWithProcessedChildren = validNodes.map(node => {
    const processedChildNodes = node.children ? processMenuTree(node.children) : []
    // 子节点层执行排序
    processedChildNodes.sort((prev, next) => prev.sort - next.sort)

    return {
      ...node,
      children: processedChildNodes
    }
  })

  // 3. 当前层节点执行排序
  nodesWithProcessedChildren.sort((prev, next) => prev.sort - next.sort)
  return nodesWithProcessedChildren
}

// 调用处理方法
const result = processMenuTree(items)

效果匹配验证 #

对照给出的原始数据和期望结果校验：

• 原数据中b2节点下status: false的a2节点（含其所有子节点分支）被直接过滤，仅保留同层级下status: true的a4节点
• 原数据中a1 > a2的嵌套子节点层，a5的sort值为1、a3的sort值为2，排序后a5在前、a3在后，与期望结果完全一致

内容的提问来源于stack exchange，提问作者liou cody