Циклы в javascript: Циклы while и for

Циклы | JavaScript Camp

Когда какое-то действие необходимо повторить большое количество раз, в программировании используются циклы. Например, нужно вывести 200 раз на экран текст 📜 «Hello, World!» 🌎 . Вместо двухсоткратного повторения одной и той же команды вывода текста 📜 часто создается цикл, который повторяет 200 раз то, что написано 🖊️ в теле цикла. Каждое повторение называется итерацией.

Итерация в программировании — в широком смысле — организация обработки данных, при которой действия повторяются многократно, не приводя при этом к вызовам 📞 самих себя (в отличие от рекурсии). В узком смысле — один шаг итерационного, циклического процесса.

Цикл в JavaScript (да и во всех прочих языках👅) — это блок кода📟 , который повторяет сам себя, пока известное условие остаётся истинным. Существует множество различных видов циклов, но все они по сути делают тоже самое: повторяют какое-либо действие несколько раз.

Видео​

Цикл while()​

Оператор while создает🏗️ цикл, выполняющий заданную инструкцию, пока истинно проверяемое условие. Логическое значение условия вычисляется ➕ перед исполнением тела цикла.

Синтаксис​

while (условие) {
инструкция // код алгоритма - инструкции
}

условие — выражение, логическое значение которого проверяется каждый раз перед заходом в цикл. Если значение истинно — true✅ , то исполняется инструкция. Когда значение становится ложным — false❎ , мы выходим из цикла.

инструкция — это код📟 алгоритма, который исполняется каждый раз, пока истинно условие. Чтобы выполнить несколько инструкций в цикле, используйте блочный ❌ оператор { ... } для их группировки. При использовании 1 команды в теле цикла фигурные скобки можно не ставить.

Перед вами простейший пример цикла while(условие) {...}

