数组扁平化是JavaScript开发中处理嵌套数组的常用操作，目的是将多层嵌套的数组结构转换为只有一层的一维数组，方便后续的数据遍历、筛选等处理。在实际开发中，我们经常会遇到后端返回的多层嵌套数组数据，这时候就需要用到数组扁平化的方法。
什么是数组扁平化
数组扁平化也叫数组降维，简单来说就是把类似[1, [2, [3, [4]], 5]]这样的嵌套数组，转换成[1, 2, 3, 4, 5]这样的一维数组。嵌套的层数没有固定限制，扁平化操作需要把所有层级的数组元素都提取到最外层数组中。
使用原生flat方法实现扁平化
ES6之后JavaScript数组新增了flat方法，专门用于数组扁平化操作，使用起来非常便捷。该方法接收一个参数，表示需要扁平化的层级深度，默认值为1。
flat方法的基本用法
当不知道数组具体嵌套多少层时，可以传入Infinity作为参数，直接将所有层级的嵌套数组都扁平化。
// 定义多层嵌套数组 const nestedArr = [1, [2, [3, [4, [5]]], 6]]; // 扁平化一层 const flatOneLevel = nestedArr.flat(1); console.log(flatOneLevel); // 输出：[1, 2, [3, [4, [5]]], 6] // 扁平化两层 const flatTwoLevel = nestedArr.flat(2); console.log(flatTwoLevel); // 输出：[1, 2, 3, [4, [5]], 6] // 扁平化所有层级 const flatAll = nestedArr.flat(Infinity); console.log(flatAll); // 输出：[1, 2, 3, 4, 5, 6]
flat方法的注意事项
flat方法会跳过数组中的空位，不会保留空元素- 如果原数组没有嵌套结构，调用
flat方法会返回原数组的浅拷贝 - 该方法属于ES6新增特性，部分旧版本浏览器可能不支持，需要做兼容性处理
递归实现数组扁平化
如果需要兼容不支持flat方法的运行环境，或者想要深入理解扁平化的实现逻辑，可以自己用递归的方式实现数组扁平化功能。
基础递归实现
核心思路是遍历数组的每一个元素，如果当前元素是数组，就递归调用扁平化函数处理这个子数组，否则就把元素直接放到结果数组中。
function flattenArray(arr) {
// 定义结果数组
const result = [];
// 遍历输入数组
for (let i = 0; i < arr.length; i++) {
const item = arr[i];
// 判断当前元素是否为数组
if (Array.isArray(item)) {
// 如果是数组，递归扁平化后把结果合并到结果数组
result.push(...flattenArray(item));
} else {
// 如果不是数组，直接加入结果数组
result.push(item);
}
}
return result;
}
// 测试代码
const testArr = [1, [2, [3, [4]], 5]];
const flattened = flattenArray(testArr);
console.log(flattened); // 输出：[1, 2, 3, 4, 5]
递归实现的优化版本
上面的基础版本每次递归都会创建新的数组，效率上有优化空间，可以改成传入结果数组作为参数，减少数组创建次数。
function flattenArrayOptimized(arr, result = []) {
for (let i = 0; i < arr.length; i++) {
const item = arr[i];
if (Array.isArray(item)) {
// 递归处理子数组，把结果直接追加到传入的result数组
flattenArrayOptimized(item, result);
} else {
result.push(item);
}
}
return result;
}
// 测试代码
const testArr2 = [1, [2, [3, [4]], 5]];
const flattened2 = flattenArrayOptimized(testArr2);
console.log(flattened2); // 输出：[1, 2, 3, 4, 5]
两种方法的对比
| 对比维度 | flat方法 | 递归实现 |
|---|---|---|
| 使用便捷性 | 一行代码即可完成，无需额外逻辑 | 需要编写额外函数，代码量更多 |
| 兼容性 | 仅支持现代浏览器，旧环境不兼容 | 所有支持ES5的环境都可以运行 |
| 执行效率 | 底层实现优化较好，效率更高 | 自定义实现效率略低，优化后接近原生 |
| 灵活性 | 仅支持按层级扁平化，无法自定义处理逻辑 | 可以在递归过程中添加自定义处理规则 |
实际开发中的选择建议
如果项目不需要兼容旧版本浏览器，优先使用原生的flat方法，代码更简洁，执行效率也更高。如果需要兼容旧环境，或者需要在扁平化过程中对元素做额外的处理，比如过滤某些值，就可以选择递归实现的方式，自定义处理逻辑更灵活。
JavaScript数组扁平化flat方法递归实现修改时间：2026-06-24 12:12:17