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

🤓 Хотите быть в курсе новостей веб-разработчиков?
🚀 Хотите, чтобы последние новости доставлялись прямо на ваш почтовый ящик?
🎉 Присоединяйтесь к растущему сообществу дизайнеров и разработчиков!

Подпишитесь на мою рассылку здесь → https://easeout.eo.page

Можно подумать о цикле, если подумать о том, чтобы давать команды роботу. Вы можете сказать ему сделать 10 шагов - и вместо того, чтобы выдавать 10 отдельных команд, мы можем создать цикл:

let i;
for (i = 0; i < 10; i++) {
  document.write("Take one step!\n");
}

Это пример цикла for. Сначала это может сбивать с толку, но мы разберем все это в следующем разделе! В этой статье мы рассмотрим множество различных типов операторов цикла, например: for, do...while, while, labeled statement, break statement, continue statement, for...in & for...of. Стоит отметить, что, несмотря на различия в синтаксисе, все циклы, по сути, делают одно и то же: повторяют действие несколько раз. Ситуация диктует, какой тип петли лучше всего подходит.

the for петля

Как мы видели в приведенном выше примере, цикл for будет повторяться до тех пор, пока наше условие не станет ложным. Логическая структура такая:

for ([initialExpression]; [condition]; [incrementExpression])
  statement

Сначала мы инициализируем initialExpression, который обычно инициализирует один или несколько счетчиков циклов, но синтаксис позволяет даже более сложные выражения, такие как переменные. Затем мы оцениваем наш condition, если истина, операторы цикла будут выполнены. Если false, цикл завершается.

Затем выполняется statement. Когда мы хотим выполнить несколько операторов, мы используем оператор блока ({ ... }), чтобы сгруппировать их вместе. Если присутствует, выполняется выражение обновления incrementExpression. Затем управление возвращается к оценке condition.

Вернемся к нашему предыдущему примеру:

let i;
for (i = 0; i < 10; i++) {
  document.write("Take one step!\n");
}

Здесь мы видим, что наш for оператор подсчитывает количество сделанных шагов до 10. Переменная i гарантирует, что мы начинаем с самого начала, инициализируя нулевое значение. Затем он проверит, что i меньше указанного числа, которое в нашем случае равно 10. i++ - это счетчик, который будет увеличиваться i на 1 после каждого прохождения цикла. Итак, наш цикл знает, когда нужно завершить!

do...while заявление

Заявление do...while будет повторяться до тех пор, пока условие не станет ложным. Структура такая:

do
  statement
while (condition);

Это говорит само за себя: statement всегда выполняется один раз перед проверкой условия. И затем снова, пока условие while не вернет false. Мы можем выполнять несколько операторов, используя оператор блока ({ ... }) для их группировки. Если condition истина, инструкция выполняется снова. В конце каждого выполнения условие проверяется. Когда условие возвращает false, выполнение останавливается и управление переходит к инструкции, следующей за do...while.

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

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

Здесь наш do цикл повторяется хотя бы один раз, а затем повторяется до тех пор, пока i не станет больше 10.

while заявление

Оператор while выполняет свои операторы, пока заданное условие имеет значение true. Его синтаксис следующий:

while (condition)
  statement

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

Проверка условия выполняется до того, как statement в цикле будет выполнен. И если условие возвращает true, statement выполняется, и условие снова проверяется. Если условие возвращает false, выполнение останавливается и управление передается оператору, следующему за while.

Как и в случае с do...while, мы можем выполнять несколько операторов, используя оператор блока ({…}), чтобы сгруппировать их вместе.

Следующий цикл while будет повторяться, пока a меньше трех:

let a = 0;
let b = 0;
while (a < 3) {
  a++;
  b+= a;
}

Здесь с каждой итерацией цикл увеличивает a и добавляет это значение к b. Следовательно, a и b принимают следующие значения:

  • После первого прохождения цикла: a = 1 и b = 1
  • И второй проход: a = 2 и b = 3
  • И третий проход: a = 3 и b = 6

После завершения третьего прохода условие a < 3 перестает быть истинным, и на этом наш цикл завершается!

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

while (true) {
  console.log('Hi there!');
}

