Array.flatMap() 用法详解与实战应用

JavaScript 的 `Array.flatMap()` 是一个高效强大的数组处理方法，它将映射（map）与浅层展平（flat(1)）合二为一，天然支持在单次遍历中 simultaneously 完成过滤、映射和展平三重操作——关键在于让回调函数对保留项返回 `[value]`、对丢弃项返回 `[]`，从而以极简且语义清晰的方式替代传统 `filter().map()` 的两次遍历，尤其擅长处理嵌套字段提取、条件转换、空值安全解构等常见痛点场景，大幅提升代码性能与可读性。

flatMap() 是 JavaScript 中一个非常实用的数组方法，它把 map() 和 flat(1) 合并为一步：先对每个元素执行映射函数（返回任意长度的数组），再将所有结果数组**浅层展平一层**。正因如此，它天然适合在单次遍历中同时完成**过滤 + 映射 + 展平**三件事——关键在于让映射函数对“要保留”的项返回一个含值的数组（如 [newItem]），对“要丢弃”的项返回空数组（[]）。

用空数组实现隐式过滤

flatMap 不会跳过或忽略映射结果中的 undefined、null 或 0，但它会忠实展平你返回的数组。所以过滤逻辑应落在“返回什么数组”上：

• 想保留某项 → 返回 [mappedValue]（一个含一个元素的数组）
• 想丢弃某项 → 返回 []（空数组，展平后不产生任何元素）
• 想展开多个值 → 返回 [a, b, c]（展平后依次插入）

典型场景：提取并扁平化嵌套字段

比如处理用户列表，每个用户有 tags 数组，你想获取所有不重复的标签（去重可后续做，这里先收集）：

const allTags = users.flatMap(user => user.tags);
// → ['js', 'react', 'css', 'html']

这里没有显式过滤，但 Charlie 的空 tags 自动被“过滤掉”，因为 [] 展平后无元素。

组合过滤与映射：只取偶数的平方

给定数字数组，要求：过滤出偶数，再计算其平方，最后扁平结果（虽然本例无需展平多层，但逻辑清晰）：

对比传统写法：nums.filter(n => n % 2 === 0).map(n => n * n) —— 需两次遍历；而 flatMap 一次搞定，且语义紧凑。

处理可能为 null/undefined 的嵌套结构

当数据结构不健壮时，可在映射函数中安全解构并条件返回：

const avatars = data.flatMap(item =>
  item.profile?.avatar ? [item.profile.avatar] : []
);
// → ['a1.jpg', 'a2.jpg']

既避免了 Cannot read property 'avatar' of null，又跳过了无效项，全程一次循环。

本篇关于《Array.flatMap() 用法详解与实战应用》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！