Меню
Спросить
JS

Циклы в JavaScript

22 октября 2017
Циклы в JavaScript

Всем привет! Сегодня поговорим о циклах в JavaScript, а конкретно разберем такие циклы как: while, do/while, for, for/in. Тема не сложная, я попытаюсь как обычно максимально объяснить все это и для чего это нужно. Я вам рекомендую еще прочитать статью про алгоритмы, а конкретно про цикличный алгоритм, так же не будет лишней и эта статья.
Поехали =)
Что такое циклы? Для начала возьмем примеры из жизни, все знают строку из песни - "День рождение только раз в гооооду, туду тудутуду". День рождение наступило, отпраздновали, закончилось и через год повторение. Это есть цикл. То есть, какие-то действия повторяются по кругу(циклу) и в этом цикле происходят какие-то действия.

  1. цикл ДР (повторять 100лет) {
  2.    праздновать;
  3.    есть торт;
  4.    принимать подарки;
  5. }

В JavaScript та же хрень. Просто циклы разные и имеют немного иной синтаксис =)

Цикл WHILE

Цикл while(вайл, уайл) или цикл "ПОКА". Почему пока? Потому, что цикл будет работать, то есть крутится по кругу, ПОКА не выполнится поставленное условие. Да, цикл while содержит в себе условие.
Давайте рассмотрим пример.

  1. var
  2. a = 0;
  3. while (a != 5){
  4.     a++;
  5.     alert(a);
  6. }

Это и есть цикл while. Давайте прокомментируем код дословно по каждой строчке:

  1. Объявим
  2. переменная а равна 0;
  3. цикл while (условие "a" НЕ равно 5){
  4.     увеличить "a" на единицу;
  5.     вывести "a";
  6. }

То есть цикл while будет выполнять действия в своем теле(увеличить переменную на единицу и вывести ее) до тех пор, ПОКА a НЕ равно 5. Как только "a" станет равна 5, цикл прекратит свою работу. Поехали дальше.

Цикл do/while

Цикл do/while тот же цикл while, но условия проверяется после тела цикла.

  1. var
  2. a = 0;
  3. do {
  4.     a++;
  5.     alert(a);
  6. }
  7. while (a != 5);

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

Цикл for

Цикл for работает и выглядит совсем не как while. В нем тоже есть своего рода условие. Для работы данного цикла нужна дополнительная переменная. Объявим переменную.

  1. var
  2. i;

Дальше запишем не посредственно сам цикл for

  1. var
  2. i;
  3. for () {

  4. }

В круглых скобках будет три действия.

  1. Присваивание переменной какому-то значению
  2. Условие
  3. Увеличение переменной на единицу

Давайте запишем первое действие, присвоим переменной "i" значение 0

  1. var
  2. i;
  3. for ( i=0; ) {

  4. }

Дальше запишем условие

  1. var
  2. i;
  3. for ( i=0; i < 5; ) {

  4. }

И пишем инкремент - увеличение переменной на единицу.

  1. var
  2. i;
  3. for ( i=0; i < 5; i++; ) {

  4. }

И теперь можно писать в тело цикла действия

  1. var
  2. i;
  3. for ( i=0; i < 5; i++; ) {
  4.     alert(i);
  5. }

Можно записать по другому

  1. var
  2. i = 0;
  3. for ( i; i < 5; i++; ) {
  4.     alert(i);
  5. }

Или так

  1. for (var i=0; i < 5; i++; ) {
  2.     alert(i);
  3. }

В следующей статье мы будем применять именно этот цикл.

Цикл for/in

Данный цикл в основном работает с объектами, а точнее с их элементами. Давайте рассмотрим пример.
Объявим объект.

  1. var
  2. Obj = {color: 'black', style: 'css', zhopa:'нога'};

Теперь перечислим значения с помощью цикла.

  1. var
  2. Obj = {color: 'black', style: 'css', zhopa:'нога'};
  3. for (var el in Obj) {
  4.     alert(Obj[el]);
  5. }

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

Заключение

Циклы помогают выводить сотни статей, комментариев, проверять огромные массивы информации и многое другое. Все это вы будете использовать и циклы вам в помощь. На сегодня все, всем спасибо, пока =)

Следующая статьяПредыдущая статья