如何使用高阶函数(HOF)提取嵌套数组/对象中的居民姓名

你当前的代码返回的是每个物种的residents数组组成的二维数组，所以无法直接获取到所有居民的姓名，你可以通过以下两种高阶函数组合的方式实现需求：

方案1：使用flatMap高阶函数（推荐） #

flatMap本质是map操作+深度为1的数组拍平操作，可以直接输出一维的姓名集合，代码最简洁：

const residentNames = species.flatMap(specie => 
  specie.residents.map(resident => resident.name)
)

执行后直接返回所有居民姓名组成的一维数组，示例中的狮子数据会返回['Zena', ...其余居民姓名]格式的结果。

方案2：使用reduce实现兼容写法 #

如果运行环境不支持ES2019新增的flatMap，可以用兼容性更强的reduce实现相同效果：

const residentNames = species.reduce((result, currentSpecie) => {
  const currentNames = currentSpecie.residents.map(res => res.name)
  return result.concat(currentNames)
}, [])

• 兼容提示：如果部分物种可能不存在residents字段，可以添加可选链?.做防御性处理避免报错，写法为：specie.residents?.map(resident => resident.name) ?? []

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