JS数组扁平化技巧全解析

**JS数组扁平化方法大全：告别多维数组，轻松玩转一维数据** 还在为JavaScript中复杂的多维数组头疼吗？数组扁平化，作为前端开发中的常用技巧，能将多层嵌套的数组转化为一层，方便数据处理。本文将深入探讨JS数组扁平化的多种实现方式，包括ES2019的`flat()`方法、经典递归、`reduce`结合递归以及迭代法。`flat()`简洁高效，但有兼容性限制；递归灵活，但可能导致栈溢出；迭代法避免栈溢出，适用于深度嵌套场景。掌握这些方法，助你轻松应对各种数据结构，提升开发效率！更有实际应用场景分析，助你理解扁平化的必要性。

数组扁平化是将多层嵌套数组转化为一层数组，常用方法包括ES2019的flat()、递归、reduce结合递归及迭代法；flat()性能好且简洁，适合现代环境，递归灵活但可能栈溢出，迭代法可避免栈溢出，适用于深度嵌套场景。

JavaScript数组扁平化，简单来说，就是把一个多层嵌套的数组（也就是二维、三维甚至更多维的数组）转换成一个只有一层的数组。核心思路无非就是遍历数组的每个元素，如果遇到还是数组的元素，就得想办法把它“展开”，直到所有元素都不再是数组为止。这在处理某些后端返回的复杂数据结构，或者需要对所有数据进行统一操作时，显得尤为重要。

解决方案

要实现数组扁平化，其实有几种常见的思路，每种都有其适用场景和一些小考量。

1. 使用 Array.prototype.flat() 方法 (ES2019+): 这是最直接、最现代的方式，如果你的目标环境支持ES2019或更高版本，这几乎是首选。

const nestedArray = [1, [2, 3], [4, [5, 6, [7, 8]]], 9];

// 扁平化一层
const flatOnce = nestedArray.flat();
console.log(flatOnce); // 输出: [1, 2, 3, 4, [5, 6, [7, 8]], 9]

// 扁平化指定深度
const flatTwoLevels = nestedArray.flat(2);
console.log(flatTwoLevels); // 输出: [1, 2, 3, 4, 5, 6, [7, 8], 9]

// 扁平化所有层级（Infinity 表示任意深度）
const flatAll = nestedArray.flat(Infinity);
console.log(flatAll); // 输出: [1, 2, 3, 4, 5, 6, 7, 8, 9]

flat() 方法非常方便，它的参数 depth 决定了扁平化的层级。默认是 1。如果传入 Infinity，它会递归地扁平化所有嵌套数组。

2. 递归实现： 这是理解扁平化原理最基础的方式，即便有了 flat()，了解递归实现也很有价值。

function flattenDeepRecursive(arr) {
  let result = [];
  arr.forEach(item => {
    if (Array.isArray(item)) {
      // 如果是数组，递归调用自身，并将结果合并到当前结果数组
      result = result.concat(flattenDeepRecursive(item));
    } else {
      // 如果不是数组，直接添加到结果数组
      result.push(item);
    }
  });
  return result;
}

const nestedArray = [1, [2, 3], [4, [5, 6, [7, 8]]], 9];
const flatArray = flattenDeepRecursive(nestedArray);
console.log(flatArray); // 输出: [1, 2, 3, 4, 5, 6, 7, 8, 9]

这个递归版本非常直观，遇到数组就“钻进去”继续扁平化，直到遇到非数组元素才“吐出来”。

3. 使用 reduce 结合递归： 这是一种更函数式编程风格的实现，利用 reduce 的累加特性。

function flattenWithReduce(arr) {
  return arr.reduce((acc, val) => {
    // 如果当前值是数组，就递归扁平化它，然后和累加器合并
    // 否则，直接将当前值添加到累加器
    return acc.concat(Array.isArray(val) ? flattenWithReduce(val) : val);
  }, []); // 初始累加器为空数组
}

const nestedArray = [1, [2, 3], [4, [5, 6, [7, 8]]], 9];
const flatArray = flattenWithReduce(nestedArray);
console.log(flatArray); // 输出: [1, 2, 3, 4, 5, 6, 7, 8, 9]

这个方法写起来很简洁，对熟悉 reduce 的开发者来说，可读性也很好。

为什么我们需要数组扁平化？它解决了什么实际问题？

我个人觉得，扁平化数组的需求往往源于数据结构和业务逻辑之间的“不对称”。很多时候，后端接口为了表达数据之间的层级关系，会返回多层嵌套的数据，这在概念上很清晰。但到了前端，尤其是需要展示一个列表、进行统一搜索、或者对所有叶子节点进行某种计算时，这种嵌套结构反而成了障碍。

比如，你可能从API得到一个复杂的菜单结构，里面有主菜单、子菜单、再子菜单，但现在产品经理说：“我们要做一个全局搜索，能搜到所有菜单项，不管它藏得多深。”这时候，你拿着一个多维数组去遍历查找，显然不如把它先扁平化成一个一维数组来得痛快。

再举个例子，假设你要统计一个组织架构里所有员工的工龄总和，而这个组织架构也是按部门、小组层层嵌套的。如果不对数据进行扁平化处理，你得写好几层循环才能触及到所有员工数据，而扁平化后，你只需要一次遍历就能搞定。

对我来说，扁平化更多是为了简化后续的数据处理逻辑。当数据“平”了，很多算法和操作就变得直观、线性，减少了处理层级嵌套带来的心智负担和代码复杂度。

