JavaScript 数组映射怎么用 flatMap 展平并转换-js教程-PHP中文网

flatmap是javascript中先映射后浅层展平（一层）的数组方法，等价于map+flat(1)但性能更优；它自动将回调返回值转为数组再展平，支持一对多映射、过滤跳过及嵌套数据聚合。

javascript 数组映射怎么用 flatmap 展平并转换

flatMap 是 JavaScript 中一个非常实用的数组方法，它把 map 和 flat(1) 合并成一步：先对每个元素执行映射（返回一个数组或值），再将所有结果**浅层展平一级**，最后合并成一个新数组。

flatMap 的基本用法

语法：arr.flatMap(callback)，其中 callback 接收当前元素、索引和原数组，必须返回一个数组（或可迭代对象）；如果返回非数组值，会被自动包装成单元素数组再展平。

等价于 arr.map(...).flat(1)，但性能更好、更简洁
只展平一层，不会递归处理嵌套多层的数组
如果回调返回 undefined 或空数组，展平后对应位置不产生任何元素

常见使用场景示例

拆分字符串并过滤空项：

['a,b', 'c,,d', 'e'].flatMap(s => s.split(',')) 
// → ['a', 'b', 'c', '', 'd', 'e']

想跳过空字符串？在 map 阶段过滤即可：

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

['a,b', 'c,,d', 'e'].flatMap(s => 
  s.split(',').filter(str => str !== '')
)
// → ['a', 'b', 'c', 'd', 'e']

映射出多个新元素（比如为每个用户生成多个权限项）：

const users = [{id: 1, roles: ['admin']} , {id: 2, roles: ['user', 'editor']}];
users.flatMap(u => u.roles.map(role => ({userId: u.id, role})))
// → [
//     {userId: 1, role: 'admin'}, 
//     {userId: 2, role: 'user'}, 
//     {userId: 2, role: 'editor'}
//   ]

flatMap 和 map + flat 的区别

看似功能重复，但关键差异在于语义与行为：

map(x => [x]) 返回的是包含数组的数组，flatMap 会把它展平；而 map(x => x) 若 x 是数组，不会被自动处理
flatMap 对 undefined、null 或非数组返回值会隐式转成数组再展平，避免手动包装
当回调需要“一对多”映射时，flatMap 更直观，代码更紧凑

注意边界情况

以下写法容易出错：

[1, 2].flatMap(x => x * 2) → [2, 4]（数字被转成 [2] 和 [4] 再展平）
[1, 2].flatMap(x => null) → []（null 被转成 [null]，展平后是 [null]？错！实际是 [null] —— 等等，不对：null 不是数组，但 flatMap 并不自动忽略它；正确结果是 [null]。要跳过，请显式返回空数组 []）
想深层展平？flatMap 不行，得用 flat(Infinity) 或递归处理