如何删除JavaScript嵌套对象数组中无有效子节点的条目

核心思路 #

解决这个问题的关键是先清理子节点，再判断当前节点是否保留：

1. 先递归处理所有子节点，过滤掉其中仅含parent、无有效内容的条目
2. 对当前节点，判断是否满足保留条件：要么自身有parent/children之外的有效属性，要么过滤后的子节点数组不为空
3. 用reduce而非map构建结果数组，实现选择性保留节点

示例待清理数据 #

假设你的待处理数据结构如下：

const rawData = [
  {
    parent: 'root',
    children: [
      { parent: 'node1', children: [] }, // 需过滤：仅parent，子节点为空
      { 
        parent: 'node2', 
        children: [
          { parent: 'node2-1', value: 'valid' }, // 有效节点：含业务属性
          { parent: 'node2-2', children: [] } // 需过滤
        ]
      },
      { parent: 'node3', value: 'direct valid' } // 有效节点：含业务属性
    ]
  }
];

修复后的递归过滤代码 #

function filterValidNodes(nodes) {
  return nodes.reduce((validNodes, currentNode) => {
    // 第一步：递归过滤当前节点的子节点
    let filteredChildren = [];
    if (currentNode.children && Array.isArray(currentNode.children)) {
      filteredChildren = filterValidNodes(currentNode.children);
    }

    // 第二步：判断当前节点是否需要保留
    // 条件1：存在除parent、children外的其他属性
    const hasExtraProperties = Object.keys(currentNode).some(key => key !== 'parent' && key !== 'children');
    // 条件2：过滤后的子节点数组不为空
    const hasValidChildren = filteredChildren.length > 0;

    if (hasExtraProperties || hasValidChildren) {
      // 保留节点：如果子节点为空则移除children属性，避免冗余
      const cleanedNode = { ...currentNode };
      if (filteredChildren.length > 0) {
        cleanedNode.children = filteredChildren;
      } else {
        delete cleanedNode.children;
      }
      validNodes.push(cleanedNode);
    }

    return validNodes;
  }, []);
}

预期输出 #

调用filterValidNodes(rawData)后，得到的结果：

[
  {
    parent: 'root',
    children: [
      { 
        parent: 'node2', 
        children: [
          { parent: 'node2-1', value: 'valid' }
        ]
      },
      { parent: 'node3', value: 'direct valid' }
    ]
  }
]

关键细节说明 #

• 递归顺序：先处理子节点再判断当前节点，确保子节点层已经完全清理，不会把无效子节点算入判断条件
• 保留条件：覆盖两种有效节点场景——自身带业务属性的节点，以及包含有效子节点的父节点
• 冗余清理：如果过滤后子节点为空，主动删除children属性，避免结果中出现空数组的冗余字段

内容的提问来源于stack exchange，提问作者Julio Orozco