JS数组扁平化方法与性能对比

JavaScript数组扁平化是将多维数组转化为一维数组的关键操作，本文系统对比了五种主流实现方式——原生flat()、reduce+concat、扩展运算符循环、栈模拟迭代法以及toString+split——深入剖析其原理、适用场景与性能瓶颈：flat()简洁但兼容性受限；reduce+concat逻辑清晰却内存开销大且易栈溢出；扩展运算符循环适合中等深度但效率随层数陡降；栈模拟法高效稳定，是深层嵌套的首选；而toString+split在纯数字场景下速度碾压其他方案。最终指出，没有万能解法，实际选型需综合考量数据类型、嵌套深度、数组规模及浏览器兼容性，理解底层机制才能做出真正贴合业务需求的技术决策。

数组扁平化是将多维数组转换为一维数组的过程，在 JavaScript 中有多种实现方式。不同方法在性能上有明显差异，尤其在处理大数组或深层嵌套结构时表现不一。下面介绍几种常见的扁平化方法，并结合实际场景分析其性能表现。

1. 使用 flat() 方法

flat() 是 ES2019 提供的原生数组方法，语法简洁，支持指定展开深度。

const arr = [1, [2, [3, [4]], 5]]; const result = arr.flat(Infinity); // 深度展开

优点：代码清晰，无需额外逻辑。缺点：兼容性有限（IE 不支持），且在 V8 引擎中底层使用递归实现，深层嵌套可能影响性能。

2. reduce + concat

利用 reduce 遍历数组，结合 concat 合并子项。

const flatten = arr => arr.reduce((acc, val) => Array.isArray(val) ? acc.concat(flatten(val)) : acc.concat(val), [] );

优点：兼容性好，逻辑直观。缺点：concat 会创建新数组，频繁调用导致内存开销大；递归深度大时可能出现栈溢出。

3. 扩展运算符 + concat + 循环

通过 while 循环结合扩展运算符逐层展开。

const flatten = arr => { while (arr.some(Array.isArray)) { arr = [].concat(...arr); } return arr; };

优点：避免递归，适合中等深度数组。缺点：每轮 concat 都生成新数组，性能随层数增加显著下降。

4. 栈模拟迭代法

使用栈结构手动模拟遍历过程，避免递归调用开销。

const flatten = arr => { const stack = [...arr]; const result = []; while (stack.length) { const val = stack.pop(); if (Array.isArray(val)) { stack.push(...val); } else { result.unshift(val); } } return result; };

注意：unshift 影响性能，可改为 reverse 或从头部入栈、尾部出栈优化。此方法空间利用率高，适合深层结构。

5. toString + split（仅限数字）

适用于纯数字数组，通过字符串转换后拆分。

const flatten = arr => arr.toString().split(',').map(Number);

优点：速度极快，特别适合大规模数字扁平化。缺点：仅适用于数字，其他类型会丢失信息（如对象、null 等）。

性能对比总结

在不同场景下的表现：

• 小数组、浅层嵌套：flat() 和 reduce+concat 差距不大，推荐 flat()
• 大数组、中等深度：栈模拟法优于递归方案，避免爆栈
• 纯数字数组：toString + split 性能最优，但需确保数据类型安全
• 极端深层嵌套：避免递归，优先选择迭代式方案

基本上就这些。选择方法时要权衡兼容性、数据类型和性能需求，没有绝对最优解，但了解底层机制有助于做出合理决策。

终于介绍完啦！小伙伴们，这篇关于《JS数组扁平化方法与性能对比》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！