Стать программистом. Часть 17. Основы JavaScript для абсолютных новичков!

Доброго времени суток, друзья!

В нашем прошлом уроке мы с Вами начали рассматривать тему циклов в JavaScript'e. Мы провели некую ассоциацию для понимания сущности циклов, познакомились с циклом while, детально рассмотрели этапы работы этого цикла и закрепили наши знания на практике. Однако цикл while не единственный цикл доступный нам для работы с коллекциями.
И сегодня мы постараемся рассмотреть оставшиеся.

Приступим?

Урок 17. Циклы. Часть II.

Следующим циклом для рассмотрения будет цикл наиболее "близкий", если так можно выразиться, циклу while. Это цикл **do {...} while(...) **. Можно сказать, по своей сути, этот цикл является перевернутым while, и если в последнем мы сначала задавали условие, а затем описывали код, который должен был выполнятся пока условие возвращает истину (true), то здесь все наоборот: сначала мы описываем код, который должен выполнятся, а уже затем указываем условие. Если прибегнуть к нашему приему с переводом, то мы собственно и получим как-бы "приглашение" к такой последовательности действий.

выполняй {
 // этот код
} до тех пор, пока (/* условие возвращает истину */)

Сама работа с циклом **do {...} while(...) ** мало чем отличается от аналогичной работы с while. Этот цикл, так же, как и его "собрат" из прошлого урока применяется к коллекциям, и условие, которое будет находится в круглых скобках, также должно иметь возможность через какое-то время начать возвращать false. В противном случае мы рискуем попасть в бесконечный цикл.
Рассмотрим пример на практике.

// Цикл do{}whie()
var a = [
    'Январь', 
    'Февраль', 
    'Март', 
    'Апрель', 
    'Май', 
    'Июнь', 
    'Июль', 
    'Август', 
    'Сентябрь', 
    'Октябрь', 
    'Ноябрь', 
    'Декабрь'
    ];
var i = 0;

do {
    
    alert(a[i]);
    i+=1;

} while(i != a.length);

Рассмотрим подробнее. На этот раз у нас есть a массив, состоящий из названий 12 месяцев. Мы как и раньше переменную i, которая будет увеличиваться на 1 за каждую итерацию цикла при помощи записи i+=1; на строке 21 (в прошлом уроке для этой цели мы использовали операцию increment i++. В этот раз я решил показать, что операция присваивания со сложением, с которой мы познакомились в уроке № 12 также подходит для этих целей). Кроме того значение переменной i будет каждую итерацию цикла сравниваться с длинной массива a, которая очевидно равна 12. Происходит это на строке 23 в записи while(i != a.length);. Сам же цикл, будет выводить сообщение с названием очередного месяца, благодря все той же переменной i, каждое значение которой будет подставляться в alert(a[i]); на строке 20. Таким образом в браузере мы увидим 12 сообщений со всеми именами месяцев из массива a. Удостоверимся в этом:

Как видим, все сообщения вывелись, и цикл **do {...} while(...) ** закончил свою работу на последнем, то есть тогда, когда условие while(i != a.length); приняло форму while(12 != 12);, что в результате вернуло false потому что двенадцать не может быть не равно двенадцати.

Следующим циклом, который мы рассмотрим является цикл for. Лично в моей практике этот цикл встречался мне намного чаще, чем два предыдущих. Цикл for в своем кодовом представлении отличается и от while(...) {...} и от do {...} while (...). В своем классическом стиле цикл for имеет следующий вид:

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

Давайте разберем на практике:

// Цикл for
var a = [
    1,
    'привет',
    true,
    undefined
    ];

for(var i = 0; i < a.length; i++) {
    alert('элемент "' + a[i] + '" имеет тип "' + typeof a[i] + '"');
}

Рассмотрим подробнее. Мы создали массив а, элементами которого являются значения разных типов. Другими словами, наш массив смешанный. Далее (на строке 9) мы инициализируем непосредственно сам цикл for. Круглые скобки этого цикла можно условно разделить на три части:

В синей рамке, как бы первой частью в круглых скобочках, мы создаем переменную i со значением 0. В наших предыдущих примерах c while(...) {...} и do{...} while(...) переменная выполняющая аналогичную роль была вынесена из тела самих циклов. В случае с for как видите она включена непосредственно в цикл.

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

