JavaScript内核与高级编程之：`JavaScript` 的 `Array.prototype.flat()` 与 `flat(Infinity)` 的性能差异。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

各位靓仔靓女，晚上好！我是今天的主讲人，代号“代码挖掘机”，很高兴能跟大家一起聊聊 JavaScript 里一个很有意思的数组方法：Array.prototype.flat()。

今天咱们的主题是：JavaScript 的 Array.prototype.flat() 与 flat(Infinity) 的性能差异。听起来是不是有点枯燥？别怕，我会尽量用大家能听懂的“人话”，再加上一些“骚操作”，让这个话题变得有趣起来。

1. flat() 是个啥？为啥要有它？

首先，让我们来认识一下 flat() 这个小家伙。简单来说，flat() 方法会按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并到一个新数组中返回。说白了，就是把一个嵌套的数组“拍平”。

举个例子：

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

const flattenedArr = arr.flat(); // 默认深度为 1
console.log(flattenedArr); // 输出: [1, 2, [3, [4]]]

const flattenedArr2 = arr.flat(2); // 深度为 2
console.log(flattenedArr2); // 输出: [1, 2, 3, [4]]

const flattenedArr3 = arr.flat(Infinity); // 深度为 Infinity
console.log(flattenedArr3); // 输出: [1, 2, 3, 4]

看到没？flat() 就像一个“压路机”，把数组里的“小土堆”一个个压平。那么，为啥要有这个方法呢？

在实际开发中，我们经常会遇到各种各样的数据结构，其中嵌套数组是很常见的一种。例如，你需要处理一个树形结构的数据，或者从多个接口获取数据后需要将它们合并成一个扁平的列表。如果没有 flat()，你就得自己写递归函数来“拍平”数组，那可就太麻烦了！ flat() 的出现，大大简化了我们的代码，提高了开发效率。

2. flat(Infinity) 的“传说”

flat(Infinity) 是 flat() 的一个特殊用法。当你传入 Infinity 作为参数时，flat() 会递归到数组能达到的最深层级，将所有子数组都“拍平”。

const arr = [1, [2, [3, [4, [5]]]]];
const flattenedArr = arr.flat(Infinity);
console.log(flattenedArr); // 输出: [1, 2, 3, 4, 5]

看起来很方便，对吧？但是！任何事情都有两面性。 flat(Infinity) 虽然能“一劳永逸”地拍平数组，但它可能会带来性能问题。为什么呢？这就涉及到 flat() 方法的内部实现了。

3. flat() 的内部实现（简化版）

为了更好地理解 flat() 的性能问题，我们先来简单地看一下 flat() 的内部实现（这里只是一个简化版，实际实现会更复杂）。

function flat(arr, depth = 1) {
  const result = [];

  function flatten(arr, currentDepth) {
    for (let i = 0; i < arr.length; i++) {
      const element = arr[i];

      if (Array.isArray(element) && currentDepth < depth) {
        flatten(element, currentDepth + 1); // 递归调用
      } else {
        result.push(element);
      }
    }
  }

  flatten(arr, 0);
  return result;
}

// 示例
const arr = [1, [2, [3, [4]]]];
const flattenedArr = flat(arr, 2);
console.log(flattenedArr); // 输出: [1, 2, 3, [4]]

从上面的代码可以看出，flat() 使用了递归的方式来遍历数组。每当遇到一个子数组，它就会递归调用 flatten() 函数，直到达到指定的深度。而 flat(Infinity) 意味着深度没有限制，它会一直递归下去，直到数组里不再有子数组。

4. flat() vs flat(Infinity)：性能大 PK

现在，我们来重点讨论 flat() 和 flat(Infinity) 的性能差异。我们可以通过一些测试用例来比较它们的执行时间。

测试用例 1：深度已知的嵌套数组

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

console.time("flat(5)");
arr1.flat(5);
console.timeEnd("flat(5)");

console.time("flat(Infinity)");
arr1.flat(Infinity);
console.timeEnd("flat(Infinity)");

在这个测试用例中，我们知道数组的最大深度是 5。因此，flat(5) 只需要递归 5 层就可以完成任务。而 flat(Infinity) 仍然会尝试递归到更深层级，虽然实际上并没有更深层级的子数组，但它仍然会进行一些额外的检查。因此，在这种情况下，flat(5) 的性能通常会比 flat(Infinity) 更好。

测试用例 2：深度未知的嵌套数组

function createNestedArray(depth, width) {
  let arr = [0];
  for (let i = 1; i <= depth; i++) {
    const newArr = [];
    for (let j = 0; j < width; j++) {
      newArr.push(arr);
    }
    arr = newArr;
  }
  return arr;
}

