сравнение производительности фильтра и цикла в JavaScript

Question

У меня есть массив из 10000 объектов, и я должен подсчитать, сколько из первых 500 объектов удовлетворяют некоторым условиям. Эта операция должна выполняться несколько раз во время анимации.

Какой код имеет лучшую производительность (или предпочтительнее по другим причинам) среди следующих двух случаев?

1. Версия 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. Версия 2

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

Answer 1

Когда вы сравниваете два фрагмента и просто заботитесь о производительности, цикл for более эффективен. Я не пробовал и сам тестировал, но вот общее описание различий.

В версии цикла for вы «посещаете» только первые 500 элементов списка. функция, переданная фильтру, всегда будет применяться ко всем элементам, выполняя дополнительную проверку для индекса элемента ниже 500. Именно из-за того факта, что у вас есть больше элементов для проверки, в случае с фильтром нужно проделать большую работу.

Кроме того, при вызове функции на любом языке программирования взимается общая цена. То есть для обновления стека (в котором хранятся локальные переменные функции; переменные, видимые в вызывающей функции, не видны в вызываемой функции. Для этого используется стек). Цикл for остается в той же функции, поэтому область видимости локальных переменных не меняется, и стек не нужно обновлять.

Следовательно, с точки зрения производительности, цикл for является предпочтительным.

Тем не менее, лично я считаю, что более функциональный стиль (применение фильтра) более элегантен, его легче читать и поддерживать. Потребовались бы дополнительные настройки - например, чтобы создать представление исходного массива, чтобы не все элементы размером 10 тыс. Посещались. Я не буду вдаваться в подробности, так как это не оригинальный вопрос :)

Answer 2

Вы можете использовать методы devtools, такие как console.time (), чтобы отметить эти подходы.

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');