不同的扁平化方法在性能和适用场景上有什么区别？

在选择扁平化方法时，性能和适用场景是两个绕不开的话题。

Array.prototype.flat() 是现代浏览器内置的方法，通常是用C++等底层语言实现的，所以它的性能通常是最好的。它简洁、高效，而且能够指定扁平化的深度，或者直接用 Infinity 扁平化所有层级。它的主要“缺点”可能就是兼容性问题了，如果你的项目需要支持IE或者非常老的浏览器环境，那可能需要引入Polyfill或者选择其他方案。对我而言，如果项目允许，我肯定优先用它，因为它代码量最少，也最符合“JS原生能力”的理念。

递归实现的方案，包括我们自己手写的循环递归或者 reduce 结合递归的方案，它们的兼容性非常好，几乎在所有JavaScript环境中都能运行。它们也提供了最大的灵活性，比如你可以在递归过程中加入额外的逻辑，比如只扁平化特定类型的元素，或者在扁平化的同时进行数据转换。然而，递归有一个潜在的陷阱：栈溢出（Stack Overflow）。如果你的数组嵌套层级非常深（比如几千层），每次函数调用都会在调用栈上创建一个新的帧，当调用栈深度超过JavaScript引擎的限制时，就会抛出错误。在性能上，纯JavaScript的递归通常不如原生的 flat() 方法。

那么，什么时候选哪个呢？

• 优先 flat()： 当你不需要处理非常老的浏览器，或者已经有Babel等工具进行转译时，这是最推荐的。它简单、性能好。
• 选择递归/reduce 递归： 当你需要处理旧环境兼容性，或者需要在扁平化过程中加入自定义逻辑时。但要警惕超深嵌套数组带来的栈溢出风险。
• 考虑迭代（非递归）方案： 如果你确定会遇到深度未知且可能非常深的嵌套数组，并且想避免栈溢出，那么基于循环和栈（或队列）的迭代扁平化方案会是更健壮的选择。虽然实现起来比递归稍微复杂一点，但它能有效规避栈溢出的问题。

扁平化过程中可能遇到哪些陷阱或挑战？如何避免？

在实际操作中，扁平化并不是简单的“一键到底”，有些细节和挑战需要留意。

一个最典型的挑战就是前面提到的“栈溢出”。当你使用递归方法去扁平化一个嵌套层级极深的数组时，比如一个数组里套着一个数组，这个数组又套着一个数组，层层叠叠几千上万层，JavaScript引擎的调用栈是有限的，很快就会因为递归调用层数过多而耗尽，抛出 RangeError: Maximum call stack size exceeded 错误。

如何避免栈溢出？ 最有效的方法就是使用迭代（非递归）的扁平化算法。这种方法通常会借助一个栈（或者队列）来模拟递归过程，但避免了实际的函数调用栈累积。

一个简单的迭代扁平化实现思路：

function flattenIterative(arr) {
  const result = [];
  const stack = [...arr]; // 将初始数组的所有元素放入栈中

  // 当栈不为空时，持续处理
  while (stack.length > 0) {
    const item = stack.shift(); // 取出栈顶元素（这里用shift模拟队列，保证顺序）

    if (Array.isArray(item)) {
      // 如果是数组，将其所有子元素（展开后）放回栈的头部
      // 这样可以确保子数组的元素在当前层级的其他元素之前被处理
      stack.unshift(...item);
    } else {
      // 如果不是数组，就添加到结果数组
      result.push(item);
    }
  }
  return result;
}

const deepNestedArray = [1, [2, [3, [4, [5, [6, [7, [8, [9, [10, /* ... 很多层 */]]]]]]]]]]];
// 假设这里 deepNestedArray 嵌套了上千层
// const flatArray = flattenDeepRecursive(deepNestedArray); // 这可能会栈溢出
const flatArray = flattenIterative(deepNestedArray); // 这个通常不会
console.log(flatArray); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, ...]

这种迭代方式，无论数组嵌套多深，都不会导致栈溢出，因为它只依赖于循环和数组操作，而不是函数调用栈。

其他挑战：

• 非数组元素混入： 有时候数组里不仅有嵌套数组，还可能混入了 null, undefined, Set, Map 或者普通对象。flat() 方法只会扁平化数组，其他类型的复杂对象会原样保留。如果你需要对这些非数组的复杂对象也进行某种“扁平化”（比如提取它们内部的值），那你的自定义扁平化逻辑就需要额外的判断和处理。
• 性能瓶颈： 即使是迭代方法，对于包含数百万甚至上亿元素的巨大数组，扁平化操作本身仍然是计算密集型的。在处理超大规模数据时，需要考虑是否真的需要一次性完全扁平化，或者是否可以分批处理、懒加载，甚至在数据源头就进行预处理。
• 原始数据结构语义丢失： 扁平化操作会彻底抹平数组的层级结构。如果原始的嵌套结构本身携带着重要的语义信息（比如父子关系、层级深度），那么扁平化后这些信息就丢失了。在这种情况下，你可能需要考虑在扁平化时额外记录这些信息（比如转换为带有 depth 属性的对象数组），或者重新审视扁平化是否是最佳方案。有时候，保留部分层级或者使用其他数据结构（如树形结构）会更合适。

终于介绍完啦！小伙伴们，这篇关于《JS数组扁平化技巧全解析》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！