如何过滤嵌套数组中的元素？——基于animalName的多层动物数组过滤实现问题

你的代码目前只能过滤顶层数组里的元素，没法处理嵌套的animalChild层级。要搞定这个问题，我们需要写一个递归函数，遍历所有层级的节点，同时还要保留符合条件的树形结构——要么当前节点匹配搜索关键词，要么它的子节点里有匹配项（并且子节点也要过滤出符合条件的内容）。

具体实现思路 #

1. 写一个递归辅助函数，逐层遍历每个节点的animalChild
2. 检查当前节点的名称是否匹配搜索词，同时递归过滤子节点
3. 只要当前节点匹配，或者过滤后的子节点数组不为空，就保留该节点（注意复制节点避免修改原数据）；否则跳过该节点

代码示例 #

先确认你的类型定义（和你给出的结构一致）：

type animalsArray = {
  animalID: number;
  animalName: string;
  animalDescription: string;
  animalChild: animalsArray[];
};

然后实现递归过滤函数：

private filterAnimalsRecursive(animals: animalsArray[], search: string): animalsArray[] {
  const lowerSearch = search.toLowerCase();
  // 用reduce构建过滤后的新数组，灵活控制节点是否保留
  return animals.reduce((filteredList, currentAnimal) => {
    // 递归处理当前动物的所有子节点
    const filteredChildren = this.filterAnimalsRecursive(currentAnimal.animalChild || [], lowerSearch);
    
    // 判断当前节点是否匹配，或者子节点存在匹配项
    const isMatch = currentAnimal.animalName.toLowerCase().includes(lowerSearch);
    
    if (isMatch || filteredChildren.length > 0) {
      // 复制原节点并替换为过滤后的子节点，避免修改原数组
      filteredList.push({
        ...currentAnimal,
        animalChild: filteredChildren
      });
    }
    
    return filteredList;
  }, [] as animalsArray[]);
}

最后调用这个函数更新你的过滤结果：

// 假设userInput是从文本框获取的用户输入内容
const searchKeyword = userInput.toLowerCase();
this.filteredanimalsArray.next(
  this.filterAnimalsRecursive(this.animalsArray, searchKeyword)
);

逻辑说明 #

• 用reduce替代filter是因为我们需要同时判断当前节点和子节点的匹配情况，更灵活地决定是否保留节点
• 递归处理子节点保证了所有嵌套层级都能被覆盖到
• 复制节点对象（...currentAnimal）是为了保持原数据的不可变性，避免意外触发不必要的变更检测（这在Angular这类框架里尤为重要）

如果你的需求是只提取所有匹配的节点（不需要保留父节点结构），可以简化逻辑，但通常树形数据的过滤场景下，保留父节点结构会更符合用户的浏览习惯。

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