JS数组扁平化时如何只展开指定深度而非完全展平？

Question

在JavaScript中，当我们处理多维数组时，有时需要将数组扁平化到特定深度，而不是完全展平。例如，给定一个数组`[[1, [2, 3]], [4, [5, [6]]]]`，如果只想展开一层，结果应为`[1, [2, 3], 4, [5, [6]]]`。使用`Array.prototype.flat()`方法可以轻松实现这一需求，因为它接受一个可选参数来指定扁平化的深度。例如，`arr.flat(1)`表示只展开一层。然而，在不支持`flat()`的环境中，如何手动实现这一功能？这是一个常见问题。我们需要编写递归或迭代函数，结合深度参数控制展开层级，同时避免过度展平或性能损耗。你是否知道如何在不使用`flat()`的情况下解决这个问题呢？

Answer 1

1. 问题概述

在JavaScript中，处理多维数组时，有时需要将数组扁平化到特定深度，而不是完全展平。例如，给定一个数组`[[1, [2, 3]], [4, [5, [6]]]]`，如果只想展开一层，结果应为`[1, [2, 3], 4, [5, [6]]]`。

Array.prototype.flat()方法可以轻松实现这一需求，因为它接受一个可选参数来指定扁平化的深度。然而，在不支持flat()的环境中，我们需要手动实现这一功能。

常见技术问题

• 如何控制扁平化的深度？
• 递归与迭代方法的选择及其性能比较。
• 如何避免过度展平或性能损耗？

2. 解决方案分析

要解决这个问题，我们可以采用递归或迭代的方式。以下是一个循序渐进的解决方案分析：

2.1 使用递归实现

递归是一种自然的解决方案，适合处理层级结构的数据。以下是递归实现的思路：

• 定义一个函数flatten(arr, depth)，其中arr是待扁平化的数组，depth是目标深度。
• 如果depth === 0，直接返回原始数组。
• 否则，遍历数组中的每个元素，如果是数组且depth > 0，则递归调用flatten。

2.2 使用迭代实现

迭代方法通过队列或栈模拟递归过程，适用于对性能要求较高的场景。以下是迭代实现的思路：

• 使用一个队列存储当前层级的数组。
• 逐层处理队列中的元素，直到达到目标深度。

3. 实现代码

以下是两种实现方式的具体代码示例：

3.1 递归实现

function flattenRecursive(arr, depth) {
    if (depth === 0) return arr.slice(); // 避免修改原数组
    return arr.reduce((acc, item) => {
        if (Array.isArray(item) && depth > 0) {
            acc.push(...flattenRecursive(item, depth - 1));
        } else {
            acc.push(item);
        }
        return acc;
    }, []);
}

const input = [[1, [2, 3]], [4, [5, [6]]]];
console.log(flattenRecursive(input, 1)); // 输出: [1, [2, 3], 4, [5, [6]]]

3.2 迭代实现

function flattenIterative(arr, depth) {
    let result = [];
    let queue = [{ array: arr, currentDepth: depth }];

    while (queue.length > 0) {
        const { array, currentDepth } = queue.shift();
        for (const item of array) {
            if (Array.isArray(item) && currentDepth > 0) {
                queue.push({ array: item, currentDepth: currentDepth - 1 });
            } else {
                result.push(item);
            }
        }
    }

    return result;
}

const input = [[1, [2, 3]], [4, [5, [6]]]];
console.log(flattenIterative(input, 1)); // 输出: [1, [2, 3], 4, [5, [6]]]

4. 性能比较

为了更直观地理解两种方法的性能差异，我们可以通过流程图进行对比：

```mermaid
flowchart LR
    A[递归方法] --> B{深度是否为0}
    B -- 是 --> C[返回原数组]
    B -- 否 --> D[遍历数组]
    D --> E{元素是否为数组}
    E -- 是 --> F[递归调用]
    E -- 否 --> G[添加到结果]

    H[迭代方法] --> I[初始化队列]
    I --> J[队列是否为空]
    J -- 是 --> K[返回结果]
    J -- 否 --> L[取出队首元素]
    L --> M{元素是否为数组}
    M -- 是 --> N[入队并减少深度]
    M -- 否 --> O[添加到结果]
```

5. 结论

无论是递归还是迭代方法，都可以有效实现数组的分层扁平化。选择具体方法时，需根据实际需求权衡代码简洁性和性能。