Циклы в JavaScript

Очень часто нужно, чтобы определённая часть программы выполнялась много раз. Разумеется, можно просто сделать так: скопировать-вставить и так нужное число раз. Однако, это абсурдно, особенно, если действие надо выполнять, например, 1000 раз. Поэтому существуют так называемые циклы, которую присутствуют в большинстве языков программирования. И о них я Вам и расскажу.

Циклы в JavaScript содержит определённый код, который прокручивается многократно. Существует несколько видов циклов: for, while и do-while.

Начнём с самого первого цикла (и самого популярного) - цикла for. Общий вид этого цикла таков:

for (переменная_итерации = начальное_значение; условие; действие_после_каждой_итерации) {
//код программы
}

Давайте прокомментирую то, что здесь написано. Вначале идёт - переменная итерации. Это обычное имя переменной для итерации. Дальше идёт начальное_значение. Собственно, название говорит само за себя. Дальше идёт условие, при выполнении которого (то есть возвращается true) цикл запускается ещё один раз, и, наконец, действие, которое выполняется после каждой итерации. Как правило, это изменение переменной для итерации.

Давайте с Вами напишем простой скрипт, который будет выводить количество итераций цикла:

for (i = 0; i < 100; i++)
document.write(i + " ");

Здесь мы задали переменную для итерации (называется i), которой присвоили значение 0. Дальше проверяется условие: i < 100. Если оно выполняется, то выполняется одна итерация цикла. После выполнения каждой итерации происходит i++ (то есть увеличение переменной i на 1). Снова проверяется условие, и если оно истинно, то выполняется ещё одна итерация. И так до тех пор, пока условие i < 100 не станет ложным. Очевидно, что оно будет ложно лишь через 100 итераций. Таким образом, данный цикл будет выполняться 100 раз, что мы можем увидеть, если запустим этот скрипт. И ещё кое-что. Так как у нас здесь выполняется всего один оператор (document.write()), то наличие фигурных скобок необязательно. Если у Вас 2 и более операторов крутятся в цикле, то тогда необходимо их поставить.

Теперь поговорим о второй разновидности циклов в JavaScript - while. В принципе, цикл очень похож на for (хотя все циклы похожи). Но здесь общий вид другой:

while (условие) {
//код программы
}

Как видите, здесь нет ни переменной для итерации, ни каких-либо действий после итерации. Отсюда следует вывод: чтобы выйти из цикла необходимо в самом цикле сделать так, чтобы " условие " стало ложным. Если это не сделать, то произойдёт зацикливание, а, следовательно, Ваш скрипт повиснет.

Давайте реализуем такую же задачу, как и раньше, но используя цикл while.

var i = 0;
while (i < 100) {
i++;
document.write(i + " ");
}

Перед началом цикла мы создали переменную i, которой присвоили начальное значение. Затем перед запуском цикла проверяется условие, и если оно истинно, то запускается итерация цикла, в которой мы увеличиваем переменную для итерации (иначе произойдёт зацикливание). И выводим эту переменную.

И, наконец, последний вид циклов в JavaScript - цикл do-while. Синтаксис такой:

do {
//код программы
} while (условие)

Очень похож на цикл while, однако, здесь есть всего одно, но очень принципиальное отличие. Если цикл while сначала проверяет условие, а потом уже выполняет или нет итерацию. То цикл do-while сначала именно выполняет итерацию, и только потом проверяет условие. И если оно ложно, то выходит из цикла. Другими словами, независимо от условия данный цикл гарантированно выполнится хотя бы 1 раз. Думаю, что данный код будет излишним, но всё же.

var i = 0;
do {
i++;
document.write(i + " ");
} while (i < 100)

Пояснять код не буду, уверен, Вы из без меня с ним разберётесь. Поэтому я лучше перейду к двум интересным операторам: break и continue.

Начнём с break. Данный оператор позволяет досрочно выскочить из цикла. Давайте с Вами напишем такой код:

for (i = 0; i < 100; i++) {
if (i == 50) break;
document.write(i + " ");
}

Вы можете запустить этот скрипт и обнаружите, что вывелись только числа до 49, так как при i = 50 цикл прервался, благодаря оператору break.

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

for (i = 0; i < 100; i++) {
if (i == 50) continue;
document.write(i + " ");
}

Если Вы запустите этот скрипт, то увидите, что не хватает числа 50. Это произошло потому, что при i = 50, мы переходим к следующей итерации цикла, перед которой i увеличивается на 1 и становится равным 51-му.

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

Дата добавления: 2015-10-31