当前位置：首页 > news >正文

【前端】面试八股文——数组扁平化的实现

news 2025/7/10 1:51:18

【前端】面试八股文——数组扁平化的实现

数组扁平化是指将一个多维数组转换为一维数组。在前端开发中，处理这样的数组结构是很常见的需求。本文将详细介绍几种实现数组扁平化的方法，以帮助读者更好地理解和应用这些技术。

1. 使用 `Array.prototype.flat()`

这是 ES6 中新增的一个方法， flat() 可以按指定深度递归地扁平化数组。参数 depth 是扁平化的层级深度，默认值为 1。当需要扁平化所有层级时，可以传入 Infinity。

const arr = [1, [2, [3, [4]], 5]];
const flatArr = arr.flat(Infinity); // Infinity 确保扁平到最深一级
console.log(flatArr); // [1, 2, 3, 4, 5]

优点：

语法简洁，易于理解和使用。
原生方法性能较好。

缺点：

仅适用于支持 ES6 的环境。

2. 使用递归

递归是一种经典的算法思想，可以通过递归调用函数来手动实现数组的扁平化。

function flatten(arr) {let result = [];arr.forEach((item) => {if (Array.isArray(item)) {result = result.concat(flatten(item));} else {result.push(item);}});return result;
}const arr = [1, [2, [3, [4]], 5]];
const flatArr = flatten(arr);
console.log(flatArr); // [1, 2, 3, 4, 5]

优点：

理解递归函数后，代码逻辑清晰。

缺点：

对于非常深的嵌套数组，可能会导致栈溢出。

3. 使用栈

可以利用栈结构来实现非递归的数组扁平化，从而避免递归的缺点。

function flatten(arr) {let result = [];let stack = [...arr];while (stack.length) {let next = stack.pop();if (Array.isArray(next)) {stack.push(...next);} else {result.unshift(next); // 使用 unshift 维持顺序}}return result;
}const arr = [1, [2, [3, [4]], 5]];
const flatArr = flatten(arr);
console.log(flatArr); // [1, 2, 3, 4, 5]

优点：

避免递归的栈溢出问题。

缺点：

可能在用于特别深的数组时，性能不如递归。

4. 使用 `reduce`

Array.prototype.reduce() 方法可以逐个元素地处理数组，简化数组的扁平化过程。

function flatten(arr) {return arr.reduce((acc, val) => Array.isArray(val) ? acc.concat(flatten(val)) : acc.concat(val), []);
}const arr = [1, [2, [3, [4]], 5]];
const flatArr = flatten(arr);
console.log(flatArr); // [1, 2, 3, 4, 5]

优点：

代码简洁，支持递归扁平化。

缺点：

仍然存在递归调用的问题，可能在深度很深时导致栈溢出。

5. 使用生成器 (Generators)

生成器是 ES6 中引入的一种新特性，可以用于实现懒加载（即在需要时才生成元素），生成器函数能使数组扁平化逻辑更加直观。

function* flattenGen(arr) {for (let item of arr) {if (Array.isArray(item)) {yield* flattenGen(item);} else {yield item;}}
}const arr = [1, [2, [3, [4]], 5]];
const flatArr = [...flattenGen(arr)];
console.log(flatArr); // [1, 2, 3, 4, 5]