JS数组扁平化5种实用方法

从现在开始，我们要努力学习啦！今天我给大家带来《JS数组扁平化方法大全》，感兴趣的朋友请继续看下去吧！下文中的内容我们主要会涉及到等等知识点，如果在阅读本文过程中有遇到不清楚的地方，欢迎留言呀！我们一起讨论，一起学习！

使用 Array.prototype.flat() 可直接扁平化数组，支持指定深度或使用 Infinity 彻底扁平化；2. 递归实现通过判断元素是否为数组进行深度遍历，适用于兼容旧环境但存在栈溢出风险；3. reduce 与 concat 结合实现函数式风格的扁平化，代码优雅但同样有递归深度限制；4. 迭代法利用栈结构模拟递归过程，避免栈溢出，适合处理深度嵌套数组；处理非数组元素时需用 Array.isArray() 判断类型，flat() 方法能自动处理各类元素；递归可能引发栈溢出，解决方案包括使用 flat()、改用迭代或限制递归深度，最终选择应基于兼容性、性能和可读性综合考量。

JavaScript实现数组扁平化，核心在于将多维数组转换为一维数组，让所有元素都处于同一层级。这通常是为了简化数据结构，方便后续的数据处理、渲染或算法操作。你可以把它想象成把一堆俄罗斯套娃全部拆开，只留下最小的那个娃娃，然后把所有娃娃排成一列。

解决方案

实现数组扁平化的方法有很多，从ES6原生的便捷函数到更底层的递归或迭代逻辑，每种都有其独特的魅力和适用场景。我个人在项目中会根据数组的深度、性能要求以及代码的可读性来选择。

1. 使用 Array.prototype.flat() (ES2019+)

这是最直接，也是我最推荐的方法，如果你的目标环境支持ES2019及以上标准的话。它简直是为扁平化而生，用起来非常省心。

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

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

// 扁平化任意深度，使用 Infinity
const flatDeep = nestedArray.flat(Infinity);
console.log('彻底扁平化:', flatDeep); // [1, 2, 3, 4, 5, 6, 7]

// 也可以指定扁平化的深度
const flatTwoLevels = [1, [2, [3, [4]]]].flat(2);
console.log('扁平化两层:', flatTwoLevels); // [1, 2, 3, [4]]

flat() 方法的强大之处在于它的第二个可选参数 depth，你可以指定扁平化的层数，或者传入 Infinity 来彻底扁平化所有嵌套层级。简洁、高效，简直是开发者的福音。

2. 递归实现

如果需要兼容旧环境，或者想更深入理解扁平化的原理，递归是一个经典的选择。这就像是你自己动手拆套娃，一层一层地来。

function flattenRecursively(arr) {
  let result = [];
  for (let i = 0; i < arr.length; i++) {
    if (Array.isArray(arr[i])) {
      // 如果是数组，递归调用自身，并将结果合并
      result = result.concat(flattenRecursively(arr[i]));
    } else {
      // 如果不是数组，直接加入结果
      result.push(arr[i]);
    }
  }
  return result;
}

const nestedArray = [1, [2, 3], [4, [5, 6]], 7];
const flatArray = flattenRecursively(nestedArray);
console.log('递归扁平化:', flatArray); // [1, 2, 3, 4, 5, 6, 7]

这种方法直观易懂，但对于非常深的嵌套数组，可能会有栈溢出的风险，毕竟每次递归调用都会增加调用栈的深度。

3. 使用 reduce 和 concat

这是一种非常函数式编程风格的实现，利用 reduce 方法遍历数组，并结合 concat 来拼接结果。

function flattenWithReduce(arr) {
  return arr.reduce((acc, current) => {
    return acc.concat(Array.isArray(current) ? flattenWithReduce(current) : current);
  }, []);
}

const nestedArray = [1, [2, 3], [4, [5, 6]], 7];
const flatArray = flattenWithReduce(nestedArray);
console.log('Reduce扁平化:', flatArray); // [1, 2, 3, 4, 5, 6, 7]

这种写法非常优雅，可读性也很好，同样存在递归深度的问题。

4. 迭代实现 (基于栈)

为了避免递归深度限制，可以使用迭代的方式，模拟一个栈来处理嵌套数组。这在处理特别深的数据结构时非常有用。