function learnJavaScript() { let count = 0 // count — счётчик let result = ‘Счет: ‘ // изменить счет на любой while (count < 10) { result += count + ‘, ‘ count++ } return result }

 
function learnJavaScript() {
let count = 0 // count - счётчик
let result = 'Счет: '
// изменить счет на любой
while (count < 10) {
result += count + ', '
count++
}
return result
}

Loading. ..

Cчётчик count в примере имеет значение 0. Условием нашего цикла (оно прописано 🖊️ в скобках) задано, что блок с кодом будет повторять себя снова и снова до тех пор, пока (то есть собственно while) count меньше 10.

Поскольку начальное значение 0 меньше 10, код📟 запускается. Каждый раз интерпретатор заново проверяет ✔️ условие, если условие всё ещё истинно true ✅ , то код📟 будет запущен вновь. Каждый раз мы увеличиваем значение счётчика на 1. Так как в противном случае значение бы оставалось на 0

, отчего наше условие счётчик < 10 оставалось бы всегда истинным, а наш код📟 бы зациклился навечно!

В итоге после 10 циклов он станет равным 10. После этого интерпретатор завершит цикл так как условие false ❎ и перейдёт к финальным строчкам нашего кода📟 .

Цикл for ()​

Выражение for создаёт🏗️ цикл, состоящий из трех 3️⃣ необязательных выражений в круглых скобках, разделённых точками с запятой.

Синтаксис​

for ([инициализация]; [условие]; [финальное выражение])
{ выражение }

инициализация — выражение или определение переменных. Это выражение может опционально объявлять🗣️ новые переменные с помощью ключевого🗝️ слова let. Эти переменные видимы только в цикле for, т.е. в той же области области видимости (для безопасности).

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

финальное выражение — выражение, выполняющееся в конце интерации цикла. Происходит до следующего выполнения условия. Обычно используется для увеличения++, уменьшения-- или обновления i += 5 переменной 🔔 счётчика.

выражение — выполняемый код📟 алгоритма, пока условие цикла истинно. Чтоб выполнить множество выражений в цикле, используйте блок { ... } для группировки этих выражений. Чтобы не выполнять никакого выражения в цикле, используйте пустое выражение for (;;;).

Посчитаем сумму чисел от 0 до 100 👇 :

function learnJavaScript() { let sum = 0 for (let i = 0; i <= 100; i++) { sum += i } return sum }

function learnJavaScript() {
let sum = 0
for (let i = 0; i <= 100; i++) {
 
sum += i
}
return sum
}

Loading…

Помните, когда мы писали наш 1️⃣ первый while( ), что происходило с нашим счётчиком? Мы выяснили, что очень важно, чтобы он постоянно изменялся (в этом нам помог инкремент ++). Потому как, если забыть про это, то код📟 попадёт в бесконечную петлю циклов.

Что ж, подобные ситуации случаются довольно регулярно с while‑циклами, именно поэтому for сделали со встроенным счётчиком!

Пример цикла for​

Впервые видя перед собой синтаксис📖 цикла for, можно подумать 🤔 , что это что‑то весьма странное. Но изучить 🧑‍🎓 его всё равно следует, поскольку вы встретите подобное много раз:

function learnJavaScript() { let result = ‘Счет: ‘ for (let i = 0; i < 10; i++) { result += i + ‘ ‘ } return result }

function learnJavaScript() {
let result = 'Счет: '
for (let i = 0; i < 10; i++) {
result += i + ' '
}
return result
}

Loading…

Ну как, узнали? А должны были! Ведь это практически тот же код📟 , что мы использовали для while цикла в начале главы! Три части цикла отделены друг от друга точкой с запятой; все они были и в том цикле while, но в других местах. Давайте разберём подробнее:

1. Первым делом мы объявляем счетчик-переменную 🔔 let i = 0. Именно в самой функции и вне данного цикла данная i будет отсутствовать, а это безопасно!
2. Далее мы задаём условие, которое интерпретатор будет проверять перед каждой итерацией цикла (чтобы определить, а стоит ли вообще запускать код по новой).
   Итерацией называют один виток цикла (например, если у нас было 10 циклов запуска, то можно сказать, что имели место 10 итераций кода).
3. Третьей частью нашего кода является инкремент ++ (или же декремент --). Он запускается в конце каждой итерации, чтобы всякий раз менять нашу переменную 🔔 .

Заключение​

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

React Native​

Пример использования в React Native приложениях.

Проблемы?​

Пишите в Discord или телеграмм чат, а также подписывайтесь на наши новости

Вопросы:​

Как называется блок кода, повторяющий себя снова и снова, пока заданное условие не перестанет быть истинным?

1. Цикл
2. Условие
3. Инициализация

Какой из двух операторов цикла является более популярным?

1. for
2. while
3. break

Сколько сообщений выдаст в консоль следующий код?

let k = 0
while (k < 7) {
console. log('ещё строчка!')
}

1. 7
2. 8
3. бесконечно

При помощи какого символа отделяются друг от друга находящиеся в скобках части цикла for?

1. &&
2. ;
3. .

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

1. условие/цикле
2. цикл/условии

Как называется среднее _____ из трёх заключённых в скобки частей цикла for?

1. Выражение
2. Условие
3. Приращение

Назовите термин, которым обозначается разовое (шаговое) прохождение цикла?

1. Итерация
2. Прерывание
3. Зацикливание

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

Ссылки:​

1. MDN web doc. Статья «Цикл do…while»
2. MDN web doc. Статья «Цикл for»
3. MDN web doc. Статья «Цикл while»
4. Статья «Iteration», сайт Javascript Express
5. Статья «Циклы while и for»
6. Код для подростков: прекрасное руководство по программированию для начинающих, том 1: Javascript — Jeremy Moritz

Contributors ✨​

Thanks goes to these wonderful people (emoji key):

Dmitriy K. 📖

Dmitriy Vasilev 💵

Resoner2005 🐛 🎨 🖋

Navernoss 🖋 🐛 🎨

Циклы в Javascript

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

Первым циклом мы разберем while. Базовый пример while выглядит вот так

while (condition) {
  document. write('A statement has run')
}

И как вы можете видеть он очень похож на if, который мы писали до этого. Но его логика немножно сложнее. Когда while выполняется, он

1. Проверяет условие в круглых скобках.
2. Если оно возвращает true, то он выполняет код, написанный в фигурных скобках и начинает проверять условие опять
3. И он проверяет условие и выполняет фигурные скобки до тех пор, пока условие в круглых скобках не станет false

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

Давайте добавим переменную i, которая равняется 1 и условие в наш цикл while

var i = 1
while (i < 5) {
  document.write('A statement has run')
}

То есть пока i меньше 5 мы продолжаем выполнять цикл.

Если мы запустим этот код прямо сейчас, то мы как-раз и попадем в бесконечный цикл, потому что i всегда будет меньше чем 5.

Чтобы этого не произошло, мы будем увеличивать значение i на один при каждом проходе цикла.

var i = 1;
while (i < 5) {
  document.write('A statement has run')
  i++
}

Итак давайте еще раз пройдемся как работает этот код.

1. Мы создали переменную i с значением 1
2. Мы заходим в цикл while и 1 меньше 5, поэтому блок while выполняется
3. В конце блока мы увеличиваем i на 1
4. Дальше while опять проверяет условие и 2 меньше 5 и поэтому блок опять выполняется
5. Так продолжается каждый раз, пока i не станет 5. Тогда цикл while останавливается.

Давайте посмотрим в браузер. Как мы видим, наш document.write отработал 4 раза и вывел нам сообщения.

Теперь давайте посмотрим на цикл for. Базовая запись выглядит вот так.

for () {
  document.write('A statement has run')
}

Как вы видели в while мы делали 3 важные вещи:

1. Создавали переменную с дефолтным значением
2. Задавали условие в цикле
3. Увеличивали счетчик в конце блока кода

В цикле for эти три вещи указываются в круглых скобках в том же порядке и разделяются точкой с запятой

for (var i = 1; i < 5; i++) {
  document. write('A statement has run')
}

Если мы посмотрим в браузер, то увидим, что наш код отработал точно также, как и while.

И вы можете спросить, а зачем мне использовать цикл for?

И вот ответ: читать все три условия в одном месте при обьявлении цикла, намного проще, чем когда они разбросаны по всему коду. Именно поэтому цикл for используется намного чаще.

Если у вас возникли какие-то вопросы или комментарии, пишите их прямо под этим видео.

Как использовать циклы в JavaScript

Для чего вообще нужны циклы?

С помощью циклов мы можем повторять части кода. В большинстве случаев это означает, что мы повторяем какие-то инструкции для разных случаев.

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

Циклы также отлично подходят для подсчета, допустим, вам нужно показать годы с 1970 по 2019 год, вы можете использовать цикл for для добавления этих элементов.

 

Какие циклы в JavaScript у нас есть?

Список циклов в JavaScript растет из года в год, большинство дополнений сделано для более удобного использования с массивами и другими типами данных. Вы также должны взглянуть на нашу статью «Что такое JavaScript», чтобы охватить все основы.

Тип циклов в JavaScript:

• для
• и
• делать/пока
• в/в
• forEach «петля» для массивов
• для/из

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

цикл for в JavaScript

цикл for — один из основных циклов во всех языках. Это позволяет нам работать с числовым массивом, считать числа,…

Цикл For состоит из 3 частей: инициализация, условие и финальное выражение.

В части инициализации мы устанавливаем начальное значение для нашей переменной цикла; Это переменная, которая должна меняться с каждой итерацией. Много раз i используется как имя переменной; но мы рекомендуем вам использовать более значимые значения, такие как index, count,… Фактически, имя, которое делает ваш код более читабельным.

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

Final-expression — это инструкция, которая будет выполняться в конце цикла после каждой итерации цикла. Окончательное выражение в большинстве случаев является своего рода увеличением/уменьшением переменной цикла. В 99% случаев этот код равен i++ , что означает, что мы увеличиваем i на 1.

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

С помощью цикла for мы можем:

Считать от 1 до 100

• От 100 до 1
• Получить все четные числа от 1 до 100 (см. пример ниже)
• Получить первые 10 записей из массива
• …

цикл while в JavaScript

цикл while будет выполнять заданный код до тех пор, пока выполняется условие.

Есть только «одна» часть, состояние. Много раз значение условия изменяется в самом цикле.

Цикл While можно использовать для:

• Ожидание выполнения условия
• Увеличиваем значения, пока не достигнем некоторого неопределенного значения
• Поиск конца дерева (данных)
• …

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

do .

.. while loop

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

Итак, для чего полезен этот первый запуск? Если мы запустим цикл хотя бы один раз, мы можем использовать цикл для инициализации условия, которое мы должны инициализировать перед циклом. Иногда это делает код чище и легче в управлении.

Начните наш курс под руководством наставника, где наш наставник ведет вас на каждом этапе пути. Получите БЕСПЛАТНУЮ пробную версию сегодня.

Бесплатная пробная версия

do…while против цикла while

Мы все любим конфеты, позвольте мне объяснить это на примере конфет. 🙂

У нас есть условие, что каждую пятницу мы дарим конфетку всем сотрудникам, каждый час. В другие дни мы не раздаем конфеты, все мы знаем, что пятницы особенные. Это делает цикл do…while идеальным для сладкоежек.

handOutCandies будет выполняться только в пятницу и повторяться каждый час, мы получаем 1 конфету за рабочую неделю.

do…while позволит handOutCandies выполняться каждый раз, когда мы запускаем проверку, это означает, что мы получаем как минимум одну конфету в день или 5 конфет в неделю.

Я знаю, что сейчас вы хотите больше конфет, но это не значит, что вы всегда будете использовать цикл do…while, используйте его с осторожностью 😉 

цикл for…in в JavaScript

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

for...in очень полезно, если у нас есть объект, о котором мы ничего не знаем, и это позволяет нам перемещаться по свойствам и принимать решения. Это часто происходит с вызовами сервера. Кроме того, это упрощает использование прототипов, поскольку мы можем создать цикл, не зная всех свойств.

for…in можно ошибочно принять за цикл for each, который перебирает все объекты в массиве. Мы все еще можем использовать для... в , но это вернет нам индексы данного массива, а не объекты. Лучшим циклом будет метод forEach массива или цикл for...of .

Метод forEach массива

Метод forEach представляет собой «цикл», который перебирает все объекты в массиве с использованием метода. Чтобы использовать forEach, нам нужно предоставить функцию, которая потребляет объект.

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

Вплоть до новейшей версии JavaScript это предпочтительный способ, но в новейшей версии появился цикл for...of . В forEach нет ничего плохого, но иногда for…of делает использование более понятным.

for…of цикл

for...of цикл перебирает объекты. For..of немного мощнее, поскольку он может перебирать String , Array , массивоподобные объекты (например, аргументы или NodeList), TypedArray, Map , Set и пользовательские итерации (a способ сделать пользовательскую реализацию цикла for..of).

Это код, похожий на тот, который мы показали с помощью метода forEach, каждая итерация дает нам возможность работать с объектом.

спорт_киберспорт

Спасибо за подписку!

😎

Узнайте, есть ли в вас разработчик, ответив на несколько вопросов.

Неверный формат электронной почты!

С помощью этого приложения вы позволяете нам отправлять вам электронные письма.

Пример использования циклов в JavaScript

Приятно иметь более яркий пример использования циклов в JavaScript. Мы решили написать простую веб-страницу, которая продемонстрирует вам все возможные циклы. Если вы хотите создать более сложный пример, ознакомьтесь с нашей записью в блоге «Как создать фильтр списка JavaScript и контактную форму в JavaScript».

Наш пример состоит из 2 частей; веб-страница (HTML), где будут все визуальные компоненты, и файл JS, который будет содержать все функции, показывающие использование циклов.

Начнем с веб-страницы, это простой HTML-документ. Затем мы добавляем весь код в файл JavaScript, код будет создавать весь контент для веб-страницы с использованием циклов.

 

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

Нам нужно начать с простого HTML-шаблона (у нас есть один в нашем блоге Что такое HTML, посмотрите его).

HTML

Спасибо за прочтение!

Если вам нравится наш код, вы можете отблагодарите, поделившись этой статьей!

1. Добавить ссылку на файл CSS

Нам нужно подключить файл JavaScript, в котором мы определяем все наши функции и HTML.

Если ваш файл имеет другое имя или находится в подпапке, вам следует изменить значение атрибута src .

2. Добавляем элементы для простого подсчета

С этого момента мы добавляем все видимые элементы внутри тега HTML-документа.

HTML

Спасибо за прочтение!

Если вам понравился наш код, вы можете отблагодарить его, поделившись этой статьей!

Мы добавляем метку «Count:», которая представляет собой только текст внутри HTML, затем мы добавляем тег