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

В веб разработке JavaScript - это сенсация. Это не просто JS фреймворк как NodeJS, React, Angular, Vue, у vanilla JS также есть большая фанбаза. Сейчас давайте поговорим о современном JavaScript. Почти во всех языках программирования есть циклы. В современном JS можно очень гибко перебрать какие-либо значения.

Вопрос в том, знаете ли вы какой цикл вам подходит лучше всего. Ведь есть и for, и обратный for, и for...of, и foreach, и for...in, и for...await. Эта статья - некая дискуссия на эту тему.

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

Ответ: обратный for

• Когда я проводил тесты локально, я был удивлен, что обратный for является самым быстрым среди всех циклов. Ниже будет пример. Запускайте цикл по массиву с одним миллионом элементов.

• Пожалуйста, помните, что результаты console.time() сильно зависят от системной конфигурации. Проверьте ее точность.

• const million = 1000000;
const arr = Array(million);
console.time(‘⏳’);
for (let i = arr.length; i > 0; i — ) {} // for(reverse) :- 1.5ms
for (let i = 0; i < arr.length; i++) {} // for :- 1.6ms
arr.forEach(v => v) // foreach :- 2.1ms
for (const v of arr) {} // for…of :- 11.7ms
console.timeEnd(‘⏳’);

• У обычного for и обратного почти одинаковое время. Счетчик в обратном for считает let i = arr.length только один раз, вот откуда разница в 0,1 мс. В обычном же for после каждого прохода, ему приходится проверять условие i < arr.length. В целом, это почти не имеет значения, можно проигнорировать.

• С другой стороны foreach - это метод прототипа массива. В сравнении с циклом for, для foreach и for…of требуется больше времени.

Какие существуют циклы и когда их использовать?

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

2. forEach
   После получения элемента массива, этот метод вызывает колбэк функцию для каждого элемента. Кроме того, эта функция принимает текущий элемент и его индекс.
   
   foreach также позволяет использовать ключевое слово this как необязательный параметр в колбэк функции.
   
   const things = [‘have’, ‘fun’, ‘coding’];
const callbackFun = (item, idex) => {
console.log(`${item} — ${index}`);
}
things.foreach(callbackFun);
o/p:- have — 0
fun — 1
coding — 2
   
   В JavaScript при использовании foreach мы не можем использовать преимущество сокращенных вычислений. Позвольте представить вам сокращенные вычисления, если вы еще с ними не знакомы. Когда мы используем логические операторы, такие как И(&&) или ИЛИ(||), мы можем пропустить итерацию цикла

3. For..of
   Это цикл был стандартизирован в ES6. С помощью этого цикла можно итерироваться по любым итерируемым объектам, таким как массив, словарь, множество, строка и др. Вдобавок, код становится более читабельным.
   
   const arr = [3, 5, 7];
const str = ‘hello’;
for (let i of arr) {
console.log(i); // logs 3, 5, 7
}
for (let i of str) {
console.log(i); // logs ‘h’, ‘e’, ‘l’, ‘l’, ‘o’
}
   
   Замечание: не следует использовать for…of в генераторах, даже если for…of заканчивается раньше. Генератор выключается после выхода из цикла, и повторная попытка его вызова больше не даст результатов.

4. For...in
   Этот вид цикла работает с объектами, у которых есть какие-либо перечисляемые свойства. Цикл for…in возвращает имена пользовательских свойств вместе с числовыми индексами для каждого отдельного свойства.
   
   По этой причине лучше перебирать массивы с помощью цикла for, используя числовой индекс, из-за того, что for…in перебирает пользовательские свойства так же как и элементы массива, даже если вы изменяете объект массива (путем добавления пользовательских свойств или методов).
   
   const details = {firstName: ‘john’, lastName: ‘Doe’};
let fullName = ‘’;
for (let i in details) {
fullName += details[i] + ‘ ‘; // fullName: john doe
}

For...in против for...of

For...in и for...of отличаются в первую очередь итерируемыми элементами. For...in проходится по свойствам объекта, в то время как for...of проходится по значениям.

let arr= [4, 5, 6];
for (let i in arr) {
console.log(i); // ‘0’, ‘1’, ‘2’
}
for (let i of arr) {
console.log(i); // ‘4’, ‘5’, ‘6’
}

Заключение

• Цикл for самый быстрый, но плохо читаем.

• forEach - быстрый, а итерация подконтрольна.

• For...of требует времени, но он более привлекателен.

• For...in требует времени, следовательно менее удобен.

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

Избегайте ненужных дополнений в ваш код, так как это может замедлить приложение.

Наслаждайтесь, когда кодите.😃