JavaScript如何过滤多层嵌套数组提取sub_friends中符合条件元素

处理的目标数据为三层嵌套对象数组：

• 最顶层为用户对象数组data
• 每个用户对象内置friends数组
• 每个friend对象下设置sub_friends子数组
  需求为遍历所有sub_friends层级，筛选出gender === "male"的所有元素，输出可直接通过map遍历展示名称的一维数组。

• 嵌套调用filter返回空数组：filter仅会判断当前遍历层级的元素，不会自动递归深入子数组，未做数组打平处理时筛选逻辑无法触达sub_friends层，匹配不到目标元素自然返回空结果。
• 嵌套调用map返回全undefined的数组：map是和原数组等长的一一映射方法，未做返回值透传+数组打平处理时，内层遍历的结果不会被正确收集，就会出现undefined占位的问题。

优先用flatMap实现，逻辑清晰代码简洁，返回结果直接是符合要求的一维数组：

// 先做两层数组打平，再统一筛选
const maleSubFriends = data
  .flatMap(user => user.friends ?? []) // 兜底无friends字段的场景
  .flatMap(friend => friend.sub_friends ?? []) // 兜底无sub_friends字段的场景
  .filter(subFriend => subFriend.gender === "male")

// 可直接遍历渲染名称，示例：
maleSubFriends.map(item => console.log(item.name))

如果运行环境不支持flatMap（比如极低版本Node、IE浏览器），可以用reduce手动打平实现：

const maleSubFriends = data.reduce((result, user) => {
  // 遍历当前用户下所有friend
  (user.friends ?? []).forEach(friend => {
    // 筛选当前friend下符合条件的sub_friend，追加到结果集
    const matchedSubs = (friend.sub_friends ?? []).filter(sub => sub.gender === "male")
    result.push(...matchedSubs)
  })
  return result
}, [])

代码里的?? []是空值兜底逻辑，如果可以确定所有层级字段都存在，可以删掉这部分。

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