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 — Дока

Кратко

Секция статьи «Кратко»

Цикл — это повторяющаяся последовательность действий.

Цикл состоит из условия и тела цикла.

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

Каждое выполнение тела цикла называется итерацией.

JavaScript предоставляет несколько способов создания цикла. Самые распространённые из них — while и for (инициализация; условие; завершающая операция) {}

Как понять

Секция статьи «Как понять»

Зачем нужны циклы, читайте в статье Порядок выполнения

В программировании есть много задач, когда нужно выполнять заранее неизвестное количество однотипных шагов:

• напечатать все сообщения из списка;
• обозначить на карте присланные пользователем координаты;
• уточнять значения при вычислении функций (например, считать квадратный корень).

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

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

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

Опишем работу цикла словами:

1. проверь, выполняется ли условие.
2. если условие выполняется, выполни тело цикла. Затем вернись в пункт 1.
3. если условие не выполняется, цикл завершён.

Цикл удобно представлять схемой:

Условие

Секция статьи «Условие»

Нужно хорошо понимать, как работает условие, чтобы уверенно работать с циклами. Условие — это выражение, которое JavaScript вычислит в значение.

В простом случае, условие вычисляется в логический тип: true, либо false. Такие выражения получаются при использовании операторов сравнения ==, ===, >, <, >=, <=, !==, !=.

Например:

let count = 10while (count > 0) {  console.log(count)  count--}
          let count = 10
while (count > 0) {
  console.log(count)
  count--
}

Код напечатает числа от 10 до 1 на экран.

Выражения в условии можно комбинировать с помощью логических операторов.

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

let count = 10while (count) {  console.log(count)  count--}
          let count = 10
while (count) {
  console.log(count)
  count--
}

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

Все, что не приводится к false, будет true

Осталось запомнить 8 значений, которые приводятся к false:

• false
• 0
• -0
• ''
• null
• undefined
• NaN
• 0n(тип BigInt)

Зная это правило, мы поймём, что цикл перестанет работать после 10 итераций и напечатает числа от 10 до 1.

Тело цикла

Секция статьи «Тело цикла»

Тело цикла — это набор инструкций, заключённый в фигурные скобки. Одно выполнение тела называют итерацией цикла.

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

Бесконечные циклы

Секция статьи «Бесконечные циклы»

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

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

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

Открыть демо в новой вкладке

К бесконечному циклу могут привести две ошибки:

• неверное условие;
• условие написано верно, но в теле цикла никак не изменяются переменные, которые используются в условии.

На практике

Секция статьи «На практике»

Николай Лопин советует

Секция статьи «Николай Лопин советует»

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

🛠 Внутри цикла можно использовать оператор break, он прерывает цикл:

let count = 5while (count > 0) {  if (count === 2) {    break // цикл прервётся здесь, оператор break убивает цикл  }  console.log(count)  count--}// 5, 4, 3
           let count = 5
while (count > 0) {
  if (count === 2) {
    break // цикл прервётся здесь, оператор break убивает цикл
  }
  console.log(count)
  count--
}
// 5, 4, 3

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

let count = 5while (count > 2) {  console. log(count)  count--}// напечатает 5, 4, 3
          let count = 5
while (count > 2) {
  console.log(count)
  count--
}
// напечатает 5, 4, 3

🛠 Внутри цикла можно использовать оператор continue, он прерывает текущую итерацию и возвращается к проверке условия:

let count = 5while (count > 0) {  count--  if (count === 2) {    continue // когда count будет равен 2, итерация прервется здесь и не дойдет до печати  }  console.log(count)}// напечатает 4, 3, 1, 0
          
 let count = 5
while (count > 0) {
  count--
  if (count === 2) {
    continue // когда count будет равен 2, итерация прервется здесь и не дойдет до печати
  }
  console.log(count)
}
// напечатает 4, 3, 1, 0

Оператор стараются не использовать, потому что он усложняет чтение кода — появляется ещё одно место, где итерация может завершиться. Почти всегда цикл с continue можно переписать на цикл без него, добавив ветвление if:

let count = 5while (count > 0) {  count--  if (count !== 2) {    console. log(count)  }}// напечатает 4, 3, 1, 0
          let count = 5
while (count > 0) {
  count--
  if (count !== 2) {
    console.log(count)
  }
}
// напечатает 4, 3, 1, 0

JavaScript циклы: for, while, do-while

28.11.201628.11.2016 Computer Интересное

История образования современного синтаксиса языка программирования в чем-то походит на историю образования Вселенной. Ведь нужно разобраться, что и как было вначале… Теперь все довольно просто и доступно. В конечном итоге алгоритм всегда представляет собой последовательную цепочку команд. Параллельность в программировании обеспечивается совокупностью каких-то скомбинированных последовательностей. Циклический алгоритм никогда не был практичнее, чем последовательная или параллельная цепочка команд. Переходы, метки, условия – этого всего было достаточно для любого решения. С приходом функциональных языков эта идея была лишена значимости, однако необходимость повторения участков кода осталась.

Браузер: DOM, его язык и сервер

Циклы на JavaScript остались, хотя функциональные идеи обрели особый смысл. Возможно, осталось что-то от «Пролога» или «Лиспа», однако, скорее всего, область, в которой обитает JavaScript привела к тому, что есть. Есть сомнения относительно того, что это последнее решение. Работает JavaScript внутри браузера, который получает страницу, разбирает ее в DOM и запускает первый скрипт. Все остальные страницы – это дело рук разработчика, который манипулирует языком, посредством которого может вызываться код на сервер. Результат может быть получен при помощи механизма AJAX. Браузер исполняет код JavaScript, который может использоваться объектами браузера, в том числе и тем, который обеспечивает передачу информации на сервер и получение ответа, в качестве которого может выступать HTML-разметка, стили и код. Ответ может быть представлен в виде объектов и массивов. Теряется смысл использовать циклы на JavaScript, поскольку существует много возможностей обойтись без них, а рисковать повесить браузер бесконечной последовательностью команд никто не хочет. Сами циклы присутствуют в большей части конструкций на языке JavaScript. Разработчик вполне может дополнить собственными функциями стандартные конструкции.

JavaScript в пространстве кода

Современные программисты сегодня даже не задумываются о том, что используемые ими циклы (while, for, dowhile) в конечном итоге представляют собой серию циклов процессора, простую последовательность двоичных операций, прерываемую проверками счетчиков, или говоря иначе, условиями. Цикла как такового на уровне машинного языка нет. Имеется комбинация обычных команд, условных переходов и условных операций. Какое бы средство ни было использовано для разработки браузера или интерпретатора JavaScript, уровнем выше будут циклы. Различные куски кода могут быть представлены различными временами и разными поколениями программистов. Еще одним этажом выше находится «здание» JavaScript. Его синтаксис предлагает современные циклы JavaScript. Нужно отметить, что JavaScript представляет собой прекрасный язык: он полнофункциональный, современный и практичный. Его синтаксис включает в себя все конструкции, которые уже успели пройти проверку временем и стали основой любой алгоритма. На самом ли деле они необходимы? Прогресс в программировании довольно часто задавал вопросы фундаментального характера, и только в ряде случаев находил решение.

Встречается два варианта циклов: по счетчику и по условию. По сути любой цикл на самом низком уровне является циклом по условию. В некоторых языках программирования встречается цикл «по каждому». Циклы foreach на JavaScript представлены конструкцией propinobject.Однако можно использовать и вариант array.forEach (…). В любом случае существует два варианта. Машинный код, который в конечном итоге выполняет все алгоритмы программиста, не имеет никаких иных вариантов повтора последовательности команд. Он может что-то выполнить еще раз, пока счетчик считает, что условие выполняется. С этой точки зрения JavaScript представляет собой типичный интерпретатор. Его особенность состоит в том, что он функционирует внутри браузера, использует его объекты и дает возможность исполнять алгоритмы на стороне клиента при загрузке страницы в браузер и в процессе ее работы.

Простой цикл

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

Цикл по счетчику

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

Условные циклы

В JavaScript можно использовать такой вариант, как while в зависимости от того, когда нужно применять условие. Если тело цикла может быть ни разу не исполнено, это одно, а если тело должно быть исполнено хотя бы раз, то это уже совершенно другое. В первом случае, при интерпретации конструкции whileJavaScript будет проверять условие, и если оно истинно, выполнять цикл. Во втором случае будет сперва исполнен цикл. Если в результате изменения переменных, которые указаны в конструкции dowhile, оно примет ложное значение, процесс выполнения скрипта будет прерван.

Комбинации простых алгоритмов

Основной задачей любой алгоритма является найти и принять решение относительно того, как быть дальше. Самым примитивным вариантом поиска является обращение к переменной. Результат получается непосредственно. Если переменных много, или у нее целый массив значений, то для выборки значения требуется найти то, которое определяет дальнейшее поведение скрипта. Эта простая доктрина сделала в языке JavaScript цикл со счетчиком своеобразной панацеей от всех проблем. Одной из характеристик современных персональных компьютеров является быстрота. В браузере достаточно времени для выполнения скриптов, так что спешить некуда. Перебрать что-то ради чего-то довольно просто. Таким образом, циклы for обрели большую популярность на JavaScript. В этом нет ничего плохого. Однако за подобным подходом легко теряется вся сущность, ради которой был написан тот или иной алгоритм. Данные не могут быть беспредметными. Любая программа всегда пишется ради чего-то. При чрезмерном употреблении на JavaScript циклов for, разработчик рискует не разглядеть нужную сущность и не создать адекватный алгоритм.

Функциональность кода как отображение реальности

При использовании циклов JavaScript можно представить примеры однотипного кода функциями. В результате алгоритм сразу преображается. Основное тело скрипта уменьшается в размере и становится более понятным и читаемым. Это, конечно, трудно назвать кардинально новым решением, однако по сути своей это не выход за рамки других конструкций языка. Так, например, в частности, циклы JavaScript можно обнаружить в классической функции split (): varcResult = ‘9, 8, 7, 6, 5, 4’; varaResult = cResultsplit (‘,’). Никакого цикла здесь нет, но как же иначе выполняется данная функция, если не путем поиска символа ‘.’ и его использования для отделения одного числа от другого. Если абстрагироваться от того, каким образом это реализуется внутри функции split (), то можно дополнить своим функционалом, более удобным с точки зрения использования. Такой подход приводит к разработке соответствующего набора функций для каждой задачи, однако общее при таком подходе все же будет. Это функции padc(), allt(), pad() иpadr(), которых нет в JavaScript. Иногда необходимо убрать из строки пробелы или выровнять длину строки справа, слева или с обеих сторон. В теле таких функций присутствуют циклы JavaScript. Все просто и доступно, и алгоритм, использующий их, никогда не повиснет. Можно заметить, что функции преобразования из 16-ричной системы в 10-ричную и обратно выполнены здесь посредством использования циклов dowhile. Это довольно компактный и эффективный синтаксис языка.

Правильные циклы

Язык JavaScript не чета другим языкам программирования. Он не отличается большим количеством версий. Все стремления здесь направлены на развитие и расширение синтаксиса. Мышление программиста, который использует JavaScript, отличается от мышления программиста, использующего PHP, когда язык не ограничен переменными, массивами, оператора присваивания и циклами. Если представить, что циклов вообще нет, а задачу как-то надо решать, то самым простым вариантом будет предположить, что программа  обрабатывает данные, которые представляют собой точку или систему точек в пространстве информации. Что собой представляет эта точка или система точек зависит от конкретной предметной области. Для программиста этот тезис обозначает следующее: есть простые данные, и есть совокупность простых данных. Простое данное одного уровня для уровня ниже будет системой, а для уровня выше – точкой. Забота точки при таком подходе заключается в проявлении своей сущности через свои методы. Когда речь идет о точке в надсистеме, функция системы заключается в проявлении своей сущности как совокупности сущностей входящих в нее точек. Такой подход является далеко не новым, однако он до сих пор не нашел адекватного отражения  в сфере программирования. Ход мыслей у многих программистов правильный, однако, результат от их творчества при этом не радует. Иногда, чтобы увидеть мир, полезно одеть повязку на глаза.

JavaScript для циклов: базовое введение

• Блог Hubspot
• HubSpot.com

Загрузка

О нет! Мы не смогли найти ничего подобного.



Попробуйте еще раз поискать, и мы постараемся.

Афина Озанич

Обновлено: 10 мая 2022 г.

Опубликовано: 14 января 2022 г.

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

JavaScript — это мощный язык программирования, предлагающий несколько методов для перебора перечислимых объектов. Хотя есть варианты, которые выполняют большую часть тяжелой работы, такие как фреймворки и плагины Javascript, вам все равно придется использовать циклы for. Эти методы называются циклами, и есть три типа, которые чаще всего используются для выполнения этих задач:

• Стандартный для шлейфа
• в/в петля
• И за-из шлейф

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

Что такое цикл

для ?

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

JavaScript

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

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

Далее давайте рассмотрим пример цикла на в действии.

 
 for (перечислитель; условие; оператор) { 
 /*Делайте здесь классные штуки*/ 
 }; 
 

Этот синтаксис довольно прост, но давайте разберем его для ясности.

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

С этой информацией давайте еще раз взглянем на блок кода, на этот раз в качестве практического примера.

 
 for (пусть i = 0; i < 10; i++) { 
 /*Делайте здесь классные вещи*/ 
 }; 
 

JavaScript

break in for Циклы

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

Пример того, как это можно использовать, можно увидеть ниже.

 
 for (пусть i = 0; i < 10; i++) { 
 /*Выполняется, только если значение i точно равно целому числу 3*/ 
 if (i === 3) { break; } 
 /*Делайте здесь интересные вещи на каждой итерации*/ 
 }; 
 

JavaScript

for Loop Массив

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

Есть два типа циклов for , которые могут сделать это легко — цикл for-of и цикл for-in . Далее мы рассмотрим пример каждого из них и обсудим, как они работают, начиная с цикла for-in .

JavaScript

for-in Цикл

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

Давайте посмотрим на пример этого в действии.

 
 for (ключ в объекте) { 
 /*Делайте здесь крутые штуки*/ 
 }; 
 

• Цикл for-in перебирает объект
• Каждая итерация возвращает ключ
• Ключ используется для доступа к его значению

В этом цикле порядок, в котором возвращаются индексы, может не всегда быть одинаковым. Если порядок индексов важен, вам лучше использовать 9Вместо цикла 0026 for-of .

JavaScript

for-of Цикл

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

 
 for (переменная iterable) { 
 /*Делайте здесь крутые штуки*/ 
 }; 
 

• переменная : для каждой итерации переменной присваивается значение следующего свойства. Переменная может быть объявлена ​​с помощью const, let или var.
• iterable : Объект, который имеет повторяемые свойства.

Синтаксис здесь не сильно отличается от стандартного цикла for .

На каждой итерации значение следующего свойства присваивается текущему состоянию value.object.

Заключительные выводы по JavaScript

for Циклы

Javascript for Циклы чрезвычайно эффективны, и их использование зависит от того, зачем они вам нужны. Имея это в виду, давайте рассмотрим некоторые важные моменты, которые следует учитывать при принятии решения о том, что использовать.

• Стандартный цикл для лучше всего подходит для выполнения простых задач заданное количество раз в зависимости от проходного условия или их набора.
• Цикл for-in отлично подходит для обработки набора задач, повторяющихся для объекта и его свойств, и может не возвращать индексы в ожидаемом порядке.
• Цикл for-of используется для перебора таких структур данных, как массивы, строки, карты, списки узлов и т. д.

Циклы For очень эффективны и могут использоваться для создания и изменения наборов данных различных типов, осваивайте их, и это окупится.

Темы: Javascript

Не забудьте поделиться этим постом!

Связанные статьи

• Как создать веб-сайт с помощью Node JS (+9 потрясающих примеров веб-сайтов)

  19 июля 2022 г.

• Что такое Vue.

  js? (Использует + 5 примеров веб-сайтов)

  18 июля 2022 г.

• Узнайте об объекте даты JavaScript и о том, как его использовать

  13 июля 2022 г.

• Узнайте о заявлении о переключении JavaScript и о том, как использовать его в своем программном обеспечении

  30 июня 2022 г.

• Руководство для начинающих по методам массивов JavaScript и их использованию

  29 июня 2022 г.

• Как использовать карту в JavaScript

  28 июня 2022 г.

• hubspot.com/website/javascript-string-methods»>

  Узнайте о строковых методах JavaScript и о том, как их использовать

  28 июня 2022 г.

• Что такое React.js? (Использование, примеры и многое другое)

  27 июня 2022 г.

• Что такое AngularJS? (в 100 словах или меньше)

  27 июня 2022 г.

• 60 самых задаваемых вопросов и ответов на собеседовании по JavaScript 2022

  21 июня 2022 г.

Почему разработчики JavaScript ненавидят циклы FOR? | Фернандо Доглио

Я имею в виду, кто не знает, верно?

Фото Дмитрия Вечорко на Unsplash

Циклы FOR в стиле C устарели, многословны для написания и требуют, чтобы вы также определяли дополнительную переменную и отслеживали ее на протяжении всего процесса.

С таким количеством доступных альтернатив, почему язык вообще должен их поддерживать? Почему нет предложения убрать цикл FOR?

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

Пойдем?

Поскольку JavaScript так сильно нас любит и хочет, чтобы мы были счастливы и были наполнены вариантами, у нас есть два (или три, в зависимости от того, как вы на них смотрите) разных способа повторения одной и той же части логики несколько раз (кроме тот, кого ты ненавидишь, конечно).

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

Тем не менее, когда мы думаем о способах написания цикла FOR, который не включает версию, которую мы все так любим ненавидеть, мы приходим к следующим ответам.

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

Да, это, вероятно, самая популярная версия, потому что разработчики JS все мы любим функциональное программирование. Верно?

Нам нравится думать о себе как о повелителях кода и с отвращением смотреть свысока на другие циклы, когда мы используем метод .forEach .

В случае, если вы не слишком знакомы с ним (в таком случае: как вы смеете!), этот метод позволяет вам вызывать функцию для каждого элемента внутри массива. Упомянутая функция будет получать каждый элемент в качестве своего первого аргумента, и ваша логика может использовать его для всего, что вам нужно.

Что-то вроде этого:

Это отличный способ работы с элементами внутри массива. Однако у этого метода — и, если честно, у всех методов массива — есть одна серьезная «проблема», если ваша логика асинхронна: он не может с этим справиться.

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

Результат этого выполнения следующий: code, на самом деле является первым, который будет записан в консоль. Мы не получаем желаемого поведения, и это просто потому, что forEach метод не будет ожидать завершения своей внутренней функции на каждой итерации. И поскольку это закрытый метод, мы не можем изменить его работу, не переписав его полностью.

Да, есть альтернативы, работающие со списками промисов, но здесь мы говорим о циклах FOR, так что давайте двигаться дальше.

Еще одна крошечная деталь этого метода заключается в том, что это метод массива, а это означает, что мы не можем использовать его, например, для перебора свойств объекта. Нет, если мы сначала не получим список свойств, например, с Object.getOwnPropertyNames или подобное, но это было бы мошенничеством. Итак, давайте посмотрим, что мы можем сделать и с этим.

Циклы for..on и for..in

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

Давайте посмотрим на них обоих:

Можете ли вы найти между ними разницу? На самом деле это просто, for. .in перебирает индексы массива, и это то, что он присвоит нашей локальной переменной i . С другой стороны, вариант for..of имеет дело с фактическими значениями внутри массива.

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

«Но Фернандо, — слышу я, — они асинхронно-совместимы?». Хороший вопрос, дорогой ненавистник цикла, хороший вопрос. Давайте посмотрим:

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

ДА! Теперь мы получаем ожидаемое поведение. И это не должно вызывать удивления, ведь здесь мы имеем дело с очень простой конструкцией, которая позволяет нам точно определить, что происходит между итерациями. Таким образом, ключ await работает так, как и следовало ожидать (никакой скрытой «магии», работающей вокруг него, как раньше).

Давайте также быстро проверим, что произойдет, если мы попытаемся использовать эти циклы с объектами вместо массивов:

Боже, они тоже работают с объектами!! Это означает, что они уже более мощные и универсальные, чем метод .forEach . Это прекрасно. Мы получили все, о чем просили, так зачем нам продолжать дальше?

Ну, есть две основные «проблемы», которые я еще не выделил в этих двух решениях:

1. Мы всегда перебираем весь массив/объект. Например, мы не можем перебрать последние 10 элементов. Нет, если только мы не сделаем копию исходного массива с меньшим количеством значений.
2. Мы всегда имели дело с массивами (или объектами в последнем примере). Но что, если у нас есть часть логики, которую нужно выполнить несколько раз, но она не зависит от списка элементов? Должны ли мы по-прежнему создавать фальшивый список только для того, чтобы использовать цикл? Это не кажется правильным, не так ли?

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

Давайте посмотрим на это.

Если вам понравилось то, что вы прочитали, рассмотрите возможность подписаться на мою БЕСПЛАТНУЮ рассылку « Бред старого разработчика » и получайте регулярные советы об ИТ-индустрии прямо в свой почтовый ящик.

Синтаксис этого плохого мальчика следующий:

Как видите, цикл FOR настолько силен, что это просто цикл, который будет выполняться до тех пор, пока не будет выполнено условие. Это все.

• <ПЕРЕМЕННАЯ ИНИЦИАЛИЗАЦИЯ> 9Раздел 0325 обычно используется для инициализации внутреннего счетчика. Но вы также можете либо оставить его пустым, либо одновременно инициализировать несколько переменных. Ограничений нет. Смысл этого раздела в том, что он выполняется в начале цикла и никогда больше.
• — это логическое выражение, которое сообщает циклу, когда следует остановиться. Это условие будет проверяться в начале каждой итерации. Если вы оставите его пустым, цикл будет работать вечно. И, как и любое логическое выражение в JS, вы можете сделать его настолько сложным или простым, насколько захотите.
• <КОД ДЛЯ ВЫПОЛНЕНИЯ КАЖДОЙ ИТЕРАЦИИ> обычно зарезервирован для изменения значения переменной-счетчика, которая проверяется в разделе <КОНЕЦ УСЛОВИЯ> . Однако это всего лишь код, который вызывается самим циклом без какого-либо контроля над ним. Вы можете разместить здесь все, что угодно.

Обычная форма, которую принимает этот цикл, следующая:

И да, это правильное использование, но зачем себя ограничивать?

Посмотрите на эти 3 очень правильных и красивых цикла FOR. Первые два довольно просты. Следуя приведенному выше определению, вы можете в значительной степени понять их поведение.

А что насчет последнего? Что, по вашему мнению, является результатом этого цикла?

Начнется с i с 0, но x с 19, и на каждой итерации будет увеличиваться i , но также будет уменьшаться x до тех пор, пока ни одно из i не станет меньше 10 x NOR больше, чем 5.

Уже догадались? Вот я тебе руку подам:

Да, это не то, что все ожидают. Но посмотрите на это так. К моменту i достигает 10, x все еще больше 5, поэтому цикл продолжается. Как только x достигает 4, цикл завершается, потому что к тому времени i уже равно 14. И поскольку проверки выполняются в начале каждого цикла, мы не можем увидеть, что эти последние два числа напечатаны.

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

Однако только потому, что вы МОЖЕТЕ злоупотреблять этим замечательным инструментом, если захотите, вас ничто не принуждает.

Когда вы будете использовать эту версию цикла?

«Каждому свое»

Вы когда-нибудь слышали эту фразу? Это само определение того, что вам нужно сделать, пытаясь выбрать правильную версию цикла FOR.

Если вы имеете дело со списком элементов внутри массива, скорее всего, вы используете метод forEach (или любой из его функциональных вариантов).

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

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

Просто помните слова дяди Бена:

С большой гибкостью приходит ответственность не писать малопонятный код, который нигде не комментируется.

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

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

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

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

Не создавайте веб-монолиты. Используйте Bit для создания и компоновки несвязанных программных компонентов — в ваших любимых средах, таких как React или Node. Создавайте масштабируемые и модульные приложения с мощными и приятными возможностями разработки.

Пригласите свою команду в Bit Cloud , чтобы совместно размещать компоненты и совместно работать над ними, а также ускорять, масштабировать и стандартизировать разработку в команде. Попробуйте составных внешних интерфейсов с Design System или Micro Frontends или изучите составных внутренних компонентов с серверными компонентами .

Попробуйте →

Как мы создаем микроинтерфейсы

Создание микроинтерфейсов для ускорения и масштабирования процесса веб-разработки.

blog.bitsrc.io

Как мы создаем систему проектирования компонентов

Создание системы проектирования с компонентами для стандартизации и масштабирования нашего процесса разработки пользовательского интерфейса.

blog.bitsrc.io

Компонуемое предприятие: руководство

Чтобы работать в 2022 году, современное предприятие должно стать компонуемым.

blog.bitsrc.io

Как создать компонуемый блог

Создание блога с нуля требует довольно много времени. Есть ряд движущихся частей, которые собираются вместе, чтобы создать…

bit. cloud

Расширяемые компоненты пользовательского интерфейса

Недавно мне было поручено создать компонент карты пользователя для платформы bit.cloud. Мне также было поручено создать…

bit.cloud

JavaScript для циклов — пошаговое руководство (примеры)

В JavaScript вы можете использовать цикл for для повторения задачи на основе условия.

Пока условие верно , цикл продолжается. Когда условие становится false , цикл завершается.

Например, давайте отобразим числа от 0 до 5, используя цикл for:

 for(let i = 0; i <= 5; i+=1) {
    console.log(я)
} 

Вывод:

 0
1
2
3
4
5 

В этом цикле for условие i <=5 .

Другими словами, если i меньше или равно 5 , мы продолжаем отображать значения и увеличивать значение i на 1.

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

Сюда входят:

• Для синтаксиса цикла
• Примеры
• Альтернативы

И многое другое.

Циклы for Объяснение в JavaScript

В JavaScript цикл for позволяет повторять код до тех пор, пока выполняется условие.

Одним из применений цикла for является перебор набора значений.

В JavaScript вы можете хранить значения в повторяющихся коллекциях, таких как массивы.

Имея массив значений, вы обычно хотите просмотреть их одно за другим.

Делать это вручную было бы пустой тратой времени.

Здесь можно использовать цикл for.

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

Вот иллюстрация цикла for:

Чтобы научиться создавать цикл for, сначала нужно понять его синтаксис.

Синтаксис

 for(инициализация; условие; последнеевыражение) {
    // код
} 

Где:

• инициализация выполняется перед выполнением первого оператора цикла внутри цикла.
• условие проверяется каждый раз перед переходом к следующей итерации цикла. Цикл продолжается, если условие оценивает true . Если условие оценивает false , цикл завершается.
• lastExpression выполняется после каждой итерации. Это выражение в конечном итоге обновляет условие и завершает цикл.
• // код представляет собой область (блок), в которой вы можете разместить любой действительный код JavaScript.

Примеры

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

Показать числа от 1 до 10

Давайте воспользуемся циклом for для записи значений от 1 до 10 одно за другим.

Вот как это выглядит в коде:

 for (пусть i = 1; i <= 10; i += 1) {
    console.log(я)
} 

Выход:

 1
2
3
4
5
6
7
8
9
10 

Для лучшего понимания давайте внимательно рассмотрим цикл for и сравним его с синтаксисом цикла for из предыдущей главы:

• Инициализация — это let i = 1 ; Это создает переменную с именем i со значением 1 . Таким образом, когда цикл начинается, значение i начинается с 1 .
• Условие равно i <= 10 или «переменная i меньше или равна 10″. Переменная i равна 1 , так что это истинное . По ходу выполнения цикла это проверяется каждый раз перед переходом к операторам цикла.
• lastExpression равно i += 1 . Это сокращение от i = i + 1 . Другими словами, это увеличивает значение i на единицу в каждой итерации.

Внутри цикла у нас есть простое выражение console.log(i) .

Отображает текущее значение переменной i , если оно меньше или равно 10.

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

Перебор массива

Как было сказано ранее, вы можете использовать цикл for для перебора набора значений, например массива.

В этом примере вы узнаете, как перебирать массив строк.

При переборе массива нужно быть осторожным.

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

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

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

Чтобы перебрать массив с помощью цикла for, выполните следующие три шага:

1. Инициализируйте переменную цикла в 0 (1-й элемент).
2. Зациклить массив до тех пор, пока переменная цикла меньше длины массива.
3. Увеличивайте параметр цикла на 1 во время каждой итерации.

Вот пример:

 константные имена = ["Алиса", "Боб", "Чарли"]
for(пусть я = 0; я  length; я += 1) {
    console.log(имена[i])
} 

Вывод:

 Алиса
Боб
Charlie 

Далее давайте рассмотрим цикл for с несколькими условиями.

Цикл For с несколькими условиями

Ранее вы видели примеры, в которых условие цикла было простым.

Однако условие может быть более сложным, если оно оценивает true или false .

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

Например, давайте создадим цикл, который находит целевое число по заданному массиву чисел:

 let found = false
пусть цель = 13
постоянные числа = [1, 5, 13, 8, 12, 176]
for(let i = 0; !found && i < number. length; i += 1) {
    console.log("Проверка числа " + числа[i])
    если (числа [i] === цель) {
        console.log("Цель найдена!")
        найдено = верно
    }
} 

Вывод:

 Проверка номер 1
Осмотр номер 5
Осмотр номер 13
Цель найдена! 

В этом цикле условие состоит из двух частей:

• Номер еще не найден.
• Индекс не выходит за границы массива.

Если выполняются оба этих условия, цикл продолжается.

Далее давайте сосредоточимся на управлении потоком циклов for в JavaScript, изучив операторы потока управления continue и ломают .

Операторы управления потоком (break and continue)

В JavaScript вы можете управлять потоком цикла.

Операторы потока управления позволяют завершить текущую итерацию цикла. Вы также можете использовать операторы управления потоком для выхода из всего цикла.

В JavaScript есть два оператора потока управления:

• continue . Это завершает текущую итерацию и переходит к следующей.
• перерыв . На этом весь цикл заканчивается.

Давайте подробнее рассмотрим эти утверждения.

continue

В JavaScript вы можете использовать оператор continue , чтобы выйти из текущей итерации цикла for.

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

Оператор continue позволяет пропустить «остальную часть кода» в цикле.

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

Вот пример реализации:

 константные числа = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
for (пусть количество чисел) {
    если (число% 2 == 0) {
        console. log("Четное число " + число)
        Продолжать
    }
    console.log("Нечетное число" + число)
} 

Вывод:

 Нечетное число 1
Четное число 2
Нечетное число 3
Четное число 4
Нечетное число 5
Четное число 6
Нечетное число 7
Четное число 8
Нечетное число 9
Четное число 10 

В этом фрагменте кода мы используем continue 9Оператор 0027 для выхода из текущей итерации, если число четное.

Это потому, что мы не хотим печатать «Нечетное число» в конце каждой итерации.

Без оператора continue этот код всегда печатал бы как «Четное число», так и «Нечетное число».

Теперь оператор continue предотвращает выполнение последней строки в цикле for.

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

Далее давайте рассмотрим более агрессивный оператор потока управления, break .

break

В JavaScript вы можете использовать оператор break , чтобы полностью выйти из цикла.

При использовании оператора break цикл мгновенно завершается.

Это полезно, если вы хотите сэкономить ресурсы и остановить зацикливание после выполнения некоторого условия.

Например, если задано целевое число и список чисел, давайте построим цикл for для поиска целевого значения:

 постоянная цель = 23
постоянные числа = [1, 23, 4, 2, 7, 19]
for (пусть количество чисел) {
    console.log("Проверка числа " + число + "...")
    если (число === цель) {
        console.log("Цель найдена!")
        ломать
    }
} 

Вывод:

 Проверка числа 1. ..
Проверяю номер 23...
Цель найдена! 

Мы использовали оператор break , чтобы выйти из цикла сразу после того, как целевое число было найдено.

Это хорошо, потому что нет никакого смысла продолжать поиск номеров после того, как мы нашли то, что искали.

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

Далее давайте рассмотрим ситуацию, в которой вы можете опустить фигурные скобки в цикле for.

Следует ли опускать фигурные скобки в циклах For?

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

Кстати, это не относится к циклу for. Как правило, это относится и ко всем другим типам кодовых блоков.

Я говорю об этом, потому что иногда это может вызвать путаницу.

Например, если задан массив имен, воспользуемся циклом for для вывода имен на консоль:

 const name = ["Алиса", "Боб", "Чарли"]
for(пусть я = 0; я  length; я += 1)
    console.log(имена[i]) 

Вывод:

 Алиса
Боб
Чарли 

Как видите, оператор ведения журнала консоли не заключен в фигурные скобки.

Это потому, что это одна строка кода, и синтаксический анализатор JavaScript знает, что она принадлежит циклу.

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

Например:

 константные имена = ["Алиса", "Боб", "Чарли"]
для (назовите имена)
    console.log(имя)
    console.log("--------") 

Вывод:

 Алиса
Боб
Чарли
-------- 

Это не работает должным образом.

Вы ожидаете увидеть пунктирную линию после каждого имени.

Вместо этого вы получаете одну пунктирную линию после самого последнего элемента.

Это связано с тем, что цикл рассматривает последнее выражение как находящееся вне цикла.

Таким образом, опускание фигурных скобок вызвало путаницу.

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

Теперь у вас есть четкое представление о циклах for в JavaScript.

Далее давайте рассмотрим некоторые альтернативы циклу for.

По сути, вы изучите все остальные типы циклов в JavaScript.

Альтернативы цикла for

Хотя это руководство по циклу for, стоит обратить внимание на альтернативные подходы.

Иногда эти альтернативы лучше подходят для ваших нужд.

В JavaScript есть 3 основных типа циклов:

• Циклы For
• Циклы While
• Циклы Do-While

В дополнение к этим, есть 2 варианта цикла for для прохода по итерируемым объектам:

9
• Цикл for-of
• Цикл for-in

И когда дело доходит до цикла по массиву, вы также можете использовать метод Array. forEach() вместо цикла for.

Всего есть 5 альтернатив, которые вы можете рассмотреть при написании обычного цикла for.

Далее вы узнаете, как работает каждый из этих вариантов.

Циклы while

Циклы while — это популярный тип циклов в JavaScript.

Цикл while повторяет фрагмент кода, пока выполняется условие.

Вот иллюстрация цикла while:

Идея цикла while аналогична циклу for, но отличается синтаксисом.

Давайте посмотрим на синтаксис поближе.

Синтаксис

В JavaScript цикл while следует следующему синтаксису:

 while (условие) {
    // код
} 

Где:

• условие должно выполняться для выполнения цикла. Если условие возвращает false, цикл останавливается.
• // код представляет собой блок кода, который многократно выполняется в цикле. Это может быть любой действительный код JavaScript.

В отличие от цикла for, цикл while не имеет явного lastExpression , которое в конечном итоге обновит условие до false и остановит цикл.

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

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

Это не то, что вам нужно, и это может вызвать серьезные проблемы в вашем веб-приложении.

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

Например, при подсчете значений необходимо увеличивать переменную счетчика в конце каждой итерации.

Пример

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

 пусть i = 0
в то время как (я <= 5) {
    console. log(я)
    я += 1
} 

Выход:

 0
1
2
3
4
5 

Здесь вы впервые инициализируете счетчик вне цикла while.

Вы устанавливаете переменную счетчика i в 0.

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

Внутри цикла while вы печатаете текущее значение счетчик.

Затем вы также увеличиваете счетчик для следующего раунда.

Если вы не обновите счетчик в конце цикла, вы получите бесконечный цикл.

Далее давайте рассмотрим очень похожий цикл, называемый циклом do-while.

Циклы Do-While

Цикл do-while очень похож на цикл while.

Единственное отличие состоит в том, что цикл do-while всегда выполняется хотя бы один раз.

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

В некоторых ситуациях вы хотите, чтобы цикл выполнялся хотя бы один раз, несмотря ни на что.

Вот почему существует особый вариант цикла while, называемый циклом do-while.

Начнем с синтаксиса цикла do-while.

Синтаксис

В JavaScript цикл do-while следует следующему синтаксису:

 do {
   // код
} while (условие) 

Где:

• // код может быть любым допустимым кодом JavaScript. Этот фрагмент кода всегда выполняется хотя бы один раз.
• Условие должно выполняться, чтобы цикл продолжал работать. Если условие возвращает false , цикл останавливается.

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

Характерным отличием цикла while от цикла do-while является порядок кода. В цикле while сначала идет условие, а затем операторы.

В цикле do-while операторы находятся внутри блока do-блока, который предшествует условию.

Пример

Учитывая возраст, давайте напечатаем возраст и прибавим к нему один год, пока возраст не станет 20+. Кроме того, независимо от возраста, давайте напечатаем его хотя бы один раз.

Например:

 пусть возраст = 50
делать {
    console.log(возраст)
    возраст += 1
} while (age < 20) 

Вывод:

 50 

Здесь age для начала равен 50 годам. Таким образом, условие равно false , когда мы начинаем цикл.

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

В качестве другого примера начнем с меньшего возраста :

 пусть возраст = 15
делать {
    console.log(возраст)
    возраст += 1
} пока (возраст < 20) 

Выход:

 15
16
17
18
19 

Теперь код выводит возраст 15, 16, 17, 18, 19 и останавливается, когда возраст равен 20 , а условие равно false .

Теперь вы знаете основные типы циклов в JavaScript.

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

Далее рассмотрим два варианта цикла for:

• Цикл for-of
• Цикл For-in

Циклы For-Of

Цикл for-of позволяет выполнять цикл по итерируемому объекту более читаемым образом.

Итерируемый объект означает набор значений, которые можно пройти в цикле.

Массив является одним из примеров итерируемого объекта. Строка также является итерируемым объектом.

Давайте посмотрим на синтаксис цикла for-of.

Синтаксис

 for (переменная итерации) {
    // код
} 

Где:

• переменной присваивается другое свойство во время каждой итерации.
• iterable — это объект, свойства которого зациклены.

Чтобы понять это, вам нужно увидеть пример.

Пример

Для заданного массива строк воспользуемся циклом for-of для вывода каждой строки:

 const name = ["Алиса", "Боб", "Чарли"]
для (пусть имя имен) {
    console.log(имя)
} 

Вывод:

 Алиса
Боб
Чарли 

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

До сих пор мы в основном имели дело с массивами и циклами for.

Но, как вы узнали, массив — не единственный итерируемый тип в JavaScript. Строка — это еще один пример часто используемого итерируемого типа данных.

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

Давайте посмотрим, как использовать цикл for-of при переборе символов строки.

Например:

 const word = "Здравствуйте"
для (c слова) {
    console.log(с)
} 

Вывод:

 Ч
е
л
л
o 

Как видите, идея та же самая, что и при переборе массива.

Как видите, цикл for-of удобен, поскольку вам не нужно беспокоиться об индексах или условиях.

Циклы For-In

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

Это очень похоже на цикл for-of из предыдущей главы.

Разница между циклом for-in и циклом for-of:

• Цикл for-of проходит через элементы.
• Цикл for-in проходит по ключам.

Прежде чем перейти к примерам, давайте посмотрим на синтаксис цикла for-in.

Синтаксис

 for (свойство в объекте) {
    // код
} 

Где:

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

Пример

Имея объект данных , давайте переберем его ключи и выведем пары ключ-значение в консоль:

 const data = {
    «Алиса»: 32,
    «Боб»: 23,
    «Чарли»: 27
}
for (пусть введите данные) {
    console. log (ключ + ": " + данные [ключ])
} 

Вывод:

 Алиса: 32
Боб: 23
Чарли: 27 

Здесь цикл for-in принимает по одной клавише за раз и присваивает ее переменной с именем key . Затем внутри цикла вы используете этот ключ для доступа к значению этого ключа в объекте данных .

Не следует использовать цикл for-in для прохода по массиву. Это связано с тем, что цикл for-in возвращает связанные с каждым элементом ключи вместо значений.

Например:

 константные имена = ["Алиса", "Боб", "Чарли"]
for (пусть имя в именах) {
    console. log(имя)
} 

Вывод:

 0
1
2 

Как видите, цикл for-in не возвращает строковые значения. Вместо этого он возвращает индексы (то есть перечисляемые ключи, относящиеся к каждой строке в массиве).

Если это не то, что вам нужно, не используйте цикл for-in с массивами.

Итак, вы узнали, как использовать все типы циклов в JavaScript.

Поскольку циклы с массивами очень распространены, мы собираемся посвятить целую главу методу Array.forEach() . Это специальный метод, предназначенный для сокращения зацикливания массивов.

Метод Array.forEach()

Массив JavaScript имеет встроенный метод forEach() .

Этот метод можно использовать для перебора элементов массива без необходимости записи цикла for или цикла while.

Это может сделать ваш код более кратким и читабельным.

Если вам интересно, не стесняйтесь прочитать полное руководство по использованию метода Array.forEach() в JavaScript здесь.

В любом случае, вот краткое введение в метод Array.forEach() .

Синтаксис

Вот основной синтаксис метода forEach() в JavaScript:

 Array.forEach(elem => { /* code */ }) 

Где:

• elem представляет один элемент массива за раз в цикле.
• { /* код */ } — это блок кода. Вы можете разместить здесь любой действительный код JavaScript.

Пример

Имея массив имен, давайте выведем каждое имя в консоль, используя метод forEach() .

Вот как это выглядит в коде:

 const name = ["Алиса", "Боб", "Чарли"]
имена.forEach (имя => {
    console.log(имя)
}) 

Вывод:

 Алиса
Боб
Чарли 

За кулисами этот фрагмент кода создает цикл. Затем он перебирает массив по одному элементу за раз и называет каждый элемент именем .

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

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

5 способов вывода элементов массива

Вот 5 способов вывода чисел массива. Каждый подход дает один и тот же результат:

 постоянные числа = [1, 2, 3]
// Для цикла
for(пусть я = 0; я <чисел.длина; я++) {
    console.log(числа[i])
}
// Цикл for-of
for (пусть количество чисел) {
    console.log(число)
}
// пока цикл
пусть j = 0
в то время как (j < числа.длина) {
    console.log(числа [j])
    j++
}
// Цикл Do-while
пусть к = 0
делать {
    console.log (числа [k])
    к++
} в то время как (k < числа.длина)
// Цикл Array.forEach
number.forEach((number) => console.log(number)) 

Каждый подход выводит чисел массив таким образом:

 1
2
3 

Заключение

Сегодня вы узнали о циклах for в JavaScript.