Какой самый быстрый тип цикла в JavaScript?

Методы массива

В JavaScript есть несколько встроенных методов массива, почти все они содержат циклы. Сначала я запущу тест с 4 наиболее распространенными методами JS, используемыми для цикла:

Как видите, forEach имеет лучшую производительность из 4.

Причина, по которой forEach быстрее, чем map и filter, заключается в том, что он ничего не вернет после завершения, только undefined, но map и filter вернут новый массив. reduce работает почти так же быстро, как forEach, потому что он возвращает начальное значение (если указано) или возвращает значение после завершения вычисления в функции reducer.

Встроенные методы массива просты в использовании и имеют разные варианты использования, а производительность не так уж важна при сравнении этих функций, они красивы на вид, читаются, пишутся и декларативны. Но когда производительность действительно имеет значение, другие императивные подходы работают в несколько раз быстрее.

Для петель

Во-первых, взгляните на это:

Вы можете видеть, что циклы for в 3 раза быстрее, чем методы массива, такие как forEach map и reduce. При получении элемента массива методы массива выполняют функцию обратного вызова для каждого элемента.

Теперь более подробно рассмотрим другие традиционные циклы:

Для цикла, длина без кэширования:

for (var x = 0; x < arr.length; x++) {
 dosmth = arr[x];
}

Цикл for, длина в кэше:

var len = arr.length;
for (var x = 0; x < len; x++) {
    dosmth = arr[x];
}

Цикл for…of:

for (let val of arr) {
    dosmth = val;
}

Пока цикл, ++x:

var x = 0, l = arr.length;
while (x < l) {
    dosmth = arr[x];
   ++x;
}

Пока цикл, x++:

var x = 0, l = arr.length;
while (x < l) {
    dosmth = arr[x];
   x++;
}

Теперь я прогоню бенчмарки, результаты такие:

В обычных случаях for...of работает отлично, но в больших наборах данных, таких как тест выше, он относительно медленнее (все же быстрее, чем методы массива).

Заключение

Если вы предпочитаете декларативное программирование, просто используйте методы массива, их легче читать, писать в целом и лучше в 99% случаев на JavaScript.
Но если вы предпочитаете производительность, просто используйте другие императивные подходы.
Другими словами, просто выберите тип цикла, который соответствует вашему стилю и ситуации.

Последние слова

Хотя мой контент бесплатен для всех, но если вы найдете эту статью полезной, вы можете купить мне кофе здесь

Создавайте приложения с повторно используемыми компонентами, такими как Lego.

Инструмент с открытым исходным кодом Bit помогает более чем 250 000 разработчиков создавать приложения с компонентами.

Превратите любой пользовательский интерфейс, функцию или страницу в компонент многократного использования — и поделитесь им со своими приложениями. Легче сотрудничать и строить быстрее.

→ Подробнее

Разделите приложения на компоненты, чтобы упростить разработку приложений, и наслаждайтесь наилучшими возможностями для рабочих процессов, которые вы хотите: