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

最新推荐文章于 2024-06-15 11:46:27 发布

帅比九日

最新推荐文章于 2024-06-15 11:46:27 发布

阅读量405

点赞数 7

分类专栏：面试八股文文章标签：前端面试职场和发展

本文链接：https://blog.csdn.net/qq_41883423/article/details/139127420

版权

面试八股文专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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

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

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]