JavaScript不使用flat实现数组扁平化的三种方法
作者：xixixin_
本文介绍了几种不使用array.flat()方法实现数组扁平化的具体方式,包括递归、迭代和利用reduce简化递归,这些方法各有特点,递归易理解适合新手,迭代适合处理超深嵌套数组,而reduce则使代码更简洁,适用场景广泛,适合主流浏览器,需要的朋友可以参考下
你想在不使用数组的flat()方法的前提下实现数组扁平化，核心是通过递归或迭代的方式，逐层遍历数组中的元素，把嵌套的子数组 “拆解” 成一维数组。我会给你几种实用且易懂的实现方式，覆盖不同场景需求。
方法 1：递归实现（最易理解，适合新手）
递归的核心思路是：遍历数组的每一个元素，如果元素是数组，就继续递归处理这个子数组；如果不是数组，就直接加入结果数组。
// 递归实现数组扁平化（可指定扁平化深度，默认完全扁平化）
function flattenArray(arr, depth = Infinity) {
// 存储最终扁平化结果
const result = [];
// 遍历原数组的每一个元素
arr.forEach(item => {
// 判断：如果当前元素是数组，且还没达到指定扁平化深度
if (Array.isArray(item) && depth > 0) {
// 递归处理子数组，深度减1
result.push(...flattenArray(item, depth - 1));
} else {
// 非数组元素直接加入结果
result.push(item);
}
});
return result;
}
// 测试用例
const nestedArr = [1, [2, [3, [4, 5]], 6], 7];
// 完全扁平化
console.log(flattenArray(nestedArr)); // [1, 2, 3, 4, 5, 6, 7]
// 只扁平化1层
console.log(flattenArray(nestedArr, 1)); // [1, 2, [3, [4, 5]], 6, 7]关键解释：
Array.isArray(item)：判断元素是否为数组，这是扁平化的核心判断条件；depth参数：控制扁平化深度，和flat(depth)的参数逻辑一致，默认Infinity表示完全扁平化；- 扩展运算符
...：把递归返回的子数组元素逐个推入结果数组，避免嵌套。
方法 2：迭代实现（循环 + 栈，避免递归栈溢出）
如果数组嵌套层级极深（比如几十层），递归可能会触发栈溢出错误，这时用迭代（循环）+ 栈的方式更稳健。
// 迭代实现数组扁平化（完全扁平化）
function flattenArrayIterative(arr) {
// 用栈存储待处理的元素，先把原数组浅拷贝入栈
const stack = [...arr];
const result = [];
// 只要栈不为空，就继续处理
while (stack.length) {
// 弹出栈顶元素
const item = stack.pop();
if (Array.isArray(item)) {
// 如果是数组，把元素重新推入栈（注意顺序：pop是从末尾取，所以要反向推入保持原顺序）
stack.push(...item);
} else {
// 非数组元素加入结果
result.push(item);
}
}
// 因为pop是从后往前取，结果需要反转恢复原顺序
return result.reverse();
}
// 测试用例
const nestedArr = [1, [2, [3, 4], 5]];
console.log(flattenArrayIterative(nestedArr)); // [1, 2, 3, 4, 5]关键解释：
- 栈（
stack）的特性是 “后进先出”，所以最后需要reverse()恢复原数组顺序； - 迭代方式没有递归的栈深度限制，适合处理超深嵌套的数组。
方法 3：利用 reduce 简化递归（简洁写法）
reduce 可以替代手动遍历和结果数组的声明，让代码更简洁，核心逻辑和递归法一致。
// reduce实现扁平化
function flattenArrayReduce(arr, depth = Infinity) {
return arr.reduce((acc, item) => {
if (Array.isArray(item) && depth > 0) {
// 递归处理子数组，合并到累计结果中
return acc.concat(flattenArrayReduce(item, depth - 1));
} else {
// 非数组元素直接合并
return acc.concat(item);
}
}, []); // 初始值为空数组
}
// 测试用例
const nestedArr = [1, [2, [3]], 4];
console.log(flattenArrayReduce(nestedArr)); // [1, 2, 3, 4]关键解释：
reduce的acc（累计值）就是最终的扁平化数组；concat方法可以把数组或单个元素合并到数组中，替代push(...)更简洁。
总结
不用flat()实现数组扁平化的核心要点：
- 核心逻辑：遍历数组元素，判断是否为数组，是则拆解层级，否则直接保留；
- 实现方式：
- 递归（
forEach/reduce）：代码易读，适合常规嵌套深度的数组； - 迭代（栈）：无栈溢出风险，适合超深嵌套的数组；
- 递归（
- 扩展点：通过
depth参数可模拟flat(depth)的 “指定深度扁平化” 功能，适配不同需求。
这些方法都能兼容所有主流浏览器，且逻辑清晰，新手可以先从递归法入手理解，再根据实际场景选择迭代法或 reduce 写法。
以上就是JavaScript不使用flat实现数组扁平化的三种方法的详细内容，更多关于JavaScript不用flat数组扁平化的资料请关注脚本之家其它相关文章！