Какие существуют различные циклы JavaScript?

Этот пост был первоначально опубликован на Hackmamba

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

В этой статье мы узнаем, как повторить серию действий с помощью циклов в JavaScript.

Необходимые условия

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

• Базовое понимание HTML и JavaScript.
• Мы можем использовать Visual Studio Code или любую другую IDE. Нажмите здесь, чтобы скачать Vs. Code.

Петли JavaScript

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

Представьте ситуацию, когда мы хотим распечатать данные из 1 — 12. Поэтому мы console.log каждое число двенадцать раз. Это много работы, верно? Использование циклов в подобной ситуации сэкономит нам время и позволит написать меньше строк кода. Это основное преимущество использования циклов.

Типы циклов

Наиболее распространенными циклами в JavaScript являются:

• цикл For
• цикл For-of
• цикл For-in
• цикл While
• цикл Do-while

Циклы For

Мы используем цикл for для повторения серии действий до тех пор, пока определенное условие не станет ложным. Когда условие остановки истинно, цикл for выполняется, а когда оно ложно — нет.

Пример синтаксиса цикла for приведен ниже:

for (initial expression; stop condition or counter; increment expression) {
   // code block to be executed 
}

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

• Начальное выражение: Это выражение запускает цикл. Оно также позволяет нам объявить счетчик или переменную цикла.
• Условие остановки: Начальное выражение должно удовлетворять условию остановки, чтобы цикл запустился. Код будет выполняться, если условие остановки истинно, и завершится, если оно ложно. Если мы не указали условие остановки, то по умолчанию оно будет равно true. Мы называем точку, в которой условие становится ложным, условием остановки.
• Выражение инкремента: Выражение инкремента также называется выражением обновления. Мы используем выражение инкремента для увеличения или уменьшения счетчика. Оно также может меняться на выражение декремента, когда мы хотим, чтобы цикл выполнялся в обратном направлении.
• Тело цикла — это блок кода, который мы выполняем внутри цикла.

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

Пример 1: Вывести число от 1 до 12.

for (let i = 1; i <= 12; i++) {
   console.log(i);
}  

  // returns => 1 2 3 4 5 6 7 8 9 10 11 12 

Давайте рассмотрим пример 1 более подробно:

• Начальное выражение, называемое также переменной цикла, имеет вид let i = 1, что означает, что цикл начнет выполняться с 1. Буква i означает индекс. Это обычное соглашение об именовании, используемое для циклов. i может быть чем угодно. Например, это может быть let j = 1, или let counter = 1.
• Условием остановки является i <= 12. Цикл будет выполняться до тех пор, пока переменная цикла меньше или равна 12. Цикл остановится, когда условие станет больше 12. Для получения дополнительной информации о сравнениях и логических операторах JavaScript щелкните здесь.

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

Как запустить обратный цикл For Loop

Что если мы хотим, чтобы наш пример 1 выполнялся в обратном направлении от 12 — 1? Что нам делать?

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

P.S. Термин «инкремент» означает прибавление единицы к значению переменной. Уменьшение переменной — это процесс вычитания единицы из ее значения.

Пример 2: Печать от 1 до 12 в обратном направлении.

for (let backwardExp = 12; backwardExp >= 1; backwardExp--) {
    console.log(backwardExp);
}

   // 12 11 10 9 8 7 6 5 4 3 2 1

Как исправить бесконечные циклы

Бесконечный цикл — это цикл, который никогда не заканчивается. Условие остановки каждый раз оценивается как true, что заставляет цикл работать бесконечно.

Пример 3: Бесконечный цикл

for (let i = 10; i >= 5; i++) {
    console.log(i);
}

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

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

Циклическая работа с массивами

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

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

Пример 4:

let myList = ["laptop", "frontend job", "dog"];

for (let i = 0; i < myList.length; i++) {
    console.log("I want a " + myList[i]);
}

В приведенном выше примере результат будет следующим:

    "I want a laptop"
    "I want a frontend job"
    "I want a dog"

Как вложить циклы For

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

Пример 5: Вложенный цикл for

  // first loop
for (let i = 1; i < 4; i++) {
   console.log(`outer loop: ${i}`);

    // nested loop
   for(let j = 1; j <=2; j++) {
     console.log(`inner loop: ${j}`);
   }
}

В приведенном выше примере результатом будет:

    "outer loop: 1"
    "inner loop: 1"
    "inner loop: 2"

    "outer loop: 2"
    "inner loop: 1"
    "inner loop: 2"

    "outer loop: 3"
    "inner loop: 1"
    "inner loop: 2"

Это также относится к вложенным массивам.

Циклы For

Цикл for of является одной из новейших версий циклов в JavaScript ES6. Мы используем цикл for of для выполнения или итерации по массивам или другим итерируемым объектам. Итерируемые объекты — это объекты, по которым мы можем пробежаться, такие как массивы, множества, строки, карты и т. д. Для получения дополнительной информации об итерируемых объектах щелкните здесь.

Пример синтаксиса цикла for приведен ниже:

for (variable of Iterable) { 
    // code to be executed
}

В приведенном выше синтаксисе:

• Переменная — это ключевые слова var, let или const, которые мы использовали для объявления переменной.
• Итерабельность может быть массивом, строкой, картой, набором и т.д.

Пример 6: Перебор массивов с помощью For из Loop.

let codeLine = ['coding', 'design', 'advocate', 'create'];

for (let myCode of codeLine ) {
    console.log(myCode);
}

В приведенном выше примере результат будет следующим:

    "coding"
    "design"
    "advocate"
    "create"

В примере 6:

• Мы присваиваем элемент массива codeLine ключевой переменной myCode.
• Цикл for of перебирает все элементы массива codeLine.

Циклы For In

Мы используем цикл for in для перебора ключей свойств объекта. Он перебирает только ключи объекта с перечислимым значением true.

Используйте функцию property.enumerable, чтобы узнать, является ли свойство перечислимым. Она вернет true или false. Для получения дополнительной информации о перечислимых свойствах щелкните здесь.

Циклы for in можно использовать для объектов, строк и массивов.

Пример синтаксиса цикла for in приведен ниже:

for (variable in object) {
   // code block to be executed
} 

В приведенном выше синтаксисе:

• Переменная — это ключевые слова var, let или const, которые мы использовали для объявления переменной.
• Объект относится к объекту, свойства которого мы хотим выполнить или итерировать.

Пример 7: Использование цикла For in с объектами.

let stack = {
  name: 'cess',
  stack: 'frontend',
  country: 'Nigeria',
  languages: 2,
};

  // To get the object key
for (let profile in stack) {
  console.log(profile);
}

  // To get the values of the object keys
for (let profile in stack) {
  console.log(stack[profile]);
}

В приведенном выше примере результат будет следующим:

  // Output for the object keys
"name"
"stack"
"country"
"languages"

  // Output for the values of the object keys
"cess"
"frontend"
"Nigeria"
2

В приведенном выше примере мы использовали цикл for in для перебора и печати всех свойств объекта stack.

• Мы присваиваем profile переменной key.
• Мы используем мой stack[profile] для доступа к значению ключа объекта.

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

ПРИМЕЧАНИЕ: Лучшим способом работы с массивами является использование циклов for или for of.

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

Циклы for of и for in отличаются в основном данными, которые они итерируют или перебирают.

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

Циклы While

Цикл while продолжает выполняться до тех пор, пока условие остановки true. Он прекращает выполнение, если условие принимает значение false.

Пример синтаксиса цикла while приведен ниже:

while (stop condition) {
    // code block to be executed
} 

Когда использовать цикл While

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

Пример 8: Вывести значения от 1 до 6.

let i = 1;
while(i <= 6) {
   console.log(i);
   i++;
}

  // returns 1 2 3 4 5 6

Здесь,

• Цикл начинает выполняться с 1.
• Цикл while оценивает условие остановки внутри скобки (1 <= 6). Если условие остановки true, оно увеличивается на единицу, пока не станет false.

Оператор Break

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

Мы используем ключевое слово break в основном в условных операторах, таких как if и else. Для получения дополнительной информации об условных операторах щелкните здесь.

Циклы Do-while

Циклы Do-while выполняют блок кода (тело цикла) по крайней мере один раз перед повторным запуском, если условие остановки true или false.

Пример синтаксиса цикла do-while приведен ниже:

    do {   
      // code to be executed 
    } while(stop condition)

Рассмотрим синтаксис цикла do-while:

• Сначала выполняется тело цикла, затем условие остановки.
• Если условие остановки true, тело цикла выполняется снова, пока не станет false.

Пример 9: Печать с 1 по 6

let i = 1;
do {
   console.log(i);
   i++;
}  while(i <= 6)

  // returns => 1 2 3 4 5 6

В чем разница между циклом while и циклом do-while?

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

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

Заключение

В этой статье мы познакомились с концепцией циклов в JavaScript. Использование циклов делает наш код более эффективным и позволяет избежать повторения многих строк кода.

Ресурсы

Следующие ресурсы могут быть полезны:

• Javascript для цикла
• Циклы и итерация