Оператор while javascript примеры

Цикл while JS (JavaScript)

Основная цель в JavaScript while — повторно запускать определенный фрагмент кода, снова и снова. Он очень похож на цикл for с одним важным отличием. Позвольте мне занять немного вашего времени, чтобы объяснить разницу между этими двумя типами циклов.

В чем разница между циклами while js и for js?

Разница между этими циклами заключается в том, как они прекращают выполнение фрагмента кода.

Цикл for выполняется установленное количество итераций. Мы точно знаем, сколько раз цикл выполнит заключенный в его теле фрагмент кода.

В while все происходит по-другому. Цикл while JS (JavaScript( выполняется, пока истинно определенное условие. После того, как условие расценивается как ложное, тогда цикл while прекращается.

Причина, по которой эти циклы различаются между собой, заключается в том, что мы не обязательно можем заранее знать, когда заданное условие перестанет выполняться. Поэтому мы не можем предсказать, сколько итераций цикла while будет выполнено, пока он не будет разорван.

Плюсы и минусы цикла while

Позвольте мне начать с рассмотрения единственного существенного » минуса » цикла while . Он может работать вечно!

Если окажетесь в ситуации, когда цикл while продолжит выполняться до бесконечности, то ваша программа застрянет ( или зависнет ). Тогда нужно закрыть браузер, чтобы прервать выполнение кода JavaScript .

Должен отметить, что неуправляемый в JavaScript while loop обычно не работает вечно. Потому что, как программисты мы всегда обязаны удостовериться, что в какой-то момент условие нашего цикла while станет false .

Теперь относительно » плюсов » — они весьма очевидны. While будет непрерывно работать до тех пор, пока выполняется условие. В качестве примера использования цикла while можно привести запрос к пользователю ввести данные. Цикл будет предлагать ввести данные снова и снова, пока пользователь не введет корректные данные.

Синтаксис цикла while

Синтаксис циклов for и while очень похож.

Нужно использовать ключевое слово while , а также определить условие, при котором цикл будет выполняться. Как и другие управляющие структуры, цикл while определяет область действия.

Вот, как должен выглядеть код:

Самая трудная часть — это определить, какое условие или условия нужно поместить в цикл, чтобы он работал должным образом.

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

Пример цикла while

Предположим, что мы хотим попросить пользователя ввести число от 1 до 10. Но что произойдет, если он введет неправильное число?

В этом случае мы должны попросить его снова ввести значение, и проверить, соблюдено ли условие ( введено ли число от 1 до 10 ).

Это случай, в котором цикл for с треском бы провалился. Потому что мы не можем заранее знать, сколько раз нам придется попросить пользователя ввести корректное число. В таком случае к нам на помощь приходит цикл while .

Вот как может выглядеть наш код:

var theNumber = prompt("Пожалуйста, введите число от 1 до 10."); while (theNumber < 1 || theNumber >10 || isNaN(theNumber)) < theNumber = prompt("Введено неправильное значение, пожалуйста, введите число от 1 до 10!"); >alert("Отлично! Вы ввели число: " + theNumber);

Стоит отметить, что в приведенном выше примере у нас используется три отдельных условия в цикле while JavaScript .

Вот эти три условия: theNumber 10 || isNaN(theNumber) . Они указывают следующее:

• ЕСЛИ theNumber меньше 1, ИЛИ;
• ЕСЛИ theNumber больше 10, ИЛИ;
• ЕСЛИ theNumber — это НЕ число, то продолжить цикл.

Так как мы используем оператор ИЛИ (||) между всеми условиями, это означает, что если любое из условий истинно, то общее условие цикла while будет оценено как true, и выполнение цикла будет продолжено.

Только в том случае, если все три условия оцениваются как false , общее условие цикла while будет оценено, как false , и он будет остановлен.

Заключение

JavaScript while loop является единственным реальным циклом в языках программирования. for является просто частной разновидностью цикла while .

Это тот случай, когда вы можете самостоятельно воссоздать цикл for , используя синтаксис цикла while , смотрите и учитесь:

var counter = 0; while (counter

Код будет повторяться ровно 10 раз, не больше и не меньше. Это в точности так, работает цикл for .

Не нужно бояться использовать JavaScript while . Так как без него множество приложений просто не работали бы должным образом!

Я надеюсь, вам понравилась эта статья.

Источник

Циклы while и for

При написании скриптов зачастую встаёт задача сделать однотипное действие много раз.

Например, вывести товары из списка один за другим. Или просто перебрать все числа от 1 до 10 и для каждого выполнить одинаковый код.

Для многократного повторения одного участка кода предусмотрены циклы.

Небольшое объявление для продвинутых читателей.

В этой статье рассматриваются только базовые циклы: while , do..while и for(..;..;..) .

Если вы пришли к этой статье в поисках других типов циклов, вот указатели:

• См. for…in для перебора свойств объекта.
• См. for…of и Перебираемые объекты для перебора массивов и перебираемых объектов.

В противном случае, продолжайте читать.

Цикл «while»

Цикл while имеет следующий синтаксис:

Код из тела цикла выполняется, пока условие condition истинно.

Например, цикл ниже выводит i , пока i < 3 :

Одно выполнение тела цикла по-научному называется итерация. Цикл в примере выше совершает три итерации.

Если бы строка i++ отсутствовала в примере выше, то цикл бы повторялся (в теории) вечно. На практике, конечно, браузер не позволит такому случиться, он предоставит пользователю возможность остановить «подвисший» скрипт, а JavaScript на стороне сервера придётся «убить» процесс.

Любое выражение или переменная может быть условием цикла, а не только сравнение: условие while вычисляется и преобразуется в логическое значение.

Например, while (i) – более краткий вариант while (i != 0) :

Если тело цикла состоит лишь из одной инструкции, мы можем опустить фигурные скобки :

Цикл «do…while»

Проверку условия можно разместить под телом цикла, используя специальный синтаксис do..while :

Цикл сначала выполнит тело, а затем проверит условие condition , и пока его значение равно true , он будет выполняться снова и снова.

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

Цикл «for»

Более сложный, но при этом самый распространённый цикл — цикл for .

Давайте разберёмся, что означает каждая часть, на примере. Цикл ниже выполняет alert(i) для i от 0 до (но не включая) 3 :

Рассмотрим конструкцию for подробней:

часть
начало	let i = 0	Выполняется один раз при входе в цикл
условие	i < 3	Проверяется перед каждой итерацией цикла. Если оно вычислится в false , цикл остановится.
тело	alert(i)	Выполняется снова и снова, пока условие вычисляется в true .
шаг	i++	Выполняется после тела цикла на каждой итерации перед проверкой условия.

В целом, алгоритм работы цикла выглядит следующим образом:

Выполнить начало → (Если условие == true → Выполнить тело, Выполнить шаг) → (Если условие == true → Выполнить тело, Выполнить шаг) → (Если условие == true → Выполнить тело, Выполнить шаг) → . 

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

Если тема циклов для вас нова, может быть полезным вернуться к примеру выше и воспроизвести его работу на листе бумаги, шаг за шагом.

Вот в точности то, что происходит в нашем случае:

// for (let i = 0; i < 3; i++) alert(i) // Выполнить начало let i = 0; // Если условие == true → Выполнить тело, Выполнить шаг if (i < 3) < alert(i); i++ >// Если условие == true → Выполнить тело, Выполнить шаг if (i < 3) < alert(i); i++ >// Если условие == true → Выполнить тело, Выполнить шаг if (i < 3) < alert(i); i++ >// . конец, потому что теперь i == 3

В примере переменная счётчика i была объявлена прямо в цикле. Это так называемое «встроенное» объявление переменной. Такие переменные существуют только внутри цикла.

for (let i = 0; i < 3; i++) < alert(i); // 0, 1, 2 >alert(i); // ошибка, нет такой переменной

Вместо объявления новой переменной мы можем использовать уже существующую:

let i = 0; for (i = 0; i < 3; i++) < // используем существующую переменную alert(i); // 0, 1, 2 >alert(i); // 3, переменная доступна, т.к. была объявлена снаружи цикла

Пропуск частей «for»

Любая часть for может быть пропущена.

Для примера, мы можем пропустить начало если нам ничего не нужно делать перед стартом цикла.

let i = 0; // мы уже имеем объявленную i с присвоенным значением for (; i < 3; i++) < // нет необходимости в "начале" alert( i ); // 0, 1, 2 >

Это сделает цикл аналогичным while (i < 3) .

А можно и вообще убрать всё, получив бесконечный цикл:

При этом сами точки с запятой ; обязательно должны присутствовать, иначе будет ошибка синтаксиса.

Прерывание цикла: «break»

Обычно цикл завершается при вычислении условия в false .

Но мы можем выйти из цикла в любой момент с помощью специальной директивы break .

Например, следующий код подсчитывает сумму вводимых чисел до тех пор, пока посетитель их вводит, а затем – выдаёт:

let sum = 0; while (true) < let value = +prompt("Введите число", ''); if (!value) break; // (*) sum += value; >alert( 'Сумма: ' + sum );

Директива break в строке (*) полностью прекращает выполнение цикла и передаёт управление на строку за его телом, то есть на alert .

Вообще, сочетание «бесконечный цикл + break » – отличная штука для тех ситуаций, когда условие, по которому нужно прерваться, находится не в начале или конце цикла, а посередине или даже в нескольких местах его тела.

Переход к следующей итерации: continue

Директива continue – «облегчённая версия» break . При её выполнении цикл не прерывается, а переходит к следующей итерации (если условие все ещё равно true ).

Её используют, если понятно, что на текущем повторе цикла делать больше нечего.

Например, цикл ниже использует continue , чтобы выводить только нечётные значения:

Для чётных значений i , директива continue прекращает выполнение тела цикла и передаёт управление на следующую итерацию for (со следующим числом). Таким образом alert вызывается только для нечётных значений.

Цикл, который обрабатывает только нечётные значения, мог бы выглядеть так:

С технической точки зрения он полностью идентичен. Действительно, вместо continue можно просто завернуть действия в блок if .

Однако мы получили дополнительный уровень вложенности фигурных скобок. Если код внутри if более длинный, то это ухудшает читаемость, в отличие от варианта с continue .

Обратите внимание, что эти синтаксические конструкции не являются выражениями и не могут быть использованы с тернарным оператором ? . В частности, использование таких директив, как break/continue , вызовет ошибку.

Например, если мы возьмём этот код:

…и перепишем его, используя вопросительный знак:

(i > 5) ? alert(i) : continue; // continue здесь приведёт к ошибке

…то будет синтаксическая ошибка.

Это ещё один повод не использовать оператор вопросительного знака ? вместо if .

Метки для break/continue

Бывает, нужно выйти одновременно из нескольких уровней цикла сразу.

Например, в коде ниже мы проходимся циклами по i и j , запрашивая с помощью prompt координаты (i, j) с (0,0) до (2,2) :

for (let i = 0; i < 3; i++) < for (let j = 0; j < 3; j++) < let input = prompt(`Значение на координатах ($,$)`, ''); // Что если мы захотим перейти к Готово (ниже) прямо отсюда? > > alert('Готово!');

Нам нужен способ остановить выполнение, если пользователь отменит ввод.

Обычный break после input лишь прервёт внутренний цикл, но этого недостаточно. Достичь желаемого поведения можно с помощью меток.

Метка имеет вид идентификатора с двоеточием перед циклом:

Вызов break в цикле ниже ищет ближайший внешний цикл с такой меткой и переходит в его конец.

outer: for (let i = 0; i < 3; i++) < for (let j = 0; j < 3; j++) < let input = prompt(`Значение на координатах ($,$)`, ''); // если пустая строка или Отмена, то выйти из обоих циклов if (!input) break outer; // (*) // сделать что-нибудь со значениями. > > alert('Готово!');

В примере выше это означает, что вызовом break outer будет разорван внешний цикл до метки с именем outer .

Таким образом управление перейдёт со строки, помеченной (*) , к alert(‘Готово!’) .

Можно размещать метку на отдельной строке:

Директива continue также может быть использована с меткой. В этом случае управление перейдёт на следующую итерацию цикла с меткой.

Метки не дают возможности передавать управление в произвольное место кода.

Например, нет возможности сделать следующее:

break label; // не прыгает к метке ниже label: for (. )

Директива break должна находиться внутри блока кода. Технически, подойдет любой маркированный блок кода, например:

…Хотя в 99.9% случаев break используется внутри циклов, как мы видели в примерах выше.

К слову, continue возможно только внутри цикла.

Итого

Мы рассмотрели 3 вида циклов:

• while – Проверяет условие перед каждой итерацией.
• do..while – Проверяет условие после каждой итерации.
• for (;;) – Проверяет условие перед каждой итерацией, есть возможность задать дополнительные настройки.

Чтобы организовать бесконечный цикл, используют конструкцию while (true) . При этом он, как и любой другой цикл, может быть прерван директивой break .

Если на данной итерации цикла делать больше ничего не надо, но полностью прекращать цикл не следует – используют директиву continue .

Обе этих директивы поддерживают метки, которые ставятся перед циклом. Метки – единственный способ для break/continue выйти за пределы текущего цикла, повлиять на выполнение внешнего.

Заметим, что метки не позволяют прыгнуть в произвольное место кода, в JavaScript нет такой возможности.

Источник