Цикл while в JavaScript — это наиболее фундаментальный оператор цикла, который повторяет оператор или серию операторов до тех пор, пока указанное условное выражение принимает значение true.
Другими словами, цикл while повторяет тело цикла до тех пор, пока условие цикла выполняется. Каждое повторение тела цикла называется итерацией.
Цикл JavaScript while — самая простая из всех циклических структур. Это оператор цикла с контролем входа. В цикле с контролем входа сначала оценивается тестовое условие. Если указанное условие истинно, то выполняется тело цикла.
Если условие не выполняется, то тело цикла не выполняется. Таким образом, цикл while выполняет блок операторов повторно до тех пор, пока условие проверки истинно.
Синтаксис цикла While в JavaScript
Общий синтаксис использования цикла while в JavaScript выглядит следующим образом:
Initialization;
while (test condition)
{
// Loop body
statement(s);
}
В приведенном выше синтаксисе while является ключевым словом. Условием проверки может быть сравнение или логическое выражение (т. е. выражение, которое возвращает true или false), которое управляет выполнением цикла body.
Мы помещаем тестовое условие между скобками, которые следуют за ключевым словом while. Операторы — это блок операторов, которые будут выполняться каждый раз в цикле.
Часть цикла, которая содержит операторы, которые должны выполняться повторно, называется телом цикла. Тело цикла может содержать один или несколько операторов.
Фигурные скобки нужны только в том случае, если тело цикла содержит два или более операторов. Однако хорошей практикой программирования является использование фигурных скобок, даже если тело цикла содержит только один оператор.
Как работает цикл While?
Давайте разберемся, как работает цикл while в JavaScript:
1. Оценивает тестовое условие или выражение в операторе while().
2. Когда тестовое условие истинно, то выполняется тело цикла (т.е. блок операторов). После выполнения тела цикла тестовое условие снова оценивается как истинное.
3. Если указанное условие истинно, тело цикла выполняется еще раз. Этот процесс повторного выполнения тела цикла продолжается интерпретатором JavaScript до тех пор, пока условное выражение окончательно не станет ложным.
4. Как только условное выражение становится ложным, цикл завершается и управление выполнением переходит из цикла.
5. При выходе программа продолжает работу со следующего оператора сразу после закрывающих фигурных скобок цикла while. Каждое выполнение тела цикла называется итерацией (или повторением).
Блок-схема цикла while в JavaScript показана на диаграмме ниже.
Теперь рассмотрим следующий фрагмент кода ниже:
// Initialization. This variable has defined outside the loop and will update inside the loop.
let count = 0;
// Declare while loop statement.
// Loop continuation conditional expression that must always appear inside the parentheses.
while (count < 10)
{
// Body of the loop.
document.write("Hello world"); // This statement will execute while the condition is true.
count++; // It counts the number of executions, and increments count by 1.
}
statements; // continue program if the condition is false.Давайте разберемся, как на самом деле работает цикл while из приведенного выше примера. Блок-схема этого сегмента кода показана на диаграмме выше.
В этом примере кода тело цикла будет выполнено 10 раз для количества = 0, 1, 2, 3,…., 9. Каждый раз в браузере будет выводиться выражение «Hello world».
Когда счетчик станет равен 10, условие станет ложным и цикл завершится. Управление выполнением перейдет из цикла на выполнение оставшейся части кода внутри программы.
В приведенном выше примере count — это управляющая переменная, которая контролирует количество выполнений. Она увеличивается на 1 после каждого цикла. Этот тип цикла называется контр-контролируемым циклом.
Примеры на основе оператора цикла While в JavaScript
Пример 1: Давайте создадим простую программу JavaScript для отображения чисел от 1 до 5 с помощью оператора цикла while.
<script>
let i = 1; // Initialization.
while(i <= 5)
{
document.write(i, "<br/>");
i++; // Increment.
}
</script>
Output:
1
2
3
4
5
Пример 2: Давайте создадим простую программу JavaScript, которая выведет «Hello World!» четыре раза в веб-браузере, используя цикл while.
<script>
let i = 1; // Initialization.
while(i < 5)
{
document.write("Hello World!", "<br/>");
i++; // Increment.
}
</script>
Output:
Hello World!
Hello World!
Hello World!
Hello World!
Пример 3: Давайте создадим программу JavaScript для отображения чисел от 5 до 1 с помощью оператора цикла while.
<script>
let i = 5;
while(i >= 1)
{
document.write(i, "<br/>");
i--; // decrement.
}
</script>
Output:
5
4
3
2
1
Пример 4: Давайте возьмем простой пример программы, в которой мы будем складывать числа от 1 до 10 с помощью цикла while и отображать сумму в браузере.
<script>
let sum = 0, i = 1;
while (i <= 10)
{
sum = sum+i;
i++;
}
document.write("Sum is "+sum); // sum is 55
</script>
Output:
Sum is 55
В предыдущем примере программы переменная i изначально установлена на 1, а сумма изначально установлена на 0. Когда условное выражение (i <= 10) истинно, программа добавляет i к сумме. Затем переменная i увеличивается до 2.
Опять же, условное выражение будет оценено как истинное. Если оно истинно, программа снова добавляет i к сумме. Переменная снова увеличивается до 3.
Этот процесс продолжается до 10. Каждый раз программа добавляет i к сумме, если условие истинно. После 10-й итерации управление выполнением выходит из цикла. Таким образом, сумма равна 1+2+3 +…+10 = 55.
Примечание: Если условное выражение всегда истинно, то цикл while никогда не будет существовать. Поэтому будьте очень осторожны при использовании циклов while в программе.
Пример программы цикла While без тела цикла
Пример 5: Рассмотрим еще один пример программы, где тело цикла while будет пустым. Мы вычислим среднее значение между «x» и «y», где «x» равно 10, а «y» равно 20.
<script>
let x = 10, y = 20;
while (++x < --y); // No body in this loop.
document.write("Mid value is "+x);
</script>
Output:
Mid value is 15
Предыдущий пример программы определяет среднее значение между x и y. Давайте разберемся, как работает цикл while в этой программе.
a) Изначально значение x установлено на 10, а y установлено на 20. Эти изначально заданные значения сравниваются друг с другом. Если значение x меньше значения y, цикл повторяется.
б) Теперь значение x увеличилось на 1, а значение y уменьшилось на 1. Эти новые значения снова сравниваются друг с другом. Если новое значение x все еще меньше нового значения y, цикл снова повторяется.
в) Этот процесс продолжается до тех пор, пока значение x не станет равным или большим значения y.
г) Когда значение x равно или больше значения y, цикл останавливается.
д) При выходе из цикла переменная x будет содержать значение, находящееся посередине между исходными значениями x и y.
Как вы можете видеть в этом примере программы, нет необходимости в теле цикла. Все действие происходит внутри самого условного выражения.
Пример 6: Рассмотрим пример программы, в которой мы будем отображать числа от 5 до 10 с помощью оператора цикла while.
<script>
let x = 5;
while ((x >= 5) && (x < 10))
{
document.write("Value of x: "+x, "<br>");
x++;
}
</script>
Output:
Value of x: 5
Value of x: 6
Value of x: 7
Value of x: 8
Value of x: 9
В этом уроке вы изучили оператор цикла while в JavaScript с помощью различных примеров программ. Надеюсь, вы поняли базовый синтаксис и работу оператора цикла while.
