Зацикливание кода

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

Требования: Базовые значения компьютерной системы и базовое понимаение HTML и CSS, JavaScript первые шаги.
Цель: Понять как работают циклы в JavaScript.

Циклы в коде

Циклы являются важной концепцией в программировании. Их использование основано на повторении одного и того же, что в программировании называется итерацией.

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


Цикл обычно состовляет одну или несколько из следующих функций:

  •  Счетчик, который инициализируется с определенного значения — начальной точки цикла (На рисунке выше первый этап: "у меня нет еды (i have no food)")
  • Условие выхода — критерией, при котором цикл останавливается, — обычно наступает, когда цикл достигает определенного значения. Это иллюстрируется выше словами "Достаточно ли у меня еды? (Do I have enough food?)". Предположим, фермеру нужно 10 порций еды, чтобы прокормить семью.
  • Итератор постепенно увеличивает счетчик на некоторое значение на каждом шаге цикла, пока не достигнуто условия выхода. Мы явно не показали это в изображении, но если предположить что фермер собирает две порции еды в час, то после каждого часа, количество еды, которое у него имеется, увеличивается на две порции, и он проверяет достаточно ли у него еды сейчас. Если у него собралось 10 порций (условие выхода), он может остановить сбор и вернуться домой.

В псевдокоде это будет выглядеть следующим образом:

loop(food = 0; foodNeeded = 10) {
  if (food = foodNeeded) {
    exit loop;
    // У нас достаточно еды, пора домой
  } else {
    food += 2; // Прошел час, количество еды увеличилось на 2
    // переход на следующую итерацию цикла.
  }
}

Таким образом, необходимое количество еды устанавливается равным 10, а изначально фермер не имеет ни одной порции, т.е. начало равно 0. На каждой итерации цикла проверяем, соответствует ли собранное количество еды, с тем количеством, которое ему необходимо. Если это так, можно выйти из цикла, если нет, фермер собирает еще 2 порции и снова переходит к проверке.

Зачем это нужно?

Итак вы разобрались, как работают циклы. Но, вероятно, думаете: "Хорошо, но как это мне поможет писать код на JavaScript". Как мы писали ранее, циклы постоянно повторяют одно и тоже действие, что отлично подходит для быстрого выполнения повторяющихся задач.

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

На следующем примере попробуем показать, почему циклы так полезны. Предположим мы хотели нарисовать 100 случайных кругов на элементе <canvas>. Нажмите кнопку "Обновить", чтобы снова и снова запускать пример и увидеть, что круги рисуются случайным образом.

Вам необязательно понимать все части кода, но давайте посмотрим на место, где рисуются 100 кругов.

for (var i = 0; i < 100; i++) {
  ctx.beginPath();
  ctx.fillStyle = 'rgba(255,0,0,0.5)';
  ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);
  ctx.fill();
}
  • random(), описанная в коде, возвращает случайное число между 0 и x-1.
  • WIDTH и HEIGHT — это высота и ширина  окна браузера.

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

Если бы мы не использовали циклы, нам бы пришлось повторить следующий код, для отрисовки каждого круга:

ctx.beginPath();
ctx.fillStyle = 'rgba(255,0,0,0.5)';
ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);
ctx.fill();

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

Правила записи цикла

Рассмотрим некоторые конкретные конструкции циклов. Первый вариант, который вы будете использовать чаще всего, это цикл for. Он имеет следующий синтаксис:

for (initializer; exit-condition; final-expression) {
  // код для выполнения
}

Тут имеем:

  1. Ключевое слово for, за которым следуют круглые скобки.
  2. В круглых скобках у нас есть три части, разделенные точой с запятой:
    1. Инициализатор — обычно это переменная численного типа, которая увеличивается каждую итерацию, чтобы посчитать количество шагов цикла. Ее также называет счетчиком.
    2. Условие выхода — как упоминалось ранее, определяет, когда цикл должен остановиться. Обычно это выражение с оператором сравнения проверяющим, выполнено ли условие выхода.
    3. Окончательное выражение — вычисляется (или выполняется) каждый раз, когда цикл проходит полную итерацию. Обычно оно служит для увеличения (или уменьшения) переменной счетчика, чтобы приблизить ее значение к условию выхода.
  3. Фигурные скобки, содержащие блок кода. Этот код будет запускаться на каждой итерации цикла.

Посмотрим на пример, чтобы разобраться в этом более детально.

var cats = ['Билл', 'Макс', 'Пикси', 'Алиса', 'Жасмин'];
var info = 'Моих кошек зовут ';
var para = document.querySelector('p');

for (var i = 0; i < cats.length; i++) {
  info += cats[i] + ', ';
}

para.textContent = info;

Этот блок кода будет иметь следующий результат:

Заметка: Вы можете найти этот  пример на GitHub или  посмотреть онлайн.

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

  1. Итератор, i, начинается с 0 (var i = 0).
  2. Цикл запускается, пока значение итератора не будет больше длины массива кошек. Это важно - условие выхода показывает когда именно цикл должен работать, а когда нужно выйти из цикла. Поэтому в случае, пока i < cats.lenght по-прежнему возвращает true, цикл будет работать.
  3. Внутри тела цикла мы соединяем текущий элемент цикла (cats[i] это cats[независимо от того, чем i является в данный момент]) с запятой и пробелом. Итак:
    1. В начале, i = 0, поэтому cats[0] + ', ' соеденятся в ("Билл, ").
    2. На втором шаге, i = 1, поэтому cats[1] + ', ' соединятся в ("Макс, ")
    3. И так далее. В конце каждого цикла i увеличится на 1 (i++) , и процесс будет начинаться заново.
  4. Когда i достигнет величины cats.length цикл остановится и браузер перейдет к следующему фрагменту кода после цикла.

Заметка: Мы добавили условия выхода i < cats.length, а не i <= cats.length, потому что компьютеры считают с  0,  а не с 1 — в начале i = 0 и увеличивается до i = 4 (индекс последнего элемента массива). cats.length возвращает 5, т.к. в массиве 5 элементов, но нам не нужно увеличивать до i = 5, т.к. cats[5] вернет undefined (в массиве нет элемента с индексом 5). Таким образом мы хотим придти к результату на 1 меньше, поэтому i < cats.length, не одно и тоже что i <= cats.length.

Заметка: Стандартной ошибкой с условием выхода является использование условия "равный" (===) ,а не "меньше или равно" (<=). Если нам нужно увеличить счетчик до i = 5, условие выхода должно быть i <= cats.length. Если мы установим i === cats.length, цикл не начнется, т.к. i не равно 5 на самой первой итерации, поэтому цикл остановится сразу.

Остается одна небольшая проблема: выходная строка сформирована не совсем корректно:

Моих кошек зовут  Билл, Макс, Пикси, Алиса, Жасмин,

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

for (var i = 0; i < cats.length; i++) {
  if (i === cats.length - 1) {
    info += 'и ' + cats[i] + '.';
  } else {
    info += cats[i] + ', ';
  }
}

Заметка: Вы можете найти этот пример на GitHub или посмотреть онлайн.

Важно: С цкилом for, также как и сдругими циклами, вы должны убедиться что инициализатор (счетчик) и окончательное выражение построены так, что они достигнут условия выхода. Если этого не произойдет, то цикл будет продолжаться вечно. В итоге браузер или заставит его остановиться, или выдаст ошибку. Это назвается бесконечным циклом.

Выход из цикла с помощью break

Если вы хотите выйти из цикла до завершения всех итераций, вы можете использовать оператор break . Мы уже встречались с ним в предыдущей статье, когда рассматривали оператор switch: когда происходит событие, соответствующее условию, прописанному ключевым словом case внутри оператора switch, условие break моментально выходит из конструкции switch и запускает следующий после нее код.

Тоже самое и с циклами — условие break моментально закончит цикл и заставит браузер запустить следующий после цикла код.

Предположим, в массиве данных мы хотим найти имена контактов и телефонные номера, а вернуть только номер, который мы нашли.
Начнем с разметки HTML: поле <input> позволяет нам ввести имя для поиска, элемент (кнопка) <button> для подтверждения поиска, и элемент <p> для отображения результата:

<label for="search">Поиск по имени: </label>
<input id="search" type="text">
<button>Поиск</button>

<p></p>

Теперь в JavaScript:

var contacts = ['Григорий:2232322', 'Марина:3453456', 'Василий:7654322', 'Наталья:9998769', 'Диана:9384975'];
var para = document.querySelector('p');
var input = document.querySelector('input');
var btn = document.querySelector('button');

btn.addEventListener('click', function() {
  var searchName = input.value;
  input.value = '';
  input.focus();
  for (var i = 0; i < contacts.length; i++) {
    var splitContact = contacts[i].split(':');
    if (splitContact[0] === searchName) {
      para.textContent = splitContact[0] + ', тел.: ' + splitContact[1] + '.';
      break;
    } else {
      para.textContent = 'Контакт не найден.';
    }
  }
});

  1. Прежде всего у нас определены некоторые переменные: у нас есть массив с контактной информацией, каждый элемент которого это строка, содержащая в себе имя и номер телефона, которые разделенны двоеточием.
  2. Далее мы применяем обработчик события для кнопки (btn), чтобы при её нажатии запускался код для поиска и отображения результатов.
  3. Мы сохраняем значение, введенное в текстовое поле, в переменную  searchName, затем очищаем введеный текст и снова фокусируемся на текстовом поле для нового поиска.
  4. Теперь перейдем к интересующей нас части — к циклу for:
    1. Мы начали счетчик с 0, запускаем цикл до тех пор, пока счетчик всё ещё меньше, чем contacts.length, а инкремент i увеличиваем на 1 после каждой иттерации цикла.
    2. Внутри цикла мы сначала разделяем текущий контакт (contacts[i]) на символе двоеточия, и сохраняем полученные два значения в массиве с  названием splitContact.
    3. Затем мы используем условный оператор, чтобы проверить, равно ли splitContact[0] (имя контакта) введеному searchName. Если это так, мы выводим строку в абзац, чтобы сообщить, каков номер контакта, и используем break для завершения цикла.
  5. После итерации (contacts.length-1), если имя контакта не совпадает с введенным именем в поисковом запросе, для текста абзаца устанавливается: «Контакт не найден.», и цикл продолжает повторяться.

