使用 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]// 扁平化任意深度，使用 Infinityconst 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环境中有所不同，但通常都在几千到几万层之间。对于一般的数据结构可能不是问题，但如果你的数据结构深度达到了几十万甚至更多，递归就不是一个好的选择了。
解决方案：
使用
Array.prototype.flat(Infinity)
：这是最简单直接的办法，如果你的目标环境支持ES2019，那么就用它。
flat()
方法的内部实现通常是迭代式的，不会有栈溢出的风险。这是我最推荐的解决方案，因为它既安全又简洁。
改用迭代实现：前面我们提到了基于栈的迭代方法。这种方法将递归调用转换为显式的循环和数据结构（如数组作为栈），从而避免了调用栈的限制。
// 再次强调一下迭代方案，因为它就是为了解决这个痛点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引擎的调用栈限制。虽然代码可能看起来没有递归那么“自然”，但它在处理极端情况时表现得更稳定。
限制递归深度（如果业务允许）：如果你的业务场景明确知道数组的嵌套深度不会超过某个阈值，并且这个阈值远低于JS引擎的栈限制，那么递归仍然是可行的。你可以甚至在递归函数中加入一个
depth
参数来控制和限制递归的层数，超过指定深度就停止递归，直接将剩余的子数组作为元素加入。
选择哪种方案，最终还是取决于你的项目需求、目标环境兼容性以及你对代码性能和可读性的偏好。但如果遇到栈溢出，请毫不犹豫地考虑迭代或
flat()
方法。
以上就是js怎么实现数组扁平化的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1516283.html
微信扫一扫 
支付宝扫一扫 
