Циклы JavaScript.



Очень часто нужно, чтобы определённая часть программы выполнялась много раз. Разумеется, можно просто сделать так: скопировать-вставить и так нужное число раз. Но если действие надо выполнять, например, 1000 раз. Это очень долго. Поэтому существуют циклы, которые присутствуют в большинстве языков программирования. А сегодня я Вам расскажу о циклах JavaScript.

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

Цикл for

Цикл for повторяет действия, пока заданное условие является истинным. Оператор for в JavaScript аналогичен оператору for в Java и C. Его синтаксис:

for (блок определения;условие;блок изменения) {
   //Блок команд, который будет повторно выполняться пока условие истинно
}

Когда цикл for начинает исполнение происходит следующее:

1. Выполняются выражения заданные в блоке определения (в данном блоке определяются служебные переменные цикла такие как счетчик цикла);

2. Производится оценка условия и если оно истинно (равно true) выполнение переходит к шагу 3. Если условие ложно (равно false) цикл завершается;

3. Выполняется блок команд;

4. Выполняются выражения заданные в блоке изменения (в данном блоке над счетчиком цикла производятся какие-либо изменения) и выполнение переходит к шагу 2 и т.д.

Пример цикла For:

Предположим нам нужно написать программу выводящую на страницу числа от 1 до 30. Если бы мы не воспользовались циклом нам бы пришлось написать 30 почти идентичных строчек кода выводящих каждое из этих чисел на страницу вручную. С помощью цикла for можно сделать тоже самое написав только 3 строчки кода.

for (i=1;i<=30;i++) {
   document.write (i+'<br />');
}

Я думаю теперь прекрасно понятно что циклы сокращают куча ненужной писанины…

Цикл for/in

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

for (переменная in объект)
{
    инструкция
}

Пример цикла For/in

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

function dump_props(obj, obj_name) {
  var result = "";
  for (var i in obj) {
    result += obj_name + "." + i + " = " + obj[i] + "<br>";
  }
  result += "<hr>";
  return result;
}

Цикл for…of

Оператор for…of создаёт цикл, проходящий по перечислимым объектам (включая Array, Map, Set, объект arguments и так далее), вызывая на каждой итерации функцию с выражениями, которые надо выполнить для получения значения каждого отдельного свойства.

for (variable of object) {
  выражения
}

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

let arr = [3, 5, 7];
arr.foo = "hello";

for (let i in arr) {
   console.log(i); // выводит "0", "1", "2", "foo"
}

for (let i of arr) {
   console.log(i); // выводит "3", "5", "7"
}

Цикл While

Цикл while выполняет выражения пока условие истинно. Он выполняет действия аналогичные циклу for и отличается от него только синтаксисом.

while (условие) {
  //Блок команд, который будет повторно выполняться если условие истинно
}

Возьмем предыдущий пример цикла For (где сокращаем 30 строчек кода до 3), но выполним его с помощью цикла while:

var i=1;
while (i<=30) {
   document.write (i+'<br />');
   i++;
}

Цикл do…while

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

do {
   //Блок команд, который будет выполнен больше одного раза если условие истинно
}
while (условие);

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

var i=20;
do {
   document.write('Ура! код выполнился, но только один раз.');
}
while (i<=3);

Команда break

С помощью команды break можно досрочно «прерывать» выполнение цикла.

//Задаем цикл, который должен выводить значения от 1 до 40
for (i=1;i<=40;i++) {
   document.write(i + '<br />');
   //Прерываем выполнение цикла после того, как он досчитает до 11 
   if (i==11) {
      break;
   }
}

Команда continue

Команда continue прерывает текущую итерацию выполнения цикла и переходит к следующей.

//Задаем цикл который должен выводить значения от 1 до 20
for (i=1;i<=20;i++) {
   //Пропустим 2, 8 и 16 круг выполнения цикла  
   if (i==2) {
      continue;
   }
   else if (i==8) {
      continue;
   }
   else if (i==16) {
      continue;
   }
   document.write(i+'<br />');
}

Попробуйте выполнить этот код и Вы увидите что числа 2, 8, 16 не будут выведины на экран.

На этом наше изучение циклов в JavaScript закончено. Если есть вопросы пишите помогу.

1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (Пока оценок нет)
Загрузка...

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Chinese (Traditional)EnglishJapaneseRussianUkrainian

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: