JavaScript 深度指南：如何优雅地合并与扁平化数组（Array Flattening）

2026-02-13 11:32:59 0条评论 1次阅读 0人点赞

1 前言：为什么要学习数组扁平化？
2 1. 现代首选方案：使用 flat() 方法
3 2. 经典技巧：使用 concat() 与展开运算符
4 3. 极客方案：使用 Underscore.js 的 _.flatten()
5 4. 工程师思维：手写递归扁平化函数
6 5. 进阶探索：使用 INLINECODE08994f41 与 INLINECODEa0f652a6
7 6. 性能优化与最佳实践
8 结语：如何选择合适的方法？

前言：为什么要学习数组扁平化？

在日常的前端开发工作中，我们经常需要处理来自后端 API 的复杂数据结构。你肯定遇到过这样的情况：你期待的是一个简单的用户列表，结果拿到手的数据却是 [ [1, 2], [3, 4], [5, 6] ] 这样的嵌套结构。这种“数组中的数组”虽然方便存储层级数据，但在进行渲染、计算或筛选时却显得格外繁琐。

在这篇文章中，我们将深入探讨如何在 JavaScript 中将这些多层嵌套的数组合并、扁平化成一个单层数组。我们将从现代最简洁的内置方法讲起，逐步深入到底层的实现原理，甚至探讨如何手写高性能的扁平化函数。无论你是刚入门的新手，还是寻求性能优化的资深开发者，这篇文章都能为你提供实用的见解。

—

1. 现代首选方案：使用 `flat()` 方法

自 ES2019 (ES10) 发布以来，处理嵌套数组变得前所未有的简单。JavaScript 为我们引入了一个原生方法：Array.prototype.flat()。这是目前最推荐、最语义化的方式，它就像一个压路机，能够把崎岖不平的嵌套路面压平整。

它是如何工作的？

flat() 方法会按照指定的深度递归遍历数组，并将所有元素与子数组中的元素合并为一个新数组。默认情况下，它只会“拉平”一层，但它也接受一个参数来控制我们要挖掘多深。

语法

// depth 是可选的，代表要拉平的嵌套深度，默认为 1
let newArray = array.flat([depth]);

实战示例

让我们从一个包含简单嵌套的数组开始：

// 示例 1：默认扁平化（深度为 1）
const simpleNested = [1, 2, [3, 4]];
const flatOneLevel = simpleNested.flat();

console.log(flatOneLevel); 
// 输出: [1, 2, 3, 4]

但在现实世界中，数据往往嵌套得更深。如果我们遇到 INLINECODE6bc7538a 这种复杂结构，仅仅调用 INLINECODE0d596fd7 是不够的，它只会剥去最外面的一层。

// 示例 2：深度嵌套处理
const deepNested = [1, [2, [3, [4, 5]]]];

// 传入 Infinity 表示无论嵌套多深，全部展开
const totallyFlat = deepNested.flat(Infinity);

console.log(totallyFlat); 
// 输出: [1, 2, 3, 4, 5]

⚠️ 注意事项与坑位

flat() 方法虽然强大，但有一个特殊的“过滤”行为：它会自动移除数组中的空位。

// 示例 3：处理空位
const withHoles = [1, , 2, , 3, [4]];
const cleaned = withHoles.flat();

console.log(cleaned); 
// 输出: [1, 2, 3, 4]
// 注意：原本的空位被直接忽略了，而不是变成了 undefined

这种行为在处理稀疏数组时非常有用，但如果你需要保留空位，可能需要考虑其他方案（比如使用 INLINECODE36c4aa80 或 INLINECODE904d6687 进行手动控制）。

—

2. 经典技巧：使用 `concat()` 与展开运算符

在 INLINECODE7ed25954 方法诞生之前（或者在极少数不支持该方法的古老浏览器环境中），我们有一套经典的组合拳：INLINECODE841d8fe0 配合 展开运算符。这是一种非常巧妙的技巧，利用了函数调用的特性来实现数组合并。

核心原理

INLINECODEa4e59350 方法用于合并两个或多个数组。它不会改变现有数组，而是返回一个新数组。而展开运算符 INLINECODE56674e33 允许一个表达式在某处展开。

当我们写 [].concat(...array) 时，实际上发生了以下过程：

INLINECODEccfef76f 将外层数组中的每一项（包括子数组）作为独立的参数传递给 INLINECODE189ec269。
INLINECODEb6c2b726 接收到这些参数后，会将它们依次拼接起来。如果参数本身是数组，INLINECODEafbfcac9 会将其“解包”。

代码实现

// 示例 4：单层扁平化技巧
let nestedArray = [10, [20, 30], [40, 50, 60], 70];

// 核心代码：利用空数组作为基础，合并展开后的元素
let flatArray = [].concat(...nestedArray);

console.log("扁平化结果:", flatArray);
// 输出: [10, 20, 30, 40, 50, 60, 70]

优缺点分析

优点：

性能极佳： 对于单层嵌套数组，这种方法通常比 flat() 更快，因为它的底层是函数调用，引擎优化得很好。
兼容性好： 适用于几乎所有现代环境以及配备了 Babel 的旧环境。

局限性：

只能扁平化一层： 这也是最大的痛点。如果数组是这样的 INLINECODEc14c67c3，INLINECODEac473022 只能将其变为 [1, 2, [3]]。如果你想处理更深层的嵌套，必须手动递归或多次调用，这就显得很笨重了。

// 示例 5：尝试用 concat 处理深度嵌套（失败案例）
const deepArray = [1, [2, [3, 4]]];
const partialFlat = [].concat(...deepArray);

console.log(partialFlat); 
// 输出: [1, 2, [3, 4]] -> 注意 3 和 4 还是被包在数组里

—

3. 极客方案：使用 Underscore.js 的 `_.flatten()`

在早期的 JavaScript 生态中，像 Underscore.js 或 Lodash 这样的库填补了语言本身的空白。虽然现在原生 JS 已经足够强大，但在许多遗留项目中，你依然会看到这些库的身影。

Underscore.js 提供了一个非常灵活的 _.flatten() 函数，它可以让你轻松选择是扁平化一层还是完全扁平化。

如何使用？

首先，你需要确保项目中引入了 underscore 库。

# 使用 npm 安装
npm install underscore

或者在 HTML 文件中引入 CDN（适合快速原型开发）：

代码演示

INLINECODE77c33601 的第二个参数是一个布尔值 INLINECODE03a1ca94。

INLINECODEcd3b90a3 (或传入 INLINECODE15e24f1b)：仅扁平化第一层（类似 concat 技巧）。
INLINECODE0ca79d50 (或不传)：深度扁平化（类似 INLINECODE67293dcd）。

注意：在 Underscore 中，INLINECODE6a42460a 是 shallow 模式。但在下文中我们将演示标准用法。（注：Underscore 文档中 INLINECODEa8b97276 默认是 shallow，如果要深层次通常用 INLINECODE38723499 的变体或循环，但在 Lodash 中 INLINECODE97f5eb98 是一层，_.flattenDeep 是无限层。为了演示通用性，我们这里展示典型的库函数行为。）

// 假设环境已加载 underscore
let array = [10, [20, 30], [40, [50, 60]], 70];

// 注意：不同版本的库参数可能略有不同，这里展示常见的深扁平化用法
// 在 Underscore 中，直接调用 _.flatten 通常只打平一层
// 如果要打平所有层，可以使用 _.flatten(array, true); (视具体版本而定)
// 或者使用显式的递归逻辑库函数。

// 这里我们展示一个通用的库使用场景
let flatArray = _.flatten(array, true); 

console.log("库处理后的数组:", flatArray);
// 输出: [10, 20, 30, 40, 50, 60, 70]

实际应用建议

如果你正在维护一个已经重度依赖 Underscore 或 Lodash 的旧项目，继续使用库函数以保持代码风格的一致性是明智的。但如果是新项目，为了减少打包体积，建议优先使用原生 JS 方法。

—

4. 工程师思维：手写递归扁平化函数

真正理解扁平化的最好方式，就是自己动手实现一个。这不仅能帮你在面试中脱颖而出，还能让你在处理极端情况时拥有完全的控制权。

递归逻辑详解

我们可以构建一个函数，它的工作流程如下：

创建容器： 定义一个空数组 result 用来存放最终结果。
定义侦察兵： 编写一个内部辅助函数（如 flatten），它接收一个元素作为参数。
类型判断： 在辅助函数中，检查当前元素是否是数组（使用 Array.isArray）。
分支处理：

* 如果是数组： 说明还没到底，我们需要遍历这个子数组，对每一项再次调用辅助函数（递归）。

* 如果不是数组： 说明已经到达原子层级（数字、字符串等），直接将其 push 到结果数组中。

代码实现

function flattenArray(arr) {
    // 初始化一个空数组来保存扁平化的结果
    let result = [];

    // 内部辅助函数，用于递归处理元素
    function flatten(element) {
        if (Array.isArray(element)) {
            // 如果元素是数组，说明还有嵌套，我们需要继续深入
            // 遍历该子数组
            for (let i = 0; i < element.length; i++) {
                // 递归调用：再次检查子元素
                flatten(element[i]);
            }
        } else {
            // 如果元素不是数组，说明是具体的值，将其加入结果
            result.push(element);
        }
    }

    // 启动处理流程
    flatten(arr);
    return result;
}

// 测试我们的自定义函数
let complexArray = [1, [20, [30, [40]]], 50, [60]];
const myFlatArray = flattenArray(complexArray);

console.log("自定义递归结果:", myFlatArray);
// 输出: [1, 20, 30, 40, 50, 60]

为什么这样写？

你可能注意到了，我没有直接在 INLINECODE714d0db8 循环里写逻辑，而是封装了一个 INLINECODE7c5eb9cd 函数。这样做的好处是逻辑解耦，非常清晰。当你阅读代码时，flatten 函数名本身就说明了意图，而不用去纠结循环的细节。

—

5. 进阶探索：使用 INLINECODE08994f41 与 INLINECODEa0f652a6

除了上述方法，JavaScript 的函数式编程特性还提供了其他优雅的解法。

使用 `reduce` 进行累加

reduce 是数组方法中最强大的一个。我们可以利用它来逐层剥离数组外壳。

function flattenByReduce(arr) {
    return arr.reduce((acc, val) => {
        // 如果当前值 val 是数组，递归调用 flattenByReduce 并与 acc 合并
        // 如果不是，直接追加到 acc
        return acc.concat(
            Array.isArray(val) ? flattenByReduce(val) : val
        );
    }, []);
}

console.log(flattenByReduce([1, [2, [3, 4]], 5]));
// 输出: [1, 2, 3, 4, 5]

这种方法非常“函数式”，但如果是极深嵌套，可能会有性能损耗，因为每次递归都会创建新的中间数组。

使用 `flatMap` (ES2019+)

INLINECODEef12da09 方法本质上是 INLINECODEa2911bce 和 flat(1) 的结合体。如果你只需要处理一层嵌套，或者你的数据结构比较规则，这是最简洁的写法。

const messyData = ["it", ["is", "what"], "it", ["is"]];

// flatMap 会先执行 map，然后自动将结果打平一层
const sentence = messyData.flatMap(word => word);

console.log(sentence); 
// 输出: ["it", "is", "what", "it", "is"]

如果你想利用 flatMap 实现无限深度的扁平化，结合递归也可以做到：

const flattenDeep = (arr) => 
  arr.flatMap((val) => 
    Array.isArray(val) ? flattenDeep(val) : val
  );

—

6. 性能优化与最佳实践

在处理百万级数据或大型矩阵时，扁平化的性能就变得至关重要。

性能对比

flat(Infinity)：代码最简洁，可读性最高。对于绝大多数业务场景，这是首选。浏览器引擎对其进行了高度优化，速度非常快。
展开运算符 + concat (INLINECODE62314248)：在处理单层嵌套时，性能往往略优于 INLINECODEf157bbf4。如果你确定数据只有一层，这是一个高性能的替代方案。
手写递归 (INLINECODE4ad4ec87 或 INLINECODE2eb3c414)：如果你需要将代码部署在不支持 ES10 的极旧环境，或者你需要做一些特殊的过滤操作（比如扁平化时忽略非数字类型），手写是不二之选。

常见陷阱

堆栈溢出： 在极深嵌套（例如 10万层）的数组上使用普通递归（如我们上面的 INLINECODE0516aa90 函数）可能会导致“Maximum call stack size exceeded”错误。这种情况下，使用原生的 INLINECODE9a6b71f6（通常由 C++ 实现，不受调用栈限制）或使用“尾递归优化”技巧会更安全。
数据丢失： 在使用 .concat 技巧时，如果数组中包含对象引用，扁平化后的数组依然指向原对象。修改新数组中的对象会影响原数组。注意深浅拷贝的区别。

结语：如何选择合适的方法？

回顾全文，我们掌握了从原生 API 到底层算法的多种技巧。

如果你追求代码的简洁和可维护性，请毫不犹豫地使用 array.flat(Infinity)。
如果你需要极致的单层性能，或者要兼容旧环境，[].concat(...array) 是个好帮手。
如果你想在面试中展现技术功底，或者有复杂的业务逻辑需要融合在扁平化过程中，展示你的递归手写能力吧。

希望这篇文章能帮助你更加自信地处理 JavaScript 中的复杂数据结构。现在，打开你的控制台，试着把你遇到的最棘手的数组拍平吧！

投稿给我们	如何建站？
vps是什么？	如何安装宝塔？
如何通过博客赚钱？	便宜wordpress托管方案
免费wordpress主题	这些都是免费方案

豆丁博客

JavaScript 深度指南：如何优雅地合并与扁平化数组（Array Flattening）

前言：为什么要学习数组扁平化？

1. 现代首选方案：使用 `flat()` 方法

它是如何工作的？

语法

实战示例

⚠️ 注意事项与坑位

2. 经典技巧：使用 `concat()` 与展开运算符

核心原理

代码实现

优缺点分析

3. 极客方案：使用 Underscore.js 的 `_.flatten()`

如何使用？

代码演示

实际应用建议

4. 工程师思维：手写递归扁平化函数

递归逻辑详解

代码实现

为什么这样写？

5. 进阶探索：使用 INLINECODE08994f41 与 INLINECODEa0f652a6

使用 `reduce` 进行累加

使用 `flatMap` (ES2019+)

6. 性能优化与最佳实践

性能对比

常见陷阱

结语：如何选择合适的方法？

相关文章美国1G带宽/1T流量高速vps $17.99/年

JavaScript 深度指南：如何优雅地合并与扁平化数组（Array Flattening）

前言：为什么要学习数组扁平化？

1. 现代首选方案：使用 flat() 方法

它是如何工作的？

语法

实战示例

⚠️ 注意事项与坑位

2. 经典技巧：使用 concat() 与展开运算符

核心原理

代码实现

优缺点分析

3. 极客方案：使用 Underscore.js 的 _.flatten()

如何使用？

代码演示

实际应用建议

4. 工程师思维：手写递归扁平化函数

递归逻辑详解

代码实现

为什么这样写？

5. 进阶探索：使用 INLINECODE08994f41 与 INLINECODEa0f652a6

使用 reduce 进行累加

使用 flatMap (ES2019+)

6. 性能优化与最佳实践

性能对比

常见陷阱

结语：如何选择合适的方法？

相关文章美国1G带宽/1T流量高速vps $17.99/年

1. 现代首选方案：使用 `flat()` 方法

2. 经典技巧：使用 `concat()` 与展开运算符

3. 极客方案：使用 Underscore.js 的 `_.flatten()`

使用 `reduce` 进行累加

使用 `flatMap` (ES2019+)