const arr2 = createNestedArray(5, 2);

console.time("flat(5)");
arr2.flat(5);
console.timeEnd("flat(5)");

console.time("flat(Infinity)");
arr2.flat(Infinity);
console.timeEnd("flat(Infinity)");

在这个测试用例中，我们创建了一个深度为 5 的嵌套数组，但我们并不知道它的最大深度。在这种情况下，flat(5) 和 flat(Infinity) 的性能差异可能会比较小。因为 flat(Infinity) 仍然需要递归到数组的最深层级，而 flat(5) 也需要递归到指定的深度。

测试用例 3：包含大量非数组元素的嵌套数组

const arr3 = [1, [2, "hello", [3, { name: "world" }, [4, [5]]]]];

console.time("flat(Infinity)");
arr3.flat(Infinity);
console.timeEnd("flat(Infinity)");

console.time("flat(5)");
arr3.flat(5);
console.timeEnd("flat(5)");

在这个测试用例中，数组中包含大量的非数组元素。在这种情况下，flat(Infinity) 的性能可能会更差。因为它需要对每个元素进行类型检查，判断它是否为数组。而 flat(5) 只需要检查到指定的深度即可。

总结：性能差异的原因

flat(Infinity) 的性能通常比 flat() 差的原因主要有以下几点：

额外的类型检查： flat(Infinity) 需要对每个元素进行类型检查，判断它是否为数组。
不必要的递归： 即使数组已经拍平，flat(Infinity) 仍然会尝试递归到更深层级，进行不必要的检查。
递归栈的压力： 对于深度很大的嵌套数组，flat(Infinity) 会导致递归栈过深，可能会引发栈溢出错误。

为了更直观地看到性能差异，我们可以用表格来总结一下：

测试用例	`flat()` 性能	`flat(Infinity)` 性能	性能差异原因
深度已知的嵌套数组	较好	较差	`flat(Infinity)` 会进行不必要的递归和类型检查。
深度未知的嵌套数组	差别不大	差别不大	两者都需要递归到数组的最深层级。
包含大量非数组元素的嵌套数组	较好	较差	`flat(Infinity)` 需要对每个元素进行类型检查。
深度很大的嵌套数组（接近栈限制）	较好	可能会栈溢出	`flat(Infinity)` 会导致递归栈过深。

5. 如何选择？最佳实践

那么，在实际开发中，我们应该如何选择 flat() 和 flat(Infinity) 呢？

我的建议是：

尽量避免使用 flat(Infinity)： 除非你真的需要“一劳永逸”地拍平数组，否则尽量避免使用 flat(Infinity)。
指定明确的深度： 如果你知道数组的最大深度，尽量指定一个明确的深度。例如，如果数组的最大深度是 3，那么就使用 flat(3)。
如果不知道深度，可以估算一个合理的深度： 如果不知道数组的最大深度，可以根据实际情况估算一个合理的深度。例如，如果数组的深度通常不会超过 5，那么就可以使用 flat(5)。
使用循环迭代代替递归： 对于深度很大的嵌套数组，可以考虑使用循环迭代的方式来拍平数组，避免递归栈过深。

下面是一个使用循环迭代来拍平数组的示例：

function flatten(arr) {
  const result = [];
  const stack = [arr];

  while (stack.length > 0) {
    const current = stack.pop();

    if (Array.isArray(current)) {
      // 将数组元素倒序入栈，保证最终结果的顺序正确
      for (let i = current.length - 1; i >= 0; i--) {
        stack.push(current[i]);
      }
    } else {
      result.push(current);
    }
  }

  return result;
}

const arr = [1, [2, [3, [4, [5]]]]];
const flattenedArr = flatten(arr);
console.log(flattenedArr); // 输出: [1, 2, 3, 4, 5]

这种方法避免了递归调用，可以有效地防止栈溢出错误。

6. 总结与思考

今天，我们一起深入探讨了 JavaScript 的 Array.prototype.flat() 与 flat(Infinity) 的性能差异。我们了解了 flat() 的内部实现，分析了 flat(Infinity) 性能较差的原因，并给出了一些最佳实践建议。

记住，flat(Infinity) 就像一把双刃剑，它能简化我们的代码，但也可能带来性能问题。在实际开发中，我们需要根据具体情况权衡利弊，选择最合适的方案。

最后，希望大家在今后的开发中，能够更加灵活地运用 flat() 方法，写出高效、优雅的代码！感谢大家的收听！如果大家还有什么问题，欢迎随时交流。咱们下次再见！

发表回复 取消回复

发表回复取消回复