ВНИМАНИЕ: Если вы запустите этот код - имейте в виду, что это может привести к сбою вашего браузера! Поэтому убедитесь, что вы создали резервные копии открытых вкладок - если хотите увидеть, что произойдет.

labeled заявление

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

label :
   statement

Значение label может быть любым (за исключением зарезервированного слова JavaScript). Затем вы предоставляете thestatement для выполнения.

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

totalLoop:
while (total == true) {
   doSomething();
}

break заявление

Мы используем оператор break для завершения цикла или switch, или вместе с помеченным оператором.

  • Когда вы используете break без метки, он немедленно завершает внутренний охват while, do-while, for или switch и передает управление следующему оператору.
  • Когда вы используете break с меткой, он завершает указанный помеченный оператор.

Оператор break выглядит так:

break [label];

Например, давайте пройдемся по массиву, пока не найдем индекс элемента со значением: foundMe

for (let i = 0; i < a.length; i++) {
  if (a[i] == foundMe) {
    break;
  }
}

И давайте использовать break с помеченным утверждением:

let x = 0;
let z = 0;
endLoops: while (true) {
  console.log('Outer loops: ' + x);
  x += 1;
  z = 1;
  while (true) {
    console.log('Inner loops: ' + z);
    z += 1;
    if (z === 10 && x === 10) {
      break endLoops;
    } else if (z === 10) {
      break;
    }
  }
}

continue заявление

Мы используем оператор continue для перезапуска оператора while, do-while, for или label .

  • Когда вы используете continue без метки, он завершает текущую итерацию самого внутреннего включающего оператора while, do-while или for и продолжает выполнение цикла со следующей итерации. Это контрастирует с оператором break, поскольку continue не завершает выполнение цикла полностью. В цикле while он возвращается к условию. В цикле for он переходит к initial-expression.
  • Когда вы используете continue с меткой, он применяется к оператору цикла, идентифицированному с этой меткой.

Выражение continue выглядит так:

continue [label];

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

let i = 0;
let n = 0;
while (i < 5) {
  i++;
  if (i == 3) {
    continue;
  }
  n += i;
  console.log(n);
}
// 1,3,7,12

let i = 0; 
let n = 0; 
while (i < 5) { 
  i++; 
  if (i == 3) { 
     // continue; 
  } 
  n += i; 
  console.log(n);
}
// 1,3,6,10,15

for...in заявление

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

for (variable in object) {
  statements
}

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

function get_names(obj, obj_name) {
  let result = '';
  for (let i in obj) {
    result += obj_name + '.' + i + ' = ' + obj[i] + '<br>';
  }
  result += '<hr>';
  return result;
}

Для объекта food со свойствами lunch и dinner result будет:

food.lunch = Sandwich
food.dinner = Lasagna

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

for...of заявление

Оператор for … of создает цикл, который перебирает итерируемые объекты, такие как Array, Map, Set, arguments и т. Д. Синтаксис такой:

for (variable of object) {
  statement
}

В приведенном ниже примере показана разница между циклом for...of и циклом for … in. В то время как for...in перебирает имена свойств, for...of перебирает значения свойств:

let arr = [10, 20, 30];
arr.greet = 'hello';
for (let i in arr) {
   console.log(i); // logs "0", "1", "2", "greet"
}
for (let i of arr) {
   console.log(i); // logs 10, 20, 30
}

Готовы ли вы вывести свои навыки CSS на новый уровень? Начните прямо сейчас с моей новой электронной книги: Руководство по CSS: полное руководство по современному CSS. Будьте в курсе всего, от основных концепций, таких как Flexbox и Grid, до более сложных тем, таких как анимация, архитектура и многое другое !!

Заключение

Вот и все! Мы узнали о многих различных операторах цикла, например: for, do...while, while, labeled statement, break statement, continue statement, for..in & for...of. И мы рассмотрели ряд примеров, выделяющих идеальные варианты использования для каждого типа цикла. Какие бы утверждения мы ни выбрали, теперь у нас есть все необходимое, чтобы добавить логику и аргументы в наши программы.

Надеюсь, эта статья оказалась для вас полезной! Вы можете подписаться на меня на Medium. Я тоже в Твиттере. Не стесняйтесь оставлять любые вопросы в комментариях ниже. Буду рад помочь!