В зеленой рамке (третья часть в круглых скобках) расположилась операция, которую необходимо производить каждую итерацию цикла. В нашем случае каждую операцию значение переменной i будет увеличиваться на единицу с помощью инкремента i++;

Наконец сам код, который должен выполняться в цикле for расположился на 11 строчке кода и имеет вид alert('элемент "' + a[i] + '" имеет тип "' + typeof a[i] + '"'); На первый взгляд может показаться немного путанным, но на самом деле ничего сложного в нем нет. Есть три строки: |элемент "|, |" имеет тип "| и |"| (Специально заменил кавычки на вертикальные слеши и выделил значения жирным, чтобы Вы не запутались что именно лежит в строке). Эти строки складываются с a[i], которая как мы знаем из прошлого урока выводит нам элемент массива, порядковый номер которого совпадаю со значением переменной i в данный период времени. Ну и не трудно догадаться что typeof a[i] возвращает нам тип текущего элемента массива. Давайте посмотрим в браузере что же у нас вышло:

Как видим мы вывели сообщения где указывается значение и тип текущего элемента массива а.

Таким образом мы рассмотрели три основных цикла, использующихся в JavaScript'e. Что нам еще требуется знать о циклах для полноты картины? Две вещи:

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

Как мы можем реализовать эти два пункта?

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

Рассмотрим на просто примере:

// Цикл for
var a = [
    1,
    'привет',
    true,
    undefined
    ];

for(var i = 0; i < a.length; i++) {

    if(i == 3) {
        alert('сработал break');
        break;
    }

    alert('элемент "' + a[i] + '" имеет тип "' + typeof a[i] + '"');
}

Это код из предыдущего примера с небольшим дополнением. Обратите внимание на условный оператор в красной рамке. В условии этого оператора стоит сравнение i == 3, то есть пока значение переменной i не будет равно трём, код с break'ом выполнятся не будет, ну а как только значение i станет 3 этот код сработает, о чем сообщит нам с помощью alert('сработал break');. После этого alert('элемент "' + a[i] + '" имеет тип "' + typeof a[i] + '"'); для четвертого элемента массива a со значением "undefined" уже не отработает. Давайте проверим:

Как видим цикл for совершает итерации ровно до того момента пока инкремент i++ не присвоит переменной i значение 3. Сразу после этого присвоения срабатывает условный оператор в теле которого расположился наш break и уже после этого никаких других сообщений не вывелось, хотя цикл for не закончил перебор значений в массиве полностью.

Пункт № 2:

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

Этот пункт выполняется с помощью оператора continue. Смысл работы этого оператора такой же, как и у break. Только break полностью прекращает работу цикла, а continue прекращает выполнения конкретной итерации и сразу же приступает к выполнению следующей. Рассмотрим на примере:

// Цикл for + continue
var a = [
    1,
    'привет',
    true,
    undefined
    ];

for(var i = 0; i < a.length; i++) {

    if(i == 1) {
        alert('сработал continue \
            и итерация со элементом массива "привет" \
            будет пропущена');
        continue;
    }

    alert('элемент "' + a[i] + '" имеет тип "' + typeof a[i] + '"');
}

Почти тот же самый пример кода. Только на месте оператора break теперь расположился оператор continue. Суть точно такая же. Как только условие if(i == 1) выполнится, а произойдет это когда инкремент i++ сменить значение 0 на 1 (то есть на второй итерации цикла), сразу же сработает оператор continue. Итерация, которая должна была нам выдать сообщение о втором элементе массива ('привет’) будет пропущена, и цикл for сразу же перейдет к исполнению следующей итерации (связанной с третьим элементом массива - true). Давайте проверим:

В этот раз цикл for выполнился до конца, в отличие от примера с оператором break. Как мы и предполагали операция со строковым элементом массива - "привет" была пропущена, благодаря использованию оператора continue.

А на сегодня все.

Ссылки на предыдущие уроки:

do {
Урок 1, Урок 2, Урок 3, Урок 4, Урок 5, Урок 6, Урок 7, Урок 8, Урок 9, Урок 10, Урок 11, Урок 12, Урок 13, Урок 14, Урок 15, Урок 16
} while (интересно)