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。

适用场景

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

综合对比表

注：⭐ 越多表示越优。

最佳实践建议

现代项目（支持 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),
  []
);

提示：flat(Infinity) 在大多数现代引擎中已高度优化，通常优于手写递归。

结语

数组扁平化虽是一个“小问题”，却能反映出开发者对语言特性、性能边界和工程实践的理解深度。在实际项目中，应根据运行环境、数据规模、维护成本综合选择方案。对于绝大多数现代前端或 Node.js 应用，arr.flat() 已足够优雅且高效——简单，才是终极的复杂。

到此这篇关于JavaScript进行数组扁平化的四种方法详解与最佳实践的文章就介绍到这了,更多相关JavaScript数组扁平化内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

最新评论