Заметка: Вы можете посмотреть исходный код на GitHub  или запустить его (also see it running live).

Пропуск итераций с продолжением

Оператор continue работает аналогичным образом, как и break, но вместо полного выхода из цикла он переходит к следующей итерации цикла.

Рассмотрим другой пример, в котором в качестве вводных данных принимается число, а возвращаются только числа, которые являются квадратами целых чисел.

Код HTML в основном такой же, как и в предыдущем примере — простой ввод текста и абзац для вывода.  JavaScript в основном такой же, хотя сам цикл немного другой:

var num = input.value;

for (var i = 1; i <= num; i++) {
  var sqRoot = Math.sqrt(i);
  if (Math.floor(sqRoot) !== sqRoot) {
    continue;
  }

  para.textContent += i + ' ';
}

Вывод:

  1. В этом случае на входе должно быть число (num). Циклу for присваивается счетчик, начинающийся с 1 (поскольку в данном случае нас не интересует 0), условие выхода, которое говорит, что цикл остановится, когда счетчик станет больше входного num, а итератор добавляет 1 к счетчику каждый раз.
  2. Внутри цикла мы находим квадратный корень каждого числа с помощью Math.sqrt(i), а затем проверяем, является ли квадратный корень целым числом, проверяя, совпадает ли он с самим собой, когда он был округлен до ближайшего целого числа (это то, что Math.floor () делает с числом, которое передает).
  3. Если квадратный корень и округленный вниз квадратный корень не равны друг другу (! ==), значит квадратный корень не является целым числом, поэтому нас он не интересует.  В таком случае мы используем оператор continue, чтобы перейти к следующей итерации цикла без записи этого числа.
  4. Если квадратный корень является целым числом, мы пропускаем блок if полностью, поэтому оператор continue не выполняется; вместо этого объединяется текущее значение i с пробелом в конце содержимого абзаца.

Примечание. Вы также можете просмотреть полный исходный код на  GitHub (так же смотри этот код вживую).

Циклы while и do...while

for — не единственный тип цикла, доступный в JavaScript. На самом деле существует множество других типов циклов. И хотя сейчас не обязательно знать их все, стоит взглянуть на структуру нескольких других, чтобы вы могли распознать те же функции, но в работе немного по-другому.

Рассмотрим цикл while. Синтаксис этого цикла выглядит так:

initializer
while (exit-condition) {
  // code to run

  final-expression
}

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

Здесь присутствуют те же три элемента и в том же порядке, что и в цикле for. Это важно, так как вам нужно определить инициализатор, прежде чем получится проверить, достиг ли цикл условия выхода.

Окончательное условие выполняется после выполнения кода внутри цикла (итерация завершена), и оно выполняется только в том случае, если условие выхода еще не достигнуто.

Посмотрим еще раз пример со списком кошек с кодом переписанным под использование цикла while:

var i = 0;

while (i < cats.length) {
  if (i === cats.length - 1) {
    info += 'and ' + cats[i] + '.';
  } else {
    info += cats[i] + ', ';
  }

  i++;
}

Примечание: цикл все еще работает так же, как и ожидалось - посмотрите, как он работает на GitHub (также посмотрите полный исходный код).

Цикл do...while представляет собой вариацию структуры цикла while:

initializer
do {
  // code to run

  final-expression
} while (exit-condition)

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

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

Перепишем наш пример с кошками, чтобы использовать цикл do...while:

var i = 0;

do {
  if (i === cats.length - 1) {
    info += 'and ' + cats[i] + '.';
  } else {
    info += cats[i] + ', ';
  }

  i++;
} while (i < cats.length);

Примечание: И снова это работает так же, как и ожидалось - посмотрите, как он работает на GitHub (также посмотрите полный исходный код).