function flattenIterative(arr) {
  const stack = [...arr]; // 使用扩展运算符将数组元素推入栈中
  const result = [];
  while (stack.length > 0) {
    const element = stack.shift(); // 从栈顶取出元素 (这里用shift模拟队列，也可以用pop模拟栈)
    if (Array.isArray(element)) {
      // 如果是数组，将其元素逆序（或正序，取决于pop/shift）推回栈中
      // 这里为了保持顺序，使用unshift将新元素加到栈的前面
      // 实际使用pop/push更像栈，但这里为了维持扁平化后的顺序，shift/unshift更合适
      stack.unshift(...element);
    } else {
      result.push(element);
    }
  }
  return result;
}

const nestedArray = [1, [2, 3], [4, [5, 6]], 7];
const flatArray = flattenIterative(nestedArray);
console.log('迭代扁平化:', flatArray); // [1, 2, 3, 4, 5, 6, 7]

这里我用 shift 和 unshift 来保持扁平化后的顺序，使其更像一个队列的遍历。如果用 pop 和 push 模拟栈，则需要注意元素的逆序处理。这种方式避免了递归带来的栈溢出问题，但代码逻辑会稍微复杂一些。

数组扁平化在实际开发中有哪些应用场景？

说实话，刚开始接触数组扁平化的时候，我可能觉得这只是个算法题，离实际应用有点远。但随着项目经验的积累，我发现它在很多地方都扮演着关键角色，尤其是在处理数据和构建用户界面时。

最常见的场景就是处理从后端接口获取到的数据。想象一下，你从一个API拿到了一个用户列表，每个用户对象里可能又嵌套了一个表示其权限的数组，权限数组里又包含了更细分的权限项数组。如果前端需要将所有权限项统一展示在一个标签云里，或者进行搜索过滤，那么把这个多层嵌套的数据结构扁平化成一个简单的权限ID列表，会大大简化后续的逻辑。

再比如，在构建树形结构（如文件目录、组织架构图）的组件时，我们通常会从扁平化的数据源开始，然后通过递归或迭代将其构建成树。但反过来，当用户在前端对树形结构进行了拖拽、重排等操作后，如果需要将这些改动保存回后端，后端可能更喜欢接收一个扁平化的、带有父子关系ID的数组，而不是一个深层嵌套的JSON。这时候，我们就需要将前端的树形结构“拍平”成一个数组。

还有一些场景，比如在处理某些图算法（如广度优先搜索、深度优先搜索）时，虽然图的表示可以是邻接列表或邻接矩阵，但在某些特定操作中，可能需要将某个节点的“所有可达路径”扁平化成一个列表来处理。总而言之，当你的数据结构变得过于复杂，而你又需要对所有底层元素进行统一操作时，扁平化就是那个能帮你理清思路的工具。

如何处理包含非数组元素的复杂嵌套数组？

这是一个非常实际的问题。在真实世界的数据中，嵌套数组里可不只会乖乖地放着数字或字符串，它们可能混杂着 null、undefined、空对象 {}，甚至是其他类型的数据。我遇到过不少次，因为没有考虑到这些“脏数据”而导致扁平化函数报错或者结果不符合预期的情况。

解决这个问题，关键在于在扁平化逻辑中加入类型检查。最常用的就是 Array.isArray() 方法，它能准确判断一个值是不是数组。

就拿我们前面提到的递归扁平化函数来说，它的健壮性已经不错了，因为它只对 Array.isArray(arr[i]) 为真的元素进行递归处理。对于非数组元素，无论是数字、字符串、布尔值、null、undefined 还是普通对象，它都会直接 push 到结果数组中。

function flattenRobustly(arr) {
  let result = [];
  for (let i = 0; i < arr.length; i++) {
    // 明确检查是否为数组，避免对非数组类型进行递归
    if (Array.isArray(arr[i])) {
      result = result.concat(flattenRobustly(arr[i]));
    } else {
      // 非数组元素，直接加入结果。
      // 如果需要过滤掉null/undefined等，可以在这里加额外判断
      // 例如：if (arr[i] !== null && arr[i] !== undefined) { result.push(arr[i]); }
      result.push(arr[i]);
    }
  }
  return result;
}

