Циклы for в JavaScript
Циклы используются в программировании для автоматизации повторяющихся задач. Основными типами циклов в JavaScript являются while и do…while.
Читайте также: Использование циклов while и do…while в JavaScript
Поскольку while и do…while основаны на условиях, они выполняются, когда заданный оператор оценивается как true. Оператор for также основан на условиях, но он предоставляет дополнительные функции, такие как счетчик цикла, позволяющий заранее установить количество итераций цикла.
Данный мануал научит вас использовать циклы for, for…of и for…in, которые являются неотъемлемыми элементами программирования в JavaScript.
Циклы for
Цикл for может использовать до трех опциональных выражений для повторного выполнения блока кода.
Рассмотрим синтаксис цикла.
for (инициализация; условие; финальное выражение) {
// код, который нужно выполнить
}
- Инициализация (если указано) запускает счетчик и объявляет переменные.
- Далее обрабатывается условие. Если оно истинно, программа выполнит последующий код; если оно ложно, цикл прервется.
- Затем обрабатывается код, который нужно выполнить.
- Если указано финальное выражение, оно обновляется, после чего цикл возвращается к обработке условия.
Чтобы понять, как это работает, рассмотрим базовый пример.
// Initialize a for statement with 5 iterations
for (let i = 0; i < 4; i++) {
// Print each iteration to the console
console.log(i);
}
Если запустить этот код, вы получите такой результат:
0
1
2
3
В приведенном выше примере цикл for начинается с переменной let i = 0, которая запустит цикл со значения 0. В цикле задано условие i < 4, а это означает, что до тех пор, пока значение i меньше 4, цикл будет продолжать работу. Финальное выражение i++ определяет счетчик для каждой итерации цикла. console.log(i) выводит числа, начиная с 0, и останавливается, как только i равняется 4.
Без цикла код, выполняющий те же действия, был бы таким:
// Set initial variable to 0
let i = 0;
// Manually increment variable by 1 four times
console.log(i++);
console.log(i++);
console.log(i++);
console.log(i++);
Без цикла блок кода состоит из большего количества строк. Чтобы увеличить количество чисел, пришлось бы внести в код еще больше строк.
Давайте рассмотрим каждое выражение в цикле.
Инициализация
Первое выражение в цикле – инициализация.
let i = 0;
Оно объявляет переменную i с помощью ключевого слова let (также можно использовать ключевое слово var) и присваивет ей значение 0. Вы можете использовать в циклах любые имена переменных, но переменная i ассоциируется со словом «итерация» (iteration) и не перегружает код.
Условие
Как и циклы while и do…while, циклы for обычно имеют условие. В данном примере это:
i < 4;
Это значит, что выражение оценивается как истинное, пока значение i меньше 4.
Финальное выражение
Это выражение, которое выполняется в конце каждого цикла. Чаще всего оно используется для увеличения или уменьшения значения переменной, но его можно использовать и для других целей.
i++
В данном примере цикл увеличивает переменную на единицу. Выражение i++ делает то же самое, что и i = i + 1.
В отличие от начала и условия, финальное выражение не заканчивается точкой с запятой.
Тело цикла
Теперь вы знаете все компоненты цикла for. Взглянем на код еще раз.
// Initialize a for statement with 5 iterations
for (let i = 0; i < 4; i++) {
console.log(i);
}
Первое выражение задает исходное значение переменной (0), второе определяет условие (цикл выполняется, пока i меньше 4), а третье – задает шаг каждой итерации (в данном случае значение будет увеличиваться на 1).
Консоль будет выводить значения: 0, 1, 2 и 3. Затем цикл прервется.
Опциональные выражения
Все тир выражения цикла for опциональны. К примеру, вы можете написать такой же цикл for, но пропустить инициализацию и инициализировать переменную вне цикла.
// Declare variable outside the loop
let i = 0;
// Initialize the loop
for (; i < 4; i++) {
console.log(i);
}
0
1
2
3
В данном случае первый символ точки с запятой указывает, что начало пропущено.
Примечание: Даже если вы не используете одно из выражений, необходимо ставить точку с запятой, иначе цикл будет интерпретирован неверно.
Также для примера можно убрать из цикла условие. Чтобы цикл остановился после того, как значение переменной станет больше 3, используйте if и break.
// Declare variable outside the loop
let i = 0;
// Omit initialization and condition
for (; ; i++) {
if (i > 3) {
break;
}
console.log(i);
}
0
1
2
3
Важно! В циклах без условия обязательно нужно использовать оператор break. Иначе цикл не сможет прерваться (такие циклы называются бесконечными) и станет причиной сбоя браузера.
Читайте также: Использование циклов while и do…while в JavaScript
Также из цикла можно удалить финальное выражение. Шаг можно указать в конце кода цикла. При этом нужно обязательно оставить в скобках оба символа «;», иначе цикл не будет работать.
// Declare variable outside the loop
let i = 0;
// Omit all statements
for (; ;) {
if (i > 3) {
break;
}
console.log(i);
i++;
}
0
1
2
3
Как видите, выражения цикла позволяют получить наиболее сжатый и удобочитаемый код.
Изменение массивов
Цикл for можно использовать для изменения массивов.
Читайте также: Работа с массивами в JavaScript
В следующем примере показано, как создать пустой массив и заполнить его переменными с помощью счетчика цикла. Создайте файл modifyArray.js и добавьте в него такой код:
// Initialize empty array
let arrayExample = [];
// Initialize loop to run 3 times
for (let i = 0; i < 3; i++) {
// Update array with variable value
arrayExample.push(i);
console.log(arrayExample);
}
Запустите программу. Она выведет:
[ 0 ]
[ 0, 1 ]
[ 0, 1, 2 ]
Заданный цикл выполняется до тех пор, пока i < 3 перестанет быть истинным. Массив arrayExample выводится в консоль в конце каждой итерации. Так вы можете увидеть, как массив пополняется новыми значениями.
Длина массива
Иногда цикл должен выполниться несколько раз, но определить необходимое количество итераций сложно. Вместо того чтобы объявлять количество итераций, как это было в предыдущих примерах, можно использовать свойство length, чтобы цикл выполнялся столько раз, сколько элементов в массиве.
// Declare array with 3 items
let fish = [ "flounder", "salmon", "pike" ];
// Initalize for loop to run for the total length of an array
for (let i = 0; i < fish.length; i++) {
// Print each item to the console
console.log(fish[i]);
}
Такая программа выдаст результат:
flounder
salmon
pike
Этот цикл перебирает каждый индекс массива с помощью fish[i]. Это приводит к динамическому обновлению индекса при каждой итерации.
Читайте также: Циклы for на Mozilla Developer Network
Циклы for…in
Цикл for…in выполняет итерацию по свойствам объекта. Для примера создайте простой объект с несколькими свойствами типа «ключ:значение».
const shark = {
species: "great white",
color: "white",
numberOfTeeth: Infinity
}
С помощью цикла for…in можно получить доступ к любому из свойств объекта.
// Print property names of object
for (attribute in shark) {
console.log(attribute);
}
species
color
numberOfTeeth
Также можно получить доступ к значениям каждого свойства, используя имя свойства в качестве индекса.
// Print property values of object
for (attribute in shark) {
console.log(shark[attribute]);
}
great white
white
Infinity
В результате можно получить доступ ко всем ключам и значениям объекта.
// Print names and values of object properties
for (attribute in shark) {
console.log(`${attribute}`.toUpperCase() + `: ${shark[attribute]}`);
}
SPECIES: great white
COLOR: white
NUMBEROFTEETH: Infinity
Метод toUpperCase() может изменять имя свойства.
Читайте также: Циклы for…in на Mozilla Developer Network
Циклы for…of
Цикл for…in проходит по всем свойствам объекта, но для перебора итерируемых объектов (массивов или строк) нужно использовать цикл for…of. Он является новой функцией ECMAScript 6. ECMAScript (или ES) – это спецификация языка сценариев для стандартизации JavaScript.
В этом примере нужно создать массив и перебрать его с помощью цикла for…of.
// Initialize array of shark species
let sharks = [ "great white", "tiger", "hammerhead" ];
// Print out each type of shark
for (let shark of sharks) {
console.log(shark);
Программа выведет в консоль:
great white
tiger
hammerhead
Также можно вывести индекс элементов. Для этого существует метод entries().
...
// Loop through both index and element
for (let [index, shark] of sharks.entries()) {
console.log(index, shark);
}
0 'great white'
1 'tiger'
2 'hammerhead'
Этот цикл может итерировать строки. Это делается так же, как итерация по массиву.
// Assign string to a variable
let sharkString = "sharks";
// Iterate through each index in the string
for (let shark of sharkString) {
console.log(shark);
}
s
h
a
r
k
s
В этом случае цикл перебирает каждый символ в строке и последовательно выводит их.
Читайте также: Циклы for…of на Mozilla Developer Network.
Заключение
Циклы являются неотъемлемой частью программирования в JavaScript. Они используются для автоматизации повторяющихся задач и создания более краткого и удобочитаемого кода.
Теперь вы умеете строить циклы for, for…of и for…in.
Tags: Javascript