Javascript циклы while, do-while и for

Одним из важнейших инструментов в программировании являются циклы. Они полезны в случаях, когда нужно сделать что-то определённое кол-во раз.
Если будет такая задача, например, вывести на экран строку 'всем привет' 1000 раз. То, без использования цикла, во первых это займёт много времени и во вторых, это будет смотреться не очень красиво. Поэтому циклы нужно знать на отлично, потому что они используются очень и очень часто.
В программировании существуют четыре цикла, это while, do-while, for и foreach. Каждый из них имеет свой синтаксис и каждый используется в определённых случаях.
Чаще всего используются циклы for и foreach, затем while, а цикл do-while встречается очень редко.
И начнём мы с цикла while.
Цикл while
Синтаксис цикла while следующий:

Сначала объявляем переменную i, которая является счётчиком и внутри цикла мы этот счётчик инкрементируем. Внутри круглых скобок пишем условие входа/выхода из цикла.
Замечание! Пишите условие выхода правильно, иначе может получиться бесконечный цикл и тогда скрипт зависнет. Такой цикл может получиться, если например, в условие выхода, напишем просто true.
Для примера выведем строку 'Всем привет!' 10 раз.
var i = 0; while(i < 0){ document.write(i + '. Всем привет!
'); i++; }
Переменная i, может начаться как с 0 так и с 1 или с другого любого числа.
Условие выхода является в тоже время и условием входа. Цикл работает следующим образом: Сначала проверяется если переменная i, меньше 10, и если условие истина, то мы входим в цикл, иначе, нет. В данном случае если переменная i будет равна 30, например, то цикл не выполнится, потому что 30 не меньше 10.
Зашли цикл, вывели строчку 'Всем привет', инкрементировали счётчик и опять переходим к условию, где опять проверяем если значение переменной i, меньше 10, то мы входим в цикл, иначе выходим из него. И так происходит до того момента когда условие входа станет лож, то есть значение переменной i будет 10. 10 не меньше 10, поэтому мы уже не входим в цикл, а идём дальше.
Замечание! Не забудьте инкрементировать счётчик (i++), иначе опять же получится бесконечный цикл.
С циклом while разобрались, теперь перейдём к циклу do-while.
Цикл do-while
Синтаксис цикла do-while следующий:

Разница между циклом while и do-while состоит в том, что цикл do-while может выполниться хотя бы один раз, независимости от условия, тогда как у цикла while если условие лож, то он вообще не выполнится.
Замечание! Как и у цикла while, не забудьте инкрементировать счётчик i.
Перейдём к практике. Для примера посчитаем произведение чисел от 1 до 10.
var i = 1; var production = 1; do{ production *= i; i++; }while(i <= 10) document.write("Произведение чисел от 1 до 10: " + production); //production = 3628800
Результатом будет число 3628800. На первом шаге мы сразу вошли в цикл, несмотря на его условие, где выполнилось операция production *= i (это тоже самое что и production = production * 1). Потом инкрементируем счётчик. После инкрементации он имеет значение 2. И в конце проверяем условие, если значение счётчика меньше либо равно 10, то мы идём к следующей итерации цикла, иначе мы выходим из цикла и идём дальше.
Цикл for
Как я уже написал выше цикл for, встречается достаточно часто, поэтому его нужно знать очень хорошо.
Синтаксис цикла for следующий:

Для лучшего понимания решим простую задачу. Допустим нам нужно посчитать сумму чисел от 1 до 1000 с помощью цикла for.
var summa = 0; for(var i = 1; i <= 1000; i++){ summa += i; } document.write("Сумма чисел от 1 до 1000: " + summa); //summa = 500500
Сохраняем документ, открываем его в браузере и видим, что результат равен 500500.
Замечание! Если в цикле находится только одни оператор, то фигурные скобки использовать необязательно.
Для демонстрации выведем на экран 5 раз, какую то строку, например ' Здравствуйте! '.
for(var i = 1; i <= 5; i++) document.write(i + '. Здравствуйте! <br />');
Замечание! После выполнения цикла в переменной i, остаётся последнее значение.
Теперь решим задачу чуть по сложнее, например нам нужно вывести строку 'Привет' 100 раз. И для того чтобы это все не вывелось в один ряд, то после каждой 10-ой итерации, перейдём на новую строку. И в конце выведем значение переменной i.
for(var i = 1; i <= 100; i++){ document.write('привет!'); if(i % 10 == 0 ) document.write("<br />"); } document.write("<p>Переменная i = " + i + "</p>"); // i = 101
Цикл foreach обычно используется для перебора объектов и массивов. Поэтому о нем я расскажу в статье описывающая работу с массивами.
Операторы break и continue
Оператор break предназначен для того чтобы принудительно выйти из цикла.
Оператор continue позволяет прервать текущую итерацию цикла, и перейти к следующей.
Для лучшего понимания, тоже решим простую задачу. Допустим, мы хотим посчитать сумму нечётных чисел с 1 до 20. И когда дойдём до 15-ой итерации, то выйдем из цикла.
var summa = 0; for(var i = 1; i <= 20; i++){ //Пропускаем текущею итерацию цикла if(i % 2 == 0 ) continue; summa += i; //Выходим совсем из цикла. if(i == 15) break; document.write( i + ". Итерация <br />"); } document.write("<p><b>summa</b> = " + summa + "</p>"); //summa = 64
Сохраняем документ, открываем его в браузере и смотрим на результат.

Для тренировки попробуйте изменить написанный скрипт, таким образом, чтобы он посчитал сумму чётных чисел.
На этом заканчивается эта статья. Теперь Вы знаете синтаксис циклов while, do-while, for и как с ними работать. Также познакомились с операторами break и continue.
Похожие статьи:
Понравилась статья?
Тогда поделитесь ею с друзьями и подпишитесь на новые интересные статьи.
Поделиться с друзьями:
Подписаться на новые статьи:
Поддержите пожалуйста мой проект!
Если у Вас есть какие-то вопросы или предложения, то можете писать их в комментариях или мне на почту sergiu1607@gmail.com. И если Вы заметили какую-то ошибку в статье, то прошу Вас, сообщите мне об этом, и в ближайшее время я всё исправлю.
Добавляйтесь ко мне в друзья в:
Добавляйтесь в мои группы:
Подпишитесь на мои каналы:
Автор статьи: Мунтян Сергей
Копирование материалов с сайта sozdatisite.ru ЗАПРЕЩЕНО!!!
Дата добавления: %date%