const complexArray = [1, null, [2, { id: 3 }], undefined, [4, [5, 'hello', null]], 7];
const flatComplex = flattenRobustly(complexArray);
console.log('处理复杂数组:', flatComplex);
// 输出: [1, null, 2, { id: 3 }, undefined, 4, 5, "hello", null, 7]

如果你有更严格的要求，比如想在扁平化过程中顺便过滤掉 null 或 undefined，可以在 else 分支里加一个简单的条件判断。比如，if (arr[i] !== null && arr[i] !== undefined) { result.push(arr[i]); }。

对于 flat() 方法，它本身就足够智能，会直接处理非数组元素。

const complexArray = [1, null, [2, { id: 3 }], undefined, [4, [5, 'hello', null]], 7];
const flatComplexWithFlat = complexArray.flat(Infinity);
console.log('flat()处理复杂数组:', flatComplexWithFlat);
// 输出: [1, null, 2, { id: 3 }, undefined, 4, 5, "hello", null, 7]

所以，当使用 flat() 时，你通常不需要额外担心非数组元素的问题，它会按预期工作。手动实现时，Array.isArray() 是你的好帮手。

递归扁平化可能遇到的问题及解决方案

虽然递归方法在概念上很直观，但在实际应用中，尤其是面对那些深不见底的嵌套数组时，它有一个潜在的“雷区”——栈溢出（Stack Overflow）。

JavaScript引擎在执行函数调用时，会将每次调用的上下文（包括参数、局部变量等）压入一个调用栈（Call Stack）。当递归层数过深，超出了引擎允许的最大栈深度时，就会抛出 RangeError: Maximum call stack size exceeded 错误。这就像你往一个杯子里不停地倒水，总会溢出来。这个最大深度在不同的浏览器和Node.js环境中有所不同，但通常都在几千到几万层之间。对于一般的数据结构可能不是问题，但如果你的数据结构深度达到了几十万甚至更多，递归就不是一个好的选择了。

解决方案：

1. 使用 Array.prototype.flat(Infinity)： 这是最简单直接的办法，如果你的目标环境支持ES2019，那么就用它。flat() 方法的内部实现通常是迭代式的，不会有栈溢出的风险。这是我最推荐的解决方案，因为它既安全又简洁。

2. 改用迭代实现： 前面我们提到了基于栈的迭代方法。这种方法将递归调用转换为显式的循环和数据结构（如数组作为栈），从而避免了调用栈的限制。

   // 再次强调一下迭代方案，因为它就是为了解决这个痛点
   function flattenIterativeNoStackOverflow(arr) {
     const result = [];
     const stack = [...arr]; // 初始化栈，把顶层元素放进去
   
     // 循环直到栈为空
     while (stack.length > 0) {
       const element = stack.shift(); // 取出栈顶元素（这里用shift保持顺序）
   
       if (Array.isArray(element)) {
         // 如果是数组，将其元素“解构”并放回栈的前面，以便后续处理
         stack.unshift(...element);
       } else {
         // 非数组元素，直接加入结果
         result.push(element);
       }
     }
     return result;
   }
   
   // 假设一个非常深的数组，例如一个10万层深的嵌套
   // const deepArray = Array(100000).fill(0).reduce((acc, _, i) => [i, acc], []); // 这会非常大，不建议实际运行
   // console.log(flattenIterativeNoStackOverflow(deepArray));

   迭代方案的优势在于，它将递归的隐式栈管理变成了我们显式的数据结构操作，从而绕过了JS引擎的调用栈限制。虽然代码可能看起来没有递归那么“自然”，但它在处理极端情况时表现得更稳定。

3. 限制递归深度（如果业务允许）： 如果你的业务场景明确知道数组的嵌套深度不会超过某个阈值，并且这个阈值远低于JS引擎的栈限制，那么递归仍然是可行的。你可以甚至在递归函数中加入一个 depth 参数来控制和限制递归的层数，超过指定深度就停止递归，直接将剩余的子数组作为元素加入。

选择哪种方案，最终还是取决于你的项目需求、目标环境兼容性以及你对代码性能和可读性的偏好。但如果遇到栈溢出，请毫不犹豫地考虑迭代或 flat() 方法。

到这里，我们也就讲完了《JS数组扁平化5种实用方法》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于递归,迭代,栈溢出,数组扁平化,Array.prototype.flat()的知识点！