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

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

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

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]

优点：

• 使用生成器的懒加载特性，处理大数组时效率更高。

缺点：

• 生成器的语法和概念可能对初学者不太友好。
• 并不是所有环境都支持生成器。

小结

以上五种方法各有优劣，具体选择哪种方法要依据开发需求、浏览器兼容性以及性能等因素来决定：

• Array.prototype.flat()：适用于现代浏览器，语法简洁。
• 递归：逻辑清晰，但要注意栈溢出的问题。
• 栈：避免递归，适用于特别深的数组，但可能性能较差。
• reduce：简洁优雅，但亦存在递归问题。
• 生成器：适用于大数据处理，但相对复杂。

根据项目的实际需求，选择最合适的方法来实现数组的扁平化，可以有效提升代码效率和可维护性。