Цикл в JavaScript — это блок операторов, который многократно выполняет оператор или серию операторов, пока определенное условие остается истинным или пока определенное условие не станет истинным.
Другими словами, оператор цикла — это оператор потока управления, который многократно выполняет блок операторов до тех пор, пока не будет выполнено условие завершения.
Короче говоря, оператор цикла многократно выполняет один и тот же блок операторов.
Блок операторов может выполняться много раз, от нуля до бесконечности, в зависимости от требований. Каждое выполнение цикла называется итерацией в JavaScript.
Давайте разберемся с циклами в JavaScript на примере.
Предположим, что нам нужно напечатать строку «Hello world» сто раз в программе JavaScript. Было бы утомительно и скучно писать следующее выражение сто раз:
// Writing the same statement 100 times like this will be a tedious and boring task.
document.write("Hello world");
document.write("Hello world");
...
...
document.write("Hello world");
Итак, как вы решите эту проблему?
Чтобы преодолеть эту проблему, язык программирования JavaScript предоставляет мощную функцию, называемую циклом. Этот цикл контролирует, сколько раз оператор или последовательность операторов должны быть выполнены подряд.
Используя оператор цикла в программе JavaScript, мы можем просто указать интерпретатору JavaScript вывести оператор сто раз вместо того, чтобы писать код сто раз для вывода одного и того же оператора.
Простой код для печати выражения сто раз:
let count = 0;
while (count < 100)
{
document.write("Hello world");
count++;
}
Изначально переменная count установлена в 0. Цикл проверяет, верно ли count < 100. Если это так, он выполняет блок или тело цикла, чтобы вывести сообщение «Hello world» и увеличивает count на 1.
Он многократно выполняет блок цикла, пока count < 100 не станет ложным. Когда count < 100 становится ложным (т. е. когда count достигает 100), цикл заканчивается. После выполнения оператора цикла управление переходит к оператору, следующему за циклом.
Таким образом, можно сказать, что циклирование — это метод, при котором одни и те же строки кода выполняются многократно.
Структура управления циклом в JavaScript
Блок операторов выполняется последовательно в цикле до тех пор, пока не будет выполнено определенное условие завершения цикла. Таким образом, структура управления циклом состоит из двух частей:
- Контрольное заявление
- Тело цикла
Работа оператора управления заключается в оценке (т.е. проверке) определенного условия, а затем в повторном выполнении операторов в блоке цикла.
Мы можем классифицировать управляющую структуру на два типа в зависимости от положения управляющего оператора в цикле. Это:
- Входной контролируемый контур
- Выходной контролируемый контур
Блок-схема представлена на диаграмме ниже.
Цикл с контролем входа: В цикле с контролем входа условия контроля оцениваются до выполнения блока цикла. Если указанные условия удовлетворяются, то тело цикла будет выполнено.
Если не выполнено, то тело цикла не будет выполнено. Например, цикл while и цикл for являются циклами с контролем входа.
Цикл с контролируемым выходом: В цикле с контролируемым выходом указанные условия проверяются в конце тела цикла. Поэтому тело цикла выполняется безусловно в первый раз. Например, цикл do-while является циклом с контролируемым выходом.
Мы должны тщательно объявить тестовые условия для выполнения желаемого количества циклов в программе JavaScript.
Основные шаги по обработке циклов в JavaScript
По сути, обработка циклов в JavaScript состоит из четырех шагов:
- Установка и инициализация счетчика.
- Последовательное выполнение операторов в теле/блоке цикла.
- Оценить заданное условие выполнения цикла.
- Увеличение счетчика.
Типы циклов в JavaScript
JavaScript поддерживает три типа циклов:
- Простые петли
- Вложенные циклы
- Бесконечные циклы
Мы уже обсуждали простые циклы в предыдущих разделах. Теперь обсудим вложенные циклы в JavaScript.
Вложенные циклы в JavaScript
Подобно условным операторам, мы также можем вкладывать циклическую структуру одну в другую. Цикл, помещенный внутрь другого, называется вложенным циклом в JavaScript.
Вложенные циклы позволяют нам зацикливаться по двум переменным. Внешний цикл называется внешним циклом, а внутренний цикл называется внутренним циклом. Каждый раз, когда внешний цикл повторяется, внутренний цикл повторяется до тех пор, пока его условие не станет ложным.
Рассмотрим следующий простой пример, демонстрирующий пару вложенных циклов for в JavaScript.
var x, y;
for(x = 1; x <= 5; x++)
{
for(y = 1; y <= 5; y++)
{
// statements to be executed.
}
}
В приведенном выше примере x и y называются переменными цикла, поскольку они управляют выполнением цикла. В приведенном выше примере есть два цикла for.
Первый цикл, который использует x в качестве переменной-счетчика, является внешним циклом. Второй цикл, который использует y в качестве переменной-счетчика, является внутренним циклом. Каждый цикл выполнит соответствующие ему операторы 5 раз. Внешний цикл выполнит 1–5 только один раз.
Но внутренний цикл будет итерироваться 5 раз для каждой итерации внешнего цикла и будет выполнять операторы для каждого значения x и y через внутренний цикл. Когда внутренний цикл заканчивается, внешний цикл начинает следующий цикл.
Бесконечный цикл в JavaScript
Бесконечный цикл в JavaScript — это оператор цикла, который повторяется вечно. Мы также знаем его как бесконечный цикл, потому что указанное условие всегда истинно, а тело цикла выполняется многократно и никогда не заканчивается.
Рассмотрим следующий пример, приведенный ниже.
var n = 1;
while(n > 0)
{
document.write(n, "<br>");
// n never changes.
}
В этом примере цифра 1 будет отображаться в браузере бесконечное количество раз или, по крайней мере, пока вы не завершите программу. Давайте рассмотрим еще один пример бесконечного цикла, который выполняет код вечно.
// Initiating an infinite loop
while (true) {
// execute code forever
}
Это самый простой способ создать бесконечный цикл, поскольку значение true является условным и его условие всегда будет истинным.
Другим классическим примером является цикл for, в котором мы не будем определять выражение увеличения или уменьшения.
// Infinite loop because of no increment or decrement expression.
for (var i = 1; i <= 10) {
document.write(i * i, "<br>");
}
В этом примере выражение инкремента или декремента отсутствует внутри оператора цикла for. В результате значение переменной i не изменяется, что приводит к бесконечному циклу.
Очевидно, программист должен избегать бесконечных циклов, поскольку их может быть трудно обнаружить в программе. JavaScript на самом деле не выдает никаких ошибок, которые бы говорили о наличии бесконечного цикла. Таким образом, вы должны быть осторожны, когда создаете цикл в любой программе.
Выход из цикла в JavaScript
В JavaScript есть простой выход из бесконечного цикла. Мы можем использовать оператор break для немедленного выхода из цикла. Простой пример использования оператора break внутри бесконечного цикла:
<script>
var x = 1;
while(true) {
x++;
document.write(x);
if(x == 3) break;
}
</script>
В этом примере оператор while настроен как бесконечный цикл. Оператор if проверяет, что значение x равно 3. Если значение x равно 3, он выходит из цикла.
Когда интерпретатор JavaScript выполняет оператор break, он пропускает оставшуюся часть кода и продолжает выполнение скрипта с оператором, следующим за циклом. Мы можем использовать оператор break в любом типе цикла, будь то бесконечный или нет.
Типы циклов (итераций) в JavaScript
Язык JavaScript поддерживает четыре типа операторов цикла для выполнения операций цикла. Это:
- циклы for
- циклы for-in
- циклы while
- циклы do-while
Цикл while — это оператор цикла, который повторяет оператор или ряд операторов до тех пор, пока условное выражение остается истинным.
Цикл for — это оператор цикла, который выполняет оператор или ряд операторов до тех пор, пока указанное условное выражение принимает значение true.
Оператор цикла do while выполняет свои блоки операторов, пока его условие принимает значение true.
В последующих уроках мы последовательно изучим функции, особенности и применение каждого из этих циклов.
В этом уроке вы изучили циклы в JavaScript и типы операторов цикла с различными примерами. Надеюсь, вы поняли основные концепции циклов, вложенных циклов и бесконечных циклов в JavaScript. В следующем уроке мы изучим цикл for в JavaScript с примерами программ.
