Иногда при написании программы требуется использовать повторяющиеся действия или выполнять код несколько раз. Например, нам нужно вызвать функцию saySomething десять раз подряд.
Один из способов это сделать — просто перекопировать ее 10 раз и вызвать:
saySomething();
saySomething();
saySomething();
saySomething();
saySomething();
saySomething();
saySomething();
saySomething();
saySomething();
saySomething();
Такой способ сработает, и мы добьемся того, чего хотели… но так делать не стоит. Все же дублирование кода — плохая идея. Если бы нам давали пятак каждый раз, когда вы это прочтете, мы стали бы на четыре или пять монет богаче. #killing_it
Итак, даже если мы решим продублировать код несколько раз вручную, такой подход не сработает на практике. Количество повторений, которые потребуется сделать, будет варьировать в зависимости от таких внешних факторов, как число элементов в коллекции данных, результат, полученный от веб-сервиса, число букв в слове и многих других вещей, которые постоянно будут меняться. Такое количество повторов не будет всегда одинаковым, к примеру 10. Часто нам может потребоваться выполнение ОГРОМНОГО количества повторов. И нам уж точно не захочется перекопировать фрагменты кода сотни или тысячи раз, чтобы получить нужное число повторений. Это было бы ужасно.
Альтернатива alert
В предыдущих главах мы использовали функцию alert для отображения текста на экране. В этой главе мы познакомимся с другим, не столь навязчивым способом отображения. И это будет функция document.write:
document.write("Show this on screen!");
С помощью этой функции можно вывести заданный текст на страницу браузера без использования диалогового окна, которое к тому же нужно постоянно закрывать. Вы поймете, почему мы предпочитаем более упрощенные структуры, когда изучите циклы и то, как выводить на экран большое количество информации.
Нужно универсальное решение для повтора кода с сохранением контроля над тем, сколько раз этот повтор будет произведен. В JavaScript такое решение представлено в виде цикла, который может производиться в трех вариантах:
• циклы for;
• циклы while;
• циклы do…while.
Каждый из вариантов позволяет определить код, который требуется повторить (то есть цикл), а также способ остановить это повторение при соблюдении заданного условия. В следующих разделах мы все это изучим.
Поехали!
Цикл for
Один из наиболее популярных способов создания цикла — это использование инструкции for. Цикл for позволяет повторять выполнение кода до тех пор, пока заданное нами выражение не вернет false. Разберем наглядный пример.
Если преобразовать прошлый пример с saySomething с помощью for, он будет выглядеть так:
for (let i = 0; i < 10; i++) {
saySomething();
}
function saySomething() {
document.writeln("hello!");
}
Если вы хотите сразу испробовать свои силы, попробуйте вписать следующий код в тег script внутри HTML-документа:
Когда документ будет готов, сохраните его и выполните предпросмотр в браузере. На рис. 5.1 показано то, что вы увидите после загрузки страницы.
Рис. 5.1. Слово hello! повторяется слева направо
Слово hello! повторится десять раз по всей странице. Это стало возможным благодаря циклу for. Поэтому в виде благодарности за полученный нами опыт изучим все аспекты работы цикла. А вот и наша звезда:
for (let i = 0; i < 10; i++) {
saySomething();
}
Это цикл for, и он существенно отличается от тех инструкций, с которыми мы познакомились к этому моменту. Для понимания отличий представим цикл for в обобщенном виде, как показано на рис. 5.2.
for (start_point; condition; step) {
// код для выполнения
}
Рис. 5.2. Общий вид верхнего уровня цикла
Далее верхний уровень сопоставим с действительными значениями из нашего примера (рис. 5.3).
for (let i = 0; i < 10; i++) {
// код для выполнения
}
Рис. 5.3. Действительные значения
Каждая из этих трех разноцветных секций (стадий) играет свою важную роль в процессе выполнения цикла. Чтобы использовать цикл for грамотно, необходимо понимать, за что отвечает каждая из секций. Рассмотрим каждую подробнее.
Стартовое значение
В этой секции мы определяем стартовое значение переменной-счетчика нашего цикла. Обычно сюда помещается некий код для объявления и инициализации переменной, подобно тому как мы сделали на рис. 5.4.
for (let i = 0; i < 10; i++) {
// код для выполнения
}
Рис. 5.4. Объявление и инициализация переменной i
Так мы сообщаем JavaScript, что наш цикл начинается с переменной i, инициализированной как 0.
Шаг
Мы пока пропустим вторую секцию и перейдем к секции шаг (рис. 5.5).
for (let i = 0; i < 10; i++) {
// код для выполнения
}
Рис. 5.5. Шаг
На этой стадии мы определяем, как будет изменяться наше стартовое значение. Например, здесь мы сообщаем, что при каждом выполнении цикла значение i будет увеличиваться на 1. Это обозначается таинственной записью i++. Мы разберемся со значением ++ позже, когда рассмотрим принципы работы чисел и математики в JavaScript, однако иначе это можно было бы выразить как i = i + 1.
Условие, или продолжительность цикла
Возвращаясь к пропущенной нами секции, мы видим условие, которое определяет, когда закончится повторение цикла (рис. 5.6).
for (let i = 0; i < 10; i++) {
// код для выполнения
}
Рис. 5.6. Часть цикла, представляющая условие
В нашем примере условие гласит, что переменная i должна иметь значение меньше 10:
• если переменная i меньше 10, выражение вычисляется как true и цикл продолжает выполнение;
• если переменная становится равна или больше 10, то условие вычисляется как false и цикл прекращается.
Собирая все вместе
Теперь, когда мы изучили каждую часть цикла for более подробно, воспользуемся свежими знаниями, чтобы еще раз пробежаться по всему процессу от начала до конца и понять, что при этом происходит. Наш пример целиком выглядит так:
for (let i = 0; i < 10; i++) {
saySomething();
}
function saySomething() {
document.writeln("hello!");
}
Когда цикл for впервые достигает стартового значения, переменная i создается и инициализируется как 0. Далее мы переходим к условию, определяющему, следует ли циклу продолжаться или нет. Условие проверяет, является ли значение i меньше 10. 0 меньше 10? Да, следовательно, условие вычисляется как true и код, содержащийся внутри цикла, выполняется. Как только это происходит, наступает черед шага. На этой стадии переменная i увеличивается на 1 и получает значение 1. К этому моменту наш цикл сработал один раз, обычно это называют итерацией. Теперь настало время следующей итерации.
При следующей итерации весь цикл начинается с начала, но переменная i уже не инициализируется, а просто представляет значение 1, перешедшее из предыдущей итерации. Далее в условии вновь проверяется, меньше ли это значение, чем 10, что оказывается верным. После этого выполняются код внутри цикла (в нашем случае функция saySomething) и шаг, увеличивающий значение i на 1. В итоге значение i становится равно уже 2, на чем текущая итерация завершается, уступая место следующей.
В этом процессе итерации сменяют друг друга, пока условие i < 10 не будет вычислено как false. Поскольку мы начали цикл при i, равной 0, определили, что он завершится при i, равном или большем 10, а i увеличивается на 1 при каждой итерации, то этот цикл (и любой содержащийся в нем код) будет выполнен 10 раз до своего завершения.
Некоторые примеры цикла for
В предыдущем разделе мы разобрали простой цикл for и описали все его внутренние процессы. Но в отношении таких циклов и вообще всего остального в JavaScript есть один нюанс, а именно простые примеры, как правило, не охватывают все интересующие нас случаи. Лучшим решением будет рассмотреть еще несколько примеров с циклами for, чем мы и займемся в следующих разделах.
Прерывание цикла
Иногда возникает необходимость прервать цикл прежде, чем он завершится. Для этого мы используем ключевое слово break. Ниже приведен пример:
for (let i = 0; i < 100; i++) {
document.writeln(i);
if (i == 45) {
break;
}
}
Если задать i значение 45, ключевое слово break прервет цикл. И хотя я просто взял этот пример из своей головы, отныне, если у вас возникнет необходимость прервать цикл, вы будете вооружены этим знанием.
Пропуск итерации
Кроме того, иногда могут возникать ситуации, когда нужно пропустить текущую итерацию, чтобы перейти к следующей. Ловчее всего это сделать с помощью ключевого слова continue:
let floors = 28;
for (let i = 1; i <= floors; i++) {
if (i == 13) {
// нет такого этажа (floor)
continue;
}
document.writeln("At floor: " + i + "
");
}
В отличие от break, который просто прерывает цикл, continue как бы сообщает ему: «Остановись и переходи к следующей итерации». Чаще всего мы будем использовать ключевое слово continue при обработке ошибок, чтобы цикл переходил к следующему элементу.
Возврат назад
Нет никаких причин, по которым стартовое значение должно иметь переменную, инициализированную как 0, и увеличивать ее:
for (let i = 25; i > 0; i-) {
document.writeln("hello");
}
Можно легко начать с большего значения и затем производить его уменьшение, пока условие цикла не вернет false.
Вы могли слышать, что такой подход повышает производительность цикла. Дискуссия на тему того, действительно ли уменьшение быстрее увеличения, ведется до сих пор, но вы вольны экспериментировать и на своем опыте понаблюдать, так ли это.
Числа использовать необязательно
Необязательно использовать числа при заполнении цикла for:
for (let i = "a"; i!= "aaaaaaaa"; i += "a") {
document.writeln("hmm. ");
}
Вы можете написать все, что захотите, пока это не помешает циклу завершиться. Обратите внимание, что в этом примере в качестве единицы исчисления цикла мы используем букву a. При каждой итерации значение i увеличивается на одну a, а цикл останавливается, когда i становится равна aaaaaaaa.
О нет! Он не сделал этого!
О, да! Я сделал это! Побывал там, сфотографировал, запостил фотку на фейсбуке и вернулся:
let i = 0;
let yay = true;
for (; yay;) {
if (i == 10) {
yay = false;
} else {
i++;
document.writeln("weird");
}
}
Не обязательно заполнять все три секции цикла for, чтобы он заработал. До тех пор пока вы обеспечиваете выполнение условия завершения цикла, вы можете делать все, что захотите. Прямо как в примере выше.
Другие циклы
В тени его превосходительства цикла for живут и другие варианты циклов, а именно while и do…while. Для полного завершения темы давайте рассмотрим и их.
Цикл while
Цикл while повторяет заданный код, пока его условие (другое выражение) не вернет false. Взгляните на следующий пример:
let count = 0;
while (count < 10) {
document.writeln("looping away!");
count++;
}
В этом примере условие представлено выражением count < 10. При каждой итерации цикл увеличивает count на 1:
let count = 0;
while (count < 10) {
document.writeln("looping away!");
count++;
}
Как только count станет равен 10, цикл прекратится, так как выражение count < 10 вернет false. Если вы посмотрите на все, что делает этот цикл, то увидите, что он во многом имитирует работу цикла for. В то время как цикл for требует определения стадий начала, условия и шага, цикл while предполагает, что вы определите все эти стадии по-своему.
Цикл do…while
А теперь пора познакомиться с Мег Гриффин[1] в семействе циклов. Цель цикла do…while определена еще меньше, чем в случае с while. Если в цикле while условное выражение расположено перед выполнением самого цикла, то в do…while оно находится в конце.
Вот вам пример:
let count = 0;
do {
document.writeln("I don't know what I am doing here!
");
count++;
} while (count < 10);
Главное отличие между циклами while и do…while в том, что содержимое первого не может быть выполнено, если его условное выражение изначально вернет false:
while (false) {
document.writeln("Can't touch this!");
}
В случае же с циклом do…while, из-за того что условное выражение вычисляется только после одной итерации, содержимое цикла будет выполнено минимум один раз:
do {
document.writeln("This code will run once!");
} while (false);
В некоторых ситуациях это может сыграть на руку. Прежде чем подвести итоги, хочу сказать еще кое-что. Инструкции break и continue, которые мы встречали ранее как часть прекрасного цикла for, схожим образом работают внутри циклов while и do…while.
КОРОТКО О ГЛАВНОМ
Итак, вы познакомились с циклами for и способами их использования и параллельно затронули их аналоги while и do…while. Пока что мы не будем часто использовать циклы. По мере погружения в более сложные ситуации вроде сбора данных, элементов DOM, управления текстом и другие процессы мы будем прибегать к их использованию все чаще. Главное — не забывать изученную в этой главе информацию.
Если у вас есть вопросы по пройденному материалу, не стесняйтесь задавать их на форуме https://forum.kirupa.com и вы получите оперативный ответ если не от меня, то от других умнейших и готовых помочь разработчиков.