JavaScript 数组扁平化：四种方法详解与最佳实践

最新推荐文章于 2025-11-23 22:15:55 发布

原创最新推荐文章于 2025-11-23 22:15:55 发布 · 1.2k 阅读

38 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript

JavaScript 数组扁平化：四种方法详解与最佳实践

在日常开发中，我们经常会遇到嵌套数组（nested arrays）的处理需求。例如，从 API 接口返回的数据可能包含多层结构，而我们需要将其“拍平”成一维数组以便后续操作。本文将以如下示例数据为切入点，系统性地介绍四种主流的数组扁平化方法，并从语法简洁性、执行性能、兼容性、适用场景等多个维度进行对比分析。

const arr = [[1, 2], [3, 4], [5, 6]];
// 目标：[1, 2, 3, 4, 5, 6]

方法 1：`Array.prototype.flat()`（现代标准，推荐）

基本用法

ES2019（ECMAScript 2019）引入了 flat() 方法，专门用于数组扁平化，语法简洁直观：

const merged = arr.flat();
console.log(merged); // [1, 2, 3, 4, 5, 6]

深度控制

默认只展开一层嵌套。

可通过传入参数指定展开深度：

const deepArr = [[[1, 2]], [[3, 4]]];
console.log(deepArr.flat(2));        // [[1, 2], [3, 4]]
console.log(deepArr.flat(Infinity)); // [1, 2, 3, 4] — 完全扁平化

优势

语义清晰：专为扁平化设计，意图明确。
性能良好：原生实现，V8 等引擎高度优化。
不可变性：不修改原数组，返回新数组。

注意事项

不支持 IE 和部分旧版移动端浏览器（需 Babel 转译或 polyfill）。
对于仅需处理单层嵌套的场景，flat() 是首选方案。

方法 2：扩展运算符 + `concat()`

实现方式

利用 ES6 的扩展运算符（spread operator）将子数组作为参数传入 concat：

const merged = [].concat(...arr);
console.log(merged); // [1, 2, 3, 4, 5, 6]

原理剖析

...arr 将 [[1,2], [3,4], [5,6]] 展开为三个独立参数：[1,2], [3,4], [5,6]。
[].concat(a, b, c) 等价于合并这些数组。

优缺点

✅ 优点：

代码简短，一行搞定。
兼容 ES6+ 环境（现代浏览器和 Node.js 广泛支持）。

❌ 缺点：

存在栈溢出风险：当子数组数量极大（如 > 10⁵）时，函数调用栈可能超出限制（因 concat 接收的是展开后的参数列表）。
仅适用于单层嵌套，无法处理深层结构。

📌 适用建议：适合中小型数组、追求代码简洁性的场景。

方法 3：`Array.prototype.reduce()`

经典写法

const merged = arr.reduce((acc, subArr) => acc.concat(subArr), []);

性能优化写法（使用扩展运算符）

const merged = arr.reduce((acc, subArr) => [...acc, ...subArr], []);

深度解析

第一种写法：每次调用 concat 都会创建一个新数组，时间复杂度为 O(n²)，大数据量下性能较差。
第二种写法：虽然避免了 concat，但 [...acc, ...subArr] 同样会复制整个累加器数组，内存开销大。

适用场景

需要兼容 ES5 或更老环境（如 IE11）。

需要在扁平化过程中加入自定义逻辑（如过滤、映射等）：

arr.reduce((acc, sub) => {
  return acc.concat(sub.filter(x => x > 2));
}, []);

总结

灵活性高，但性能较低。
除非有特殊需求，否则不建议在现代项目中作为首选。

方法 4：`for...of` 循环 + `push(...subArr)`

高性能实现

const merged = [];
for (const subArr of arr) {
  merged.push(...subArr);
}
console.log(merged); // [1, 2, 3, 4, 5, 6]

为什么高效？

原地操作：直接向结果数组追加元素，避免中间数组创建。
无函数调用开销：相比 reduce 或 concat，循环开销极小。
内存友好：适合处理超大数组（如百万级元素）。

注意事项

仍受限于扩展运算符的参数数量上限（理论上 V8 引擎限制约为 65535 个参数），若单个子数组极大（如长度 > 10⁵），可改用 push.apply 或分批处理：
```
for (const subArr of arr) {
  Array.prototype.push.apply(merged, subArr);
}
```
但 push.apply 在极端情况下也可能栈溢出，最稳妥的方式是使用普通 for 循环逐个 push。

适用场景

高性能要求（如数据处理、游戏引擎、实时计算）。
处理大型或不确定规模的嵌套数组。

综合对比表

方法	语法简洁性	执行性能	内存效率	兼容性	适用嵌套深度	是否修改原数组
`arr.flat()`	⭐⭐⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐	ES2019+	可控（默认1层）	否
`[].concat(...arr)`	⭐⭐⭐⭐⭐	⭐⭐⭐	⭐⭐	ES6+	仅1层	否
`reduce() + concat`	⭐⭐⭐	⭐	⭐	广泛（ES5+）	仅1层	否
`for...of + push(...)`	⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐⭐⭐	ES6+	仅1层	否

注：⭐ 越多表示越优。

最佳实践建议

现代项目（支持 ES2019+）
👉优先使用 arr.flat() —— 简洁、安全、高效。
需要兼容旧环境（如 IE11）
使用 reduce 或手动 for 循环，并搭配 Babel 转译。
处理超大数组（> 10⁵ 元素）
选择 for...of + push，并注意单个子数组长度限制。
需要在扁平化时附加逻辑（如去重、过滤）
使用 reduce，灵活组合业务逻辑。

延伸思考：完全扁平化任意深度嵌套

若面对如下结构：

const deeplyNested = [1, [2, [3, [4, [5]]]]];

可封装递归函数或使用 flat(Infinity)：

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