JavaScript数组扁平化最推荐Array.prototype.flat(),支持指定深度和跳过空位;兼容旧环境可用reduce+concat递归;toString+split仅限纯数字/字符串且会丢失类型;扩展运算符+递归语义直观但性能略低。

JavaScript 实现数组扁平化,核心是把多维数组(嵌套数组)转成一维数组。最常用、最推荐的是 Array.prototype.flat(),但不同场景下还有其他可靠方法。
用 flat() 方法(ES2019+,最简洁)
flat() 是原生支持的扁平化方法,可指定展开深度,还能处理空位:
-
不传参数默认只展开一层:
[1, [2, 3], [4, [5]]].flat()→[1, 2, 3, 4, [5]] -
传 Infinity 展开所有层级:
[1, [2, [3, [4]]]].flat(Infinity)→[1, 2, 3, 4] -
自动跳过空位:
[1, , [2, 3]].flat()→[1, 2, 3]
用 reduce + concat(兼容老环境,逻辑清晰)
适合需要兼容 IE 或想手动控制流程的场景,递归处理每一项:
- 判断当前元素是否为数组,是则递归扁平,否则直接保留
- 代码简短稳定:
arr.reduce((acc, val) => acc.concat(Array.isArray(val) ? flatten(val) : val), []) - 注意:concat 不会修改原数组,返回新数组;需配合递归函数使用
用 toString() + split()(仅限纯数字/字符串数组)
利用 toString 把嵌套数组转成逗号分隔字符串,再拆回数组——有明显局限性:
立即学习“Java免费学习笔记(深入)”;
- 只适用于所有元素都能被安全转为字符串的场景(如
[1, [2, [3]]]) - 会丢失数据类型(全部变成字符串),且无法处理
undefined、null、对象、布尔值等 - 示例:
[1, [2, [3]]].toString().split(',').map(Number)→[1, 2, 3](需额外类型转换)
用扩展运算符 + 递归(ES6+,语义直观)
利用 [...arr] 展开一层,再逐个判断是否继续展开:
- 写法简洁:
function flatten(arr) { return arr.reduce((acc, item) => Array.isArray(item) ? [...acc, ...flatten(item)] : [...acc, item], []); } - 注意避免无限递归(确保子项确实为数组再递归)
- 性能略低于 flat(),但可读性强,适合教学或轻量项目
基本上就这些。日常开发优先用 flat(Infinity);需要兼容旧浏览器时选 reduce + concat 递归;其他方法按需谨慎使用。











