在JavaScript开发中，我们经常会遇到嵌套的多维数组场景，比如后台接口返回的数据存在多层嵌套结构，此时需要把多维数组转换为一维数组，这个过程就是数组扁平化。针对这个需求，我们可以选择原生API快速实现，也可以根据场景手写对应的处理逻辑。
一、使用原生flat方法实现
ES6之后JavaScript数组新增了flat方法，专门用来处理数组扁平化，它的参数表示需要扁平化的层级深度，默认是1层。如果不清楚数组的嵌套深度，可以传入Infinity表示无限层级扁平化。
// 定义多维数组 const multiArray = [1, [2, [3, [4, 5]]], 6]; // 扁平化1层 const flatOne = multiArray.flat(1); console.log(flatOne); // 输出 [1, 2, [3, [4, 5]], 6] // 扁平化2层 const flatTwo = multiArray.flat(2); console.log(flatTwo); // 输出 [1, 2, 3, [4, 5], 6] // 无限层级扁平化 const flatAll = multiArray.flat(Infinity); console.log(flatAll); // 输出 [1, 2, 3, 4, 5, 6]
二、手写递归遍历实现
如果需要兼容不支持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]]], 6];
console.log(flattenArray(testArr)); // 输出 [1, 2, 3, 4, 5, 6]
三、使用reduce方法结合递归实现
数组的reduce方法可以对数组每一项进行累积处理，结合递归也可以实现扁平化。这种方式可以把遍历和累积的逻辑合并，代码结构更简洁。
function flattenByReduce(arr) {
return arr.reduce((prev, curr) => {
// 如果当前项是数组，递归处理后再合并到累积结果
if (Array.isArray(curr)) {
return prev.concat(flattenByReduce(curr));
} else {
// 非数组项直接合并到累积结果
return prev.concat(curr);
}
}, []);
}
// 测试
const testArr2 = [1, [2, [3, [4, 5]]], 6];
console.log(flattenByReduce(testArr2)); // 输出 [1, 2, 3, 4, 5, 6]
四、使用扩展运算符结合递归实现
扩展运算符可以把数组展开为一层结构，结合some方法判断数组中是否还有嵌套数组，不断展开直到没有嵌套数组为止。
function flattenBySpread(arr) {
// 只要数组中还有数组项，就继续展开
while (arr.some(item => Array.isArray(item))) {
arr = [].concat(...arr);
}
return arr;
}
// 测试
const testArr3 = [1, [2, [3, [4, 5]]], 6];
console.log(flattenBySpread(testArr3)); // 输出 [1, 2, 3, 4, 5, 6]
五、不同方法对比
以下是几种实现方式的特点对比：
| 实现方式 | 优点 | 缺点 |
|---|---|---|
| 原生flat方法 | 代码简洁，性能较好，无需手写逻辑 | 兼容性问题，不支持ES6的环境无法使用 |
| 递归遍历实现 | 逻辑清晰，兼容性较好 | 代码量稍多，深层嵌套可能有栈溢出风险 |
| reduce结合递归 | 函数式编程风格，代码简洁 | 深层嵌套可能有栈溢出风险 |
| 扩展运算符结合递归 | 无需递归调用自身，减少栈溢出风险 | 循环次数可能较多，性能略低 |
实际开发中，如果不需要兼容旧环境，优先使用原生的flat方法，代码更简洁高效。如果需要兼容旧浏览器，可以根据场景选择手写实现方案，深层嵌套数组的场景可以优先考虑扩展运算符的实现方式，避免栈溢出问题。
JavaScript数组扁平化多维数组处理flat方法递归修改时间：2026-07-19 05:24:24