Замечание: Применяя циклы while and do...while , как и все циклы, убедитесь, что инициализатор повторяется так, чтобы он в конце концов достиг условия выхода. Если это не так, цикл будет продолжаться вечно, и либо браузер заставит его остановиться, либо произойдет сбой. Это называется доктор Стрэндж и Дормамму бесконечным циклом

Практическое упражнение:  запускаем обратный отсчет!

В этом упражнении мы хотим, чтобы вы написали простой отсчет времени запуска до поля вывода, от 10 до "Пуск!"  В частности, мы хотим, чтобы вы:

  • Цикл от 10 до 0. Мы предоставляем вам инициализатор: var i = 10;.
  • Для каждой итерации создайте новый абзац и добавьте его к выходному элементу <div>, который мы выбрали, используя var output = document.querySelector ('.output');. В комментариях мы предоставили вам три строки кода, которые необходимо использовать где-то внутри цикла:
    • var para = document.createElement('p'); — создать новый абзац.
    • output.appendChild(para); — добавляет абзац к выводу <div>.
    • para.textContent = — делает текст внутри абзаца равным значению, которое вы расположили справа, после знака равенства.
  • Разные номера итераций требуют, чтобы в абзаце для каждой итерации помещался свой текст (вам понадобится условный оператор и несколько para.textContent = lines
    ):
    • Если число равно 10, выведите в абзаце «Обратный отсчет 10».
    • Если число равно 0, выведите в абзаце «Пуск!»
    • Для любого другого числа выведите в абзаце только число.
  • Не забудьте включить итератор! Однако в этом примере мы ведем обратный отсчет после каждой итерации, а не вверх, поэтому вам не нужен i ++. Как выполнить итерацию вниз?

Если вы допустили ошибку, вы всегда можете сбросить пример с помощью кнопки «Сброс» (Reset). Если у вас совсем ничего не получается, нажмите «Show solution», чтобы увидеть решение.

Практическое упражнение:   Заполнение списка гостей

Возьмите список имен, хранящихся в массиве, и поместите их в список гостей. Тут не всё так просто: мы не хотим приглашать Фила и Лолу, потому что они наглые и всё сожрут! У нас есть два списка. Один для тех, кого мы хотим пригласить, второй для тех, кого приглашать не нужно.

Для этого нужно сделать следующее:

  • Напишите цикл, который будет повторяться от 0 до длины массива people.
    Вам нужно начать с инициализатора var i = 0; , но какое нужно использовать условие выхода?
  • Во время каждой итерации цикла нужно проверять, соответствует ли текущий элемент массива именам "Георгий" или "Лолита", используя условный оператор:
    • Если это так, привяжите этот элемент массива в конец textContent абзаца refused, за которым следуют запятая и пробел. 
    • Если это не так, привяжите этот элемент массива в конец textContent абзаца admitted, за которым следуют запятая и пробел.

Мы уже предоставили вам:

  • var i = 0; — Ваш инициализатор.
  • refused.textContent += — начало строки, которая объединит что-то до конца refused.textContent.
  • admitted.textContent += — начало строки, которая объединит что-то до конца admitted.textContent.

Дополнительный бонусный вопрос - после успешного выполнения вышеупомянутых задач у вас останется два списка имен, разделенных запятыми, но они будут составлены некорректно: в конце каждого списка будет запятая. Сможете ли вы составить эти списки так, чтобы в конце каждой строки вместо запятой была точка. За помощью можно обратиться к статье «Полезные строковые методы».

Если вы допустили ошибку, вы всегда можете сбросить пример с помощью кнопки «Сброс» (Reset). Если у вас совсем ничего не получается, нажмите «Показать решение», чтобы увидеть решение.

Так какой тип цикла использовать?

В основном, используют for, while и do...while циклы, и они во многом взаимозаменяемы. Все они могут быть использованы для выполнения одних и тех же задач и какой из них вы будете использовать, во многом зависит от ваших личных предпочтений. Используйте тот, который вам проще всего запомнить или наиболее интуитивно понятен. Давайте вспомним каждый из них.

For:

for (initializer; exit-condition; final-expression) {
  // code to run
}

while:

initializer
while (exit-condition) {
  // code to run

  final-expression
}

do...while:

initializer
do {
  // code to run

  final-expression
} while (exit-condition)

Для начала мы бы порекомендовали for, так как его проще запомнить: инициализатор, условие выхода и конечное выражение аккуратно заключено в скобки, поэтому их легко отследить, чтобы их не пропускать.

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

Заключение

Эта статья раскрывает основные концепции и различные опции, доступные при циклическом кодировании в JavaScript. Теперь вам должно быть понятно, почему циклы являются хорошим механизмом для работы с повторяющимся кодом. Старайтесь использовать их в своих собственных примерах!

Если вы чего-то не поняли, пробуйте читать статью снова или свяжитесь с нами, мы поможем разобраться.

Дополнительная информация

 

В этом модуле