使用 array.prototype.flat() 可直接扁平化数组，支持指定深度或使用 infinity 彻底扁平化；2. 递归实现通过判断元素是否为数组进行深度遍历，适用于兼容旧环境但存在栈溢出风险；3. reduce 与 concat 结合实现函数式风格的扁平化，代码优雅但同样有递归深度限制；4. 迭代法利用栈结构模拟递归过程，避免栈溢出，适合处理深度嵌套数组；处理非数组元素时需用 array.isarray() 判断类型，flat() 方法能自动处理各类元素；递归可能引发栈溢出，解决方案包括使用 flat()、改用迭代或限制递归深度，最终选择应基于兼容性、性能和可读性综合考量。
JavaScript实现数组扁平化，核心在于将多维数组转换为一维数组，让所有元素都处于同一层级。这通常是为了简化数据结构，方便后续的数据处理、渲染或算法操作。你可以把它想象成把一堆俄罗斯套娃全部拆开，只留下最小的那个娃娃，然后把所有娃娃排成一列。
实现数组扁平化的方法有很多，从ES6原生的便捷函数到更底层的递归或迭代逻辑，每种都有其独特的魅力和适用场景。我个人在项目中会根据数组的深度、性能要求以及代码的可读性来选择。
1. 使用 Array.prototype.flat()
这是最直接，也是我最推荐的方法，如果你的目标环境支持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
解决方案：
使用 Array.prototype.flat(Infinity)
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怎么实现数组扁平化的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告
收藏
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
226
