我如何通过以下方式加速 Javascript 函数：

在最近的一个项目中，我遇到了一个功能，其效率不尽如人意。该函数执行了两个映射循环、三个过滤器（每个过滤器都附带一个包含）和一个带有内置 find 的附加映射，总共 12 次迭代。虽然其中一些方法（例如过滤器）不需要遍历整个数组，但该操作的成本仍然相当高，尤其是对于大量项目。

这个函数的复杂度是 O(n * m)，随着项目规模的扩大，这很快就会成为一个问题。

所以我决定优化这个功能。我采取的第一步是将两个键数组替换为 Set。在 JavaScript 中，Set 是一种存储唯一数据的结构，并且提供比数组更快的存在检查。虽然检查数组的复杂度为 O(n)，但在 Set 中复杂度为 O(1)。此外，与 Array.includes 不同，Set.has 方法的性能不会随着 Set 中数据数量的增加而降低。

此更改已经为在阵列上运行的过滤器提供了显着的改进。然而，在其中一张地图中，有一个 Array.find() 也可以优化。在 JavaScript 中，Map 是索引列表，而 Array.find 执行线性搜索，并且速度可能比 Map 慢 2,100 到 12,000 倍，具体取决于执行代码的处理器的性能。

通过在其中一个循环中将 Array.find 替换为 Map.get，我能够将迭代总数从 12 次减少到 9 次。虽然减少 3 个循环可能看起来并不显着，但算法的复杂度却变得很高O(n + m)，函数执​​行时间减少了 96%，令人印象深刻！

在 Intel Core i7-10510U 上进行的测试中，使用数组执行该函数比使用 Map 和 Set 执行该函数花费的时间长 28 倍，使用包含 5,000 个项目的数组：191.19 毫秒到 6.80 毫秒。

值得一提的是，虽然原始的数组算法具有 O(n * m) 复杂度，但执行时间随着项目数量呈指数增长。在软件开发场景中，考虑业务增长和执行代码的机器的限制至关重要。例如，如果数组增长到 50,000 个项目，原始算法的执行时间将为 13,585 毫秒，而使用 Set 和 Map 的优化算法只需 135 毫秒。在这种情况下，原始算法将慢 100 倍，优化后执行时间减少 99%。

结论

考虑到 Set 和 Map 与 Array 相比在信息检索方面的速度优势，当需要在 Array.filter 或 Array.find 等迭代中检查此信息时，迭代创建 Set 或 Map 的成本是合理的。

但是，由于一些缺点，例如缺乏顺序排序、无法通过索引直接访问元素以及不存储重复元素的限制，Set 的使用可能并不总是可行。

尽管存在这些限制，但在许多情况下，用 Set 或 Map 替换数组可以在性能和效率方面带来显着的优势。

以上就是我如何通过以下方式加速 Javascript 函数：的详细内容，更多请关注其它相关文章！