Question

我有10000个对象的数组，我必须计算前500个对象中有多少满足某些条件。动画过程中必须多次执行此操作。

在以下两种情况下，哪个代码的性能更好（或出于其他原因而更可取）？

版本1

var el,ct=0;
for (var j=0;j<500;j++) {
    el=arr[j];
    if (el.a==1 && el.b<8 && el.c>2) ct++;
}

版本2

var ct=arr.filter(function(el,j){return j<500 && el.a==1 && el.b<8 && el.c>2}).length;

Answer 1

您可以使用诸如console.time（）之类的devtools方法来标记这些方法。

console.time('for-loop approach');
var el,ct=0;
for (var j=0;j<500;j++) {
    el=arr[j];
    if (el.a==1 && el.b<8 && el.c>2) ct++;
}
console.timeEnd('for-loop approach');

console.time('filter approach');
var ct=arr.filter(function(el,j){return j<500 && el.a==1 && el.b<8 && el.c>2}).length;
console.timeEnd('filter approach');

Answer 2

当您比较两个片段并只关心性能时，for循环会更有效。我没有尝试过并自己进行基准测试，但这是对这些差异的一般描述。

在for循环版本中，您仅“访问”列表的前500个元素。传递给过滤器的函数将始终应用于所有元素，并再次检查该元素的索引是否小于500。正是由于这个事实，您需要检查更多的元素，所以在筛选器案例中还有更多的工作要做。

此外，以任何编程语言调用函数时都需要支付一般费用。那就是更新堆栈（在其中存储了函数局部变量；在调用函数中可见的变量在被调用函数中不可见。为确保使用堆栈）。 for循环保留在同一函数中，因此局部变量范围不会更改，并且不需要更新堆栈。

因此，从纯粹的性能角度来看，for循环是可取的。

尽管如此，我个人还是觉得更实用的样式（应用过滤器）更优雅，更易于阅读和维护。它将需要更多的调整-例如，在原始数组上创建一个视图，以便不会访问所有的10k元素。我不会在这里深入探讨，因为这不是原始问题:)

比较JavaScript中的过滤器和for循环性能

2 个答案: