JavaScript Урок №6 (циклы)
В конце статьи разместил видео, где показал несколько примеров.
Циклы используются для того, чтобы некоторый участок кода выполнился несколько раз подряд.
Зачем это нужно - представьте, что вам нужно возвести в квадрат 1000 элементов массива. Если обращаться к каждому элементу отдельно по его ключу - это займет 1000 строчек кода, и для того, чтобы написать этого код, нужно будет потратить довольно много времени.
В javaScript это делается с помощью циклов, который за тебя напишет эти 1000 строк и выполнит поставленную задачу.
Цикл while
имеет следующий синтаксис:
Цикл закончится, когда выражение перестанет быть истинным. Если оно было ложным изначально - то он не выполнится ни разу!
В принципе, цикл while может выполняться бесконечно (но это приведет к зависанию скрипта!), достаточно передать ему выражение, которое никогда не станет ложным.
Например, цикл ниже выводит i, пока i < 5:
Цикл выводит 0, затем 1, затем 2
Одно выполнение тела цикла по-научному называется итерация. Цикл в примере выше совершает три итерации.
Если бы строка i++ отсутствовала в примере выше, то цикл бы повторялся (в теории) вечно.
Цикл do…while
Синтаксис:
Цикл сначала выполнит тело, а затем проверит условие condition, и пока его значение равно true, он будет выполняться снова и снова.
Пример:
Такая форма синтаксиса оправдана, если вы хотите, чтобы тело цикла выполнилось хотя бы один раз, даже если условие окажется ложным.
Цикл for
Цикл for является альтернативой while. Он более сложен для понимания, но чаще всего его любят больше, чем while за то, что он занимает меньше строчек.
Начальные команды - это то, что выполнится перед стартом цикла. Они выполнятся только один раз. Обычно там размещают начальные значения счетчиков, пример: i = 0.
Условие окончания цикла - пока оно истинное, цикл будет работать, пример: i < 10.
Команды после прохода цикла - это команды, которые будут выполнятся каждый раз при окончании прохода цикла. Обычно там увеличивают счетчики, например: i ++.
Пример:
выведет 0, 1, 2... 9
В начале цикла i будет равно нулю, цикл будет выполнятся пока i < 10, после каждого прохода к i прибавляется единица.
Несколько команд в цикле for
Если нам необходимо выполнить несколько команд в круглых скобках - указываем их через запятую:
Давайте разберем приведенный цикл: до прохода цикла выполнятся две команды: let i = 0, j = 2 (обратите внимание на то, что let тут пишется один раз), а после каждой итерации - целых три: i++, j++, i = i + j.
Этот пример с точки зрения программирования никакой особой пользы не несет, просто схематически показывает, что так можно делать. Запомните его, и попробуйте написать его самостоятельно по памяти, в дальнейшем это вам пригодится.
Цикл for для массивов
С помощью цикла for можно последовательно перебрать элементы массива. Делается это следующим образом:
Выведет 1, 2, 3, 4, 5
length– это cвойство length объекта (длинна), который является экземпляром типа Array , устанавливает или возвращает число элементов этого массива.
Задача
Дан массив с элементами [0, 8, 9, 12, 15]. С помощью цикла for выведите все эти элементы с помощью document.write().
Пример задачи на сложение с циклом for
Дан массив с элементами [2, 3, 4, 5]. С помощью цикла for найдите сумму элементов этого массива.
Решение:
Задача
Дан массив с элементами [1, 2, 3, 4, 5]. С помощью цикла for выведите все эти элементы на экран.
Цикл for-in
Для перебора объекта используется так называемый цикл for-in. Давайте посмотрим, как он работает.
Пусть у нас есть такой объект:
let obj = { Коля: 200, Вася: 300, Петя: 400 };
Давайте выведем его ключи. Для этого используем такую конструкцию:
for ( let key in obj ),
где obj - это объект, который мы перебираем, а key - это переменная, в которую последовательно будут сохраняться ключи объекта (ее название может быть любым, какое придумаете - такое и будет).
Решение задачи c циклом for-in:
Выведет Коля , Вася, Петя
Если нам нужны не ключи, а значения, нужно обратиться к нашему объекту по ключу, вот так: obj[key].
Как это работает: в переменной key сначала будет 'Коля', то есть obj[key] в данном случае все равно, что obj['Коля'], при следующем проходе цикла в переменной key будет 'Вася' и так далее.
Задача
Дан объект obj. С помощью цикла for-in выведите на экран ключи и элементы этого объекта.
const obj = {
green: 'зеленый',
red: 'красный',
blue: 'голубой’
}
Инструкция break
Есть ситуации, когда условие, по которому нужно прерваться, находится не в начале или конце цикла, а посередине.
Прерывание можно сделать с помощью инструкции break - если выполнение цикла дойдет до нее, цикл закончит свою работу.
Давайте решим приведенную выше задачу - оборвем цикл, как только нам встретится число 3:
const arr = [1, 2, 3, 4, 5];
Еще пример инструкции break
Следующий код подсчитывает сумму вводимых чисел до тех пор, пока посетитель их вводит, а затем – выдаёт:
Инструкция continue
Директива continue – «облегчённая версия» break. При её выполнении цикл не прерывается, а переходит к следующей итерации (если условие все ещё равно true).
Её используют, если понятно, что на текущем повторе цикла делать больше нечего.
Пример с continue
Выводим только нечётные значения от 0 до 10:
Для чётных значений i, директива continue прекращает выполнение тела цикла и передаёт управление на следующую итерацию for (со следующим числом). Таким образом alert вызывается только для нечётных значений.
Задачи
- Используя цикл for и continue выведите чётные числа от 3 до 30.
- Составьте массив дней недели. С помощью цикла for выведите все дни недели, выходные дни сделайте курсивом.
- В объекте student есть с ключи Николай, Илья, Сергей со значениями '100', '600', '700'. С помощью цикла for-in выведите на экран строки формата: 'Илья - зарплата 700 долларов.'.
Видео с наглядными примерами: