JavaScript数组扁平化技巧详解

JavaScript数组扁平化是将多层嵌套数组高效转化为单层结构的关键操作，ES2019引入的`flat()`和`flatMap()`原生方法以语义清晰、性能优异、代码简洁等优势，彻底取代了传统手写递归或`reduce`的繁琐方案：`flat()`支持按需指定展开深度（包括`Infinity`完全扁平），自动跳过空槽；`flatMap()`则巧妙融合映射与单层展平，特别适合条件筛选、元素复制或字符串拆分等“生成即展平”场景；面对混合数据（如`null`、`undefined`、非数组项）也能稳健处理，配合简单过滤或类型判断即可满足生产需求——无论你是优化数据处理流程，还是提升代码可读性与可维护性，掌握这两个现代API都将成为你驾驭嵌套数组的利器。

JavaScript中数组扁平化是指将多层嵌套的数组“压平”成一层，便于后续处理。flat() 和 flatMap() 是ES2019引入的两个原生方法，专门用于简化嵌套数据操作，比手写递归或reduce更简洁、可读性更强。

flat()：按指定深度展开嵌套数组

flat() 返回一个新数组，将原数组中所有子数组（按指定深度）的元素依次取出，合并到结果中。不修改原数组。

语法：arr.flat([depth])，depth 默认为 1，即只展开一层；传入 Infinity 可完全扁平化任意深度嵌套。

• [1, [2, 3], [4, [5]]].flat() → [1, 2, 3, 4, [5]]（只展一层）
• [1, [2, 3], [4, [5]]].flat(2) → [1, 2, 3, 4, 5]（展两层）
• [1, [2, [3, [4]]]].flat(Infinity) → [1, 2, 3, 4]

注意：flat() 会跳过空槽（empty slots），比如 [1, , 3].flat() 得到 [1, 3]；但不会过滤 undefined 或 null 元素。

flatMap()：先映射再扁平（深度为1）

flatMap() 相当于先调用 map()，再对结果执行 flat(1)。它只扁平一层，且必须配合映射函数使用，适合“生成并展平”的场景。

语法：arr.flatMap(callback)，callback 返回数组（或非数组值），最终结果自动展平一层。

• ['a', 'b'].flatMap(x => [x, x]) → ['a', 'a', 'b', 'b']
• [1, 2, 3].flatMap(x => x % 2 === 0 ? [x, x] : []) → [2, 2]（偶数复制，奇数过滤）
• 对比：[1, 2].map(x => [x * 2]) 得 [[2], [4]]；而 [1, 2].flatMap(x => [x * 2]) 得 [2, 4]

优势在于避免中间数组产生，性能略优，逻辑更紧凑——尤其适合条件映射 + 展平组合操作。

处理含空值、非数组项的健壮写法

实际数据常混杂 null、undefined、字符串、对象等。flat() 对非数组项不做处理，但 map/flatMap 中若返回非数组，会被原样保留（不报错）。

• 安全展平混合数据：[1, [2, 3], null, [undefined, [4]]].flat(2) → [1, 2, 3, null, undefined, 4]
• 若想跳过 null/undefined，需额外过滤：arr.flat(Infinity).filter(x => x != null)
• flatMap 中建议显式判断类型，避免意外：arr.flatMap(x => Array.isArray(x) ? x : [x])

不需要兼容老浏览器时，flat/flatMap 比手写递归或 reduce 更直观可靠。

与传统方法对比：何时选谁？

手动实现扁平化（如递归、stack、reduce）灵活性高，但代码冗长；而 flat/flatMap 是标准方案，语义清晰、性能良好、可读性强。

• 只需简单展平 → 用 flat()，指定 depth 或 Infinity
• 需要边转换边展平（如字符串拆分、条件展开）→ 优先用 flatMap()
• 需兼容 IE 或 Node.js < 12 → 回退到 reduce + concat 或递归函数
• 深层嵌套且需自定义逻辑（如跳过特定类型、记录层级）→ 手写递归更合适

现代项目中，flat 和 flatMap 已成为处理嵌套数组的首选工具，简洁又不失表现力。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~