JS数组深度扁平化方法flattenDepth详解

文章小白一枚，正在不断学习积累知识，现将学习到的知识记录一下，也是将我的所得分享给大家！而今天这篇文章《JS使用flattenDepth按深度扁平化数组方法》带大家来了解一下##content_title##，希望对大家的知识积累有所帮助，从而弥补自己的不足，助力实战开发！

flattenDepth方法通过递归或迭代方式按指定深度扁平化数组，避免完全扁平化带来的性能问题并保留部分嵌套结构；1. 该方法接受数组和深度参数，默认深度为1，递归处理数组元素，当深度大于0且元素为数组时继续展开；2. 可处理包含数字、字符串、对象、null、undefined等类型的数据，仅对数组类型进行递归展开；3. 深度控制有助于性能优化，防止深层递归导致的堆栈溢出，推荐使用迭代版本应对大规模嵌套；4. 与ES2019的flat()方法相比，flattenDepth兼容性更好，且保留稀疏数组中的空槽，而flat()会移除空槽。

JS中，flattenDepth 方法允许你控制数组扁平化的深度，这在处理嵌套层级不确定的数据时非常有用。它避免了一次性完全扁平化可能带来的性能问题，并提供了更精细的控制。

解决方案

flattenDepth 方法接受两个参数：要扁平化的数组和一个可选的深度值。如果未提供深度值，则默认深度为 1。

function flattenDepth(array, depth = 1) {
  const result = [];

  for (const element of array) {
    if (Array.isArray(element) && depth > 0) {
      result.push(...flattenDepth(element, depth - 1));
    } else {
      result.push(element);
    }
  }

  return result;
}

// 示例
const arr = [1, [2, [3, [4]], 5]];

console.log(flattenDepth(arr)); // [1, 2, [3, [4]], 5] (默认深度为 1)
console.log(flattenDepth(arr, 2)); // [1, 2, 3, [4], 5]
console.log(flattenDepth(arr, 3)); // [1, 2, 3, 4, 5]

这段代码的核心在于递归。当遇到数组元素，并且深度大于0时，它会递归调用 flattenDepth，并将深度减1。 如果深度为0或者元素不是数组，则直接将元素添加到结果数组中。

为什么需要控制扁平化深度？

扁平化深度控制的主要目的是为了性能和数据结构的保持。完全扁平化一个深度嵌套的数组可能会消耗大量的计算资源，尤其是当数组非常大时。 此外，在某些情况下，你可能希望保留一定程度的嵌套结构，而不是完全将其消除。 例如，你可能只想扁平化一级或两级嵌套，以便于后续处理。

如何处理不同类型的数据？

上面的 flattenDepth 实现可以处理包含各种数据类型的数组，包括数字、字符串、对象等。它只检查元素是否为数组，如果是数组且深度大于0，则进行递归扁平化。

const mixedArr = [1, "hello", [2, { a: 1 }, [3]]];

console.log(flattenDepth(mixedArr, 2)); // [1, "hello", 2, { a: 1 }, 3]

如果数组包含 null 或 undefined 值，flattenDepth 会将它们视为普通元素，不会进行特殊处理。

flattenDepth 的性能考量

flattenDepth 的性能取决于数组的大小和嵌套深度。 对于非常深的嵌套，递归可能会导致堆栈溢出。 在这种情况下，可以考虑使用迭代方法来实现扁平化，以避免递归的限制。

function flattenDepthIterative(array, depth = 1) {
  const result = [];
  const stack = [[array, depth]];

  while (stack.length > 0) {
    const [arr, currentDepth] = stack.pop();

    for (let i = arr.length - 1; i >= 0; i--) {
      const element = arr[i];

      if (Array.isArray(element) && currentDepth > 0) {
        stack.push([element, currentDepth - 1]);
      } else {
        result.unshift(element);
      }
    }
  }

  return result;
}

const arr = [1, [2, [3, [4]], 5]];
console.log(flattenDepthIterative(arr, 3)); // [1, 2, 3, 4, 5]

这个迭代版本的 flattenDepth 使用栈来模拟递归，避免了堆栈溢出的风险。 它从数组的末尾开始遍历，并将需要进一步扁平化的子数组压入栈中。

与其他扁平化方法的比较

JavaScript 提供了 Array.prototype.flat() 方法，它可以扁平化数组到指定的深度。 如果深度为 Infinity，则可以完全扁平化数组。

const arr = [1, [2, [3, [4]], 5]];

console.log(arr.flat(Infinity)); // [1, 2, 3, 4, 5]

flat() 方法是 ES2019 中引入的，如果需要兼容旧版本的浏览器，可能需要使用 flattenDepth 或其他polyfill方案。 另外，flat() 方法在处理稀疏数组时，会移除空槽，而 flattenDepth 会保留它们。 这在某些情况下可能是一个重要的区别。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~