В этой части учебника разберём циклы в JavaScript, также будут примеры.
Зачем нужны циклы в JavaScript:
Для начала разберём, зачем нужны и где используются циклы в JavaScript, это позволяет несколько раз выполнять какую нибудь задачу и тем самым оптимизировать код.
Также они очень полезны для обработки массива, например, когда вам надо найти индекс определённого значения.
Циклы в JS:
Теперь разберём сами циклы, всего их три, while, do while и for.
Цикл while в JS:
Давайте напишем не большой код, для примера.
1 2 3 4 5 6 7 | let i = 0; // Создаём переменную и присваиваем ей ноль // Пишем цикл while while (i < 10) { console.log(i); // Выводим в консоль переменную i i++; // Увеличиваем переменную i на один } |
Код совсем не большой, давайте его разберём, в начале мы создаём переменную i
и присваиваем ей ноль, в условие для цикла у нас i < 10
, что означает цикл будет работать пока i
строга меньше 10.
Внутри цикла, выводим в консоль браузера значение переменной i
, на следующей строчки инкрементируем её, вот результат.
Возможно там плохо видно, но вывелось от нуля, до девяти.
Цикл do while в JS:
Главное различие do while, от while, в том, что проверка условия цикла, идёт после итерации, что значит, он обязательно один раз пройдётся, вот пример.
1 2 3 4 5 6 7 | let i = 0; // Создаём переменную и присваиваем ей ноль // Пишем цикл do while, в начале всегда пишем do do { console.log(i); // Выводим в консоль переменную i i++; // Увеличиваем переменную i на один } while (i < 10); // Условие пишется в конце цикла |
Вот такой код, но нужно сказать, что он используется крайне редка, я его вообще в работе не использую.
Цикл for в JS:
Это пожалуй самый популярный цикл из всех что есть в JavaScript, и на мой взгляд он самый удобный и простой.
1 2 3 4 | // Пишем цикл for for (let i = 0; i < 10; i++) { console.log(i); // Выводим в консоль переменную i } |
Давайте разберём этот код, в начале в скобках мы объявляем переменную i, после точки запятой пишем условие, при котором будет работать цикл, последнее, это инкрементирование, внутри самого цикла просто выводим переменную в консоль.
Как видите этот цикл, по сути не много уличенный цикл while, но используется он куда чаше.
Также вместо инкремента или декремента вы можете использовать другие математические операции, или даже назначать несколько операций и переменных.
JavaScript выход из цикла:
Последнее что мы разберём, это выход из цикла или начала новой итерации, делать это будем благодаря директиве continue и break.
Continue в JS:
Continue по сути возвращает работу цикла в самое начала, и запускает новую итерацию, вот пример.
1 2 3 4 5 6 7 8 9 | // Пишем цикл for for (let i = 0; i < 10; i++) { // Условие при котором будем возвращаться в начало if (i == 2) { // возвращаемся в начало continue; } console.log(i); // Выводим в консоль переменную i } |
Это обычный цикл for, как в предыдущем примере, но тут мы добавили условие при котором будем возвращаться в начала цикла и запускать новую итерацию, вот что вывелось в консоль.
Как видите у нас нет двойки, это всё потому что мы написали, что когда i равна 2, то вернутся в начала цикла и при этом эта проверка идёт до вывода переменной.
Break в JS:
Break похож на continue, но выходит в конец цикла, вот не большой код.
1 2 3 4 5 6 7 8 9 | // Пишем цикл for for (let i = 0; i < 10; i++) { // Условие при котором будем возвращаться в конец if (i == 2) { // возвращаемся в конец break; } console.log(i); // Выводим в консоль переменную i } |
Тут всё точно также, но теперь не continue, а break, вот результат.
Как видите, теперь вывелось только два числа, двойка и всё что после двойки нет, потому что мы вышли из цикла, когда переменная i стала равна двум.
Тут стоит сказать, что на мой взгляд особого смысла нет в break, я думаю что лучше писать правильные условия работы цикла.
Вывод:
В этой части учебника вы прочитали, что такое циклы в JavaScript и были примеры, тут было только самое важное что стоит знать про них.циклы в javascript примеры