如何在 JavaScript 中将给定的数组展平到指定的深度？

当我们需要操作多层嵌套的数组时，可能需要将它展平到指定的深度。下面我们将介绍两种方法实现这一功能。

方法一：使用递归方式展开数组

以下是使用递归方式展开数组的代码实现：

function flat(arr, depth = 1) {
  return depth > 0
    ? arr.reduce(
        (acc, val) =>
          acc.concat(Array.isArray(val) ? flat(val, depth - 1) : val),
        []
      )
    : arr.slice();
}

该方法接受两个参数：arr 表示需要展开的数组，depth 表示要展开的深度，如果未指定，默认为 1。从 depth 开始，逐级将数组展开，直到达到指定的深度。

我们可以将以下数组 [1, [2], [[3], 4], 5] 传给上述函数进行测试：

flat([1, [2], [[3], 4], 5], 1); // [1, 2, [3], 4, 5]
flat([1, [2], [[3], 4], 5], 2); // [1, 2, 3, 4, 5]
flat([1, [2], [[3], 4], 5], 3); // [1, 2, 3, 4, 5]
flat([1, [2], [[3], 4], 5], 4); // [1, 2, 3, 4, 5]

代码解释：

1. flat 函数递归地将数组展开到指定深度。
2. Array.prototype.reduce 方法用于将数组展开到指定深度。
3. 如果某个值是数组，flat 函数递归地将其展开到指定深度，否则直接添加到结果数组中。
4. 如果 depth 小于等于 0，则返回原数组的副本，避免进一步展开。

方法二：使用迭代方式展开数组

下面是使用迭代方式展开数组的代码实现：

function flat(arr, depth = 1) {
  const result = [];
  const stack = [...arr];
  let curDepth = 1;

  while (stack.length) {
    const item = stack.pop();

    if (Array.isArray(item) && curDepth <= depth) {
      stack.push(...item);
      curDepth++;
    } else {
      result.unshift(item);
    }
  }

  return result;
}

该方法接受两个参数：arr 表示需要展开的数组，depth 表示要展开的深度，如果未指定，默认为 1。该方法使用栈实现迭代方式展开数组，避免使用递归调用。

我们可以将以下数组 [1, [2], [[3], 4], 5] 传给上述函数进行测试：

flat([1, [2], [[3], 4], 5], 1); // [1, 2, [3], 4, 5]
flat([1, [2], [[3], 4], 5], 2); // [1, 2, 3, 4, 5]
flat([1, [2], [[3], 4], 5], 3); // [1, 2, 3, 4, 5]
flat([1, [2], [[3], 4], 5], 4); // [1, 2, 3, 4, 5]

代码解释：

1. flat 函数使用栈实现迭代式展开数组。
2. 首先将待展开的数组拷贝到栈中，并初始化字符串的当前深度。
3. 如果栈不为空，则从栈顶取出一个元素。
4. 如果该元素是数组，且当前深度不超过指定深度，则将其展开，并将当前深度加 1。
5. 如果该元素不是数组，或者当前深度超过指定深度，则添加到结果数组的前端（通过 Array.prototype.unshift 方法）。
6. 重复步骤 3-5，直到栈为空为止。

总结：

在 JavaScript 中，展平嵌套数组是一个重要且经常出现的问题。本文介绍了两种方法用于实现该问题：递归方式和迭代方式。根据具体需求，您可以选择适合您需求的方法。