javascript - 在大数组上使用多个 '.filter' 调用是否会影响性能？

Question

我写了这段代码来过滤一个单词数组。我为我想过滤掉的每种类型的单词编写了一个过滤函数，并将它们按顺序应用于数组:

  const wordArray = rawArray.filter(removeNonDomainWords)
                            .filter(removeWordsWithDigits)
                            .filter(removeWordsWithInsideNonWordChars)
                            .filter(removeEmptyWords)
                            .filter(removeSearchTerm, term)
                            .map(word => replaceNonWordCharsFromStartAndEnd(word))

如果我没记错的话，这段代码对整个数组进行了六次迭代。

编写一个(更复杂，但在我的场景中仍然很容易)逻辑上组合过滤器函数以实现相同结果的过滤器函数会不会更有效？

我是在函数式编程的背景下学习过滤器的，它可以让我的代码更短更快。这就是为什么我可能没有质疑我在写什么，想着“我在做 FP，这一定很好”。

谢谢!

Answer 1

好吧，它确实迭代了六次，但不一定是在整个初始数组上。每次过滤它都会变小。使用一种过滤方法会更有效，但差异可能没有您预期的那么大。

如果您仍想使用此解决方案，则可以通过首先使用最具选择性(即预期过滤掉最多的过滤器)来提高性能。这样，后面的数组就会变小，需要迭代的东西也会变少。

正如@Redu 指出的(在评论中)，您可以使用 || 运算符链接您的过滤器。这将确保您只进行一次迭代。

---

这背后的原因是 Array.prototype.filter 返回一个新数组。将此与返回流的 Java Stream API 进行比较，因此可以“深度优先”通过调用列表。这样做的缺点是您最后需要一个终端操作来“收集”您的结果。

在javascript中

rawArray.filter(x)

迭代 rawArray 并返回一个新的过滤数组 - 它可以依次被过滤或按原样使用。它将导致为 rawArray 中的每个 元素调用 x。

在 Java 中等价的是

rawArray.stream().filter(x)

此时实际上什么也做不了。不会调用 x。返回值将是一个 Stream，以后可以使用。它可以进一步过滤，但直到以某种方式收集值 - 使用 终端操作 - 才会进行调用。

让我们比较一下 javascript

rawArray.filter(x).filter(y).length

Java

rawArray.stream().filter(x).filter(y).count()

在 javascript 中，这将首先遍历 rawArray 的所有元素，为每个元素调用 x，并将结果存储在中间数组中。然后 javascript 引擎将遍历中间数组的所有元素，为每个元素调用 y，并将结果存储在第二个中间数组中，然后检查它的大小。

在 Java 中，该代码片段将导致 VM 迭代 rawArray 的元素，首先调用 x，如果 x 是true，然后在每个元素上调用 y，如果仍然是 true，则递增计数器。不会有中间数组，并且只会对数据集进行一次迭代。

函数式编程很有趣，如果使用得当，它会创建更少的代码，更简单，理想情况下甚至可能更容易阅读，但它确实将很多责任移交给了框架(或引擎或 VM 或其他任何东西) )，重要的是要认识到，看似相似的代码虽然行为相似，但在不同的环境中表现可能截然不同。