flat主要用来按照指定深度把嵌套数组“拍平”：不传参数时默认只展开一层，传入Infinity则会一直展开到底；flatMap则是先做映射，再顺手展开一层，更适合“边转换、边合并”的场景。两者都会返回一个新数组，而且都不支持 IE。

Ja vaScript 中 flat 和 flatMap 是处理多维数据最直接、语义最清晰的原生方案。

不用手写递归或嵌套 reduce，代码更短，逻辑更稳。

flat：按需“拍平”嵌套层级

flat() 专门用来降维，它不修改原数组，只返回一个新数组。

关键在于深度控制：

• 不传参数，默认只展开一层：[1, [2, 3], [4, [5]]].flat() → [1, 2, 3, 4, [5]]
• 传数字，指定展开几层：[1, [2, [3, [4]]]].flat(2) → [1, 2, 3, [4]]
• 传 Infinity，彻底扁平化任意深度：[1, [2, [3, [4, 5]]]].flat(Infinity) → [1, 2, 3, 4, 5]
• 自动跳过空槽（比如 [1, , 3]），但保留 undefined 或 null 元素

flatMap：边映射边展平一层

flatMap() 相当于 map() + flat(1) 的组合。

它适合“对每个元素生成数组，再合并成一维”的场景。

• 必须传回调函数，不能省略；返回值可以是数组，也可以是普通值（会自动包装）
• 只扁平一层，不管回调里返回几层嵌套：[1, 2, 3].flatMap(x => [[x]]) → [[1], [2], [3]]（没变）
• 常用在拆分字符串、展开关联字段：["a,b", "c,d"].flatMap(s => s.split(",")) → ["a","b","c","d"]
• 配合条件逻辑做过滤+展开：[1, 2, 3].flatMap(x => x % 2 [x * 2] : []) → [2, 6]

什么时候选哪个？

只想要结构变平，用 flat；既要转换数据、又要合并结果，优先用 flatMap。

比如处理带顿号分隔的字段：

• 原始数据：[{name: "张三、李四", count: "上天、入地"}]
• 用 flatMap 一次搞定：data.flatMap(item => { const names = item.name.split("、"); const counts = item.count.split("、"); return counts.flatMap(c => names.map(n => ({name: n, count: c}))); })

注意点

• 这两个方法都会返回一个新的数组，不会直接改动原始数据
• flat 遇到非数组元素时会原样保留
• flatMap 如果回调返回的不是数组，也不会报错，而是把这个值当成一个普通元素放进结果里
• 旧浏览器对它们的支持并不好，IE 全系都不支持
• 如果项目里有兼容需求，可以补上 polyfill，或者直接用递归来实现同样的效果

《夸克》非常好用的免费AI浏览器

下载APP查看