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, чем мы и займемся в следующих разделах.