Что такое for в javascript

Цикл for — это конструкция, повторяющая одно и то же действие несколько раз

f or ( let i = 0 ; i 10 ; i += 1 ) <
console . log ( ‘i: ‘ , i);
>

let i = 0 — это блок объявления и инициализации переменной цикла

i — условие дальнейшего выполнения цикла for. Если условие равно true, то цикл выполняется.

i += 1 — увеличение переменной цикла

Алгоритм работы цикла for:

1. Объявления и инициализации переменной цикла

2. Проверка условия, если оно истинно (равно true), то цикл выполняется

3. Выполнения кода, находящегося в блоке цикла for

4. Увеличение переменной цикла

5. Проверка условия (повторение пункта 2)

6. Выполнения кода, находящегося в блоке цикла for (повторение пункта 3)

7. Увеличение переменной цикла (повторение пункта 4)

8. Проверка условия (повторение пункта 2)

И так далее, пока условие не станет равно false

Что такое блок кода?

Напомню, что блок кода — это все, что находится внутри фигурных скобок, например:

<
console . log ( ‘Я нахожусь в блоке кода’ );
>

if ( true ) <
console . log ( ‘Я нахожусь в блоке кода условного оператора’ );
>

f or ( let i = 0 ; i 2 ; i += 1 ) <
console . log ( ‘Я буду печататься в консоли дважды и я тоже в блоке, в блоке цикла for’ );
>

Примеры цикла for:

f or ( let i = 5 ; i 10 ; i += 1 ) <
console . log ( ‘i: ‘ , i);
>

f or ( let i = 6 ; i 20 ; i += 3 ) <
console . log ( ‘i: ‘ , i);
>

f or ( let i = 20 ; i > 5 ; i -= 1 ) <
console . log ( ‘i: ‘ , i);
>

f or ( let i = 100 ; i > 60 ; i -= 10 ) <
console . log ( ‘i: ‘ , i);
>

Массивы

Массив — это непрерывная динамическая коллекция элементов. Объявление и инициализация пустого массива выглядит так:

Пример числового массива:

var myarray = [ 1 , 2 , 4 , 8 , 16 ];

Пример строкого массива:

var myarray = [ ‘hello’ , ‘world’ , ‘i’ , ‘love’ , ‘JS’ ];

Пример смешанного массива:

var myarray = [ 1 , ‘hello world’ , true , null , undefined , [ 1 , 2 , false , false ]];

Длина массива

С помощью свойства length мы можем получить длину массива.

console . log ( ‘myarray.length: ‘ , myarray.length);

Индексация массива

Индекс — это порядковый номер элемента в массиве. Нумерация индексов начинается с нуля. Приведу пример:

var numbers = [ 90 , 12 , 67 , 15 , 81 ];
console . log ( ‘numbers: ‘ , numbers);
console . log ( ‘numbers.length: ‘ , numbers.length);
console . log ( ‘numbers[0]: ‘ , numbers[ 0 ]);
console . log ( ‘numbers[1]: ‘ , numbers[ 1 ]);
console . log ( ‘numbers[2]: ‘ , numbers[ 2 ]);
console . log ( ‘numbers[3]: ‘ , numbers[ 3 ]);
console . log ( ‘numbers[4]: ‘ , numbers[ 4 ]);
console . log ( ‘numbers[5]: ‘ , numbers[ 5 ]);
console . log ( ‘numbers[6]: ‘ , numbers[ 6 ]);
console . log ( ‘numbers[7]: ‘ , numbers[ 7 ]);
// numbers: [90, 12, 67, 15, 81]
// numbers.length: 5
// numbers[0]: 90
// numbers[1]: 12
// numbers[2]: 67
// numbers[3]: 15
// numbers[4]: 81
// numbers[5]: undefined
// numbers[6]: undefined
// numbers[7]: undefined

В JS при обращении к несуществующему элементу массива по индексу выведется undefined

Методы для работы с массивами (Добавление и удаление)

var numbers = [ 90 , 12 , 67 , 15 , 81 ];
console . log ( ‘Добавляем число 666 в конец массива’ );
numbers.push( 666 );
console . log ( ‘numbers: ‘ , numbers);
console . log ( ‘numbers.length: ‘ , numbers.length);
// numbers: [90, 12, 67, 15, 81, 666]
// numbers.length: 6
console . log ( ‘Удаляем последний элемент и присваиваем его значение в переменную poped’ );
var poped = numbers. pop ();
console . log ( ‘poped: ‘ , poped);
console . log ( ‘numbers: ‘ , numbers);
console . log ( ‘numbers.length: ‘ , numbers.length);
// poped: 666
// numbers: [90, 12, 67, 15, 81]
// numbers.length: 5
console . log ( ‘Удаляем первый элемент и присваиваем его значение в переменную shifted’ );
var shifted = numbers.shift();
console . log ( ‘shifted: ‘ , shifted);
console . log ( ‘numbers: ‘ , numbers);
console . log ( ‘numbers.length: ‘ , numbers.length);
// shifted: 666
// numbers: [12, 67, 15, 81]
// numbers.length: 4
console . log ( ‘Добавляем число 1234 в начало массива’ );
numbers.unshift( 1234 );
console . log ( ‘numbers: ‘ , numbers);
console . log ( ‘numbers.length: ‘ , numbers.length);
// numbers: [1234, 12, 67, 15, 81]
// numbers.length: 5
console . log ( ‘Добавляем число 1234 в начало массива’ );
numbers.unshift( 9876 );
console . log ( ‘numbers: ‘ , numbers);
console . log ( ‘numbers.length: ‘ , numbers.length);
// numbers: [9876, 1234, 12, 67, 15, 81]
// numbers.length: 6

Примеры решения задач

// Сумма последовательности чисел от 0 до n
var n = parseInt (Math. random () * 10 ),
s = 0 ; // Переменная для хранения суммы
f or ( let i = 1 ; i n + 1 ; ++ i) <
s += i;
>
console . log ( ‘Сумма равна: ‘ + s);

// Сумма последовательности чисел от k до n
var n = parseInt (Math. random () * 20 ),
k = parseInt (Math. random () * 5 ),
s = 0 ; // Переменная для хранения суммы
f or ( let i = k; i n + 1 ; ++ i) <
s += i;
>
console . log ( ‘Сумма равна: ‘ + s);

// Сумма последовательности ЧЕТНЫХ чисел от k до n
var n = parseInt (Math. random () * 20 ),
k = parseInt (Math. random () * 5 ),
s = 0 ; // Переменная для хранения суммы
f or ( let i = k; i n + 1 ; ++ i) <
if (i % 2 == 0 ) <
s += i;
>
>
console . log ( ‘Сумма четных чисел равна: ‘ + s);

// Факториал числа n
// Факториалом называется произведение чисел от 1 до n.
// Пример: 5! = 1*2*3*4*5
// Пример: 7! = 1*2*3*4*5*6*7
var n = parseInt (Math. random () * 10 ),
factorial = 1 ; // Переменная для хранения факториала
f or ( let i = k; i n + 1 ; ++ i) <
factorial *= i;
>
console . log ( ‘Факториал числа n равен: ‘ + factorial);

Решение задач

1. Вывести числа от 0 до 10 и добавить их в массив.

2. Удалить все добавленнные числа с помощью метода pop.

3. Вывести числа от 0 до n и добавить их в массив, где n — это случайное число.

4. Удалить все добавленные числа с помощью метода shift

5. Вывести нечетные числа в диапазона от 0 до n (диапазон — это последовательность чисел от 0 до n) и добавить их в массив

6. Создать массив из чисел от 0 до n. Удалить и вывести только четные числа.

7. Вывести числа, делящиеся на три без остатка, в диапазоне от 0 до n.

8. Вывести числа, делящиеся на три или на семь без остатка, в диапазоне от 0 до n.

9. Найти сумму всех чисел, делящихся на 3, от 1 до n.

10. Найти сумму нечетных чисел от 1 до n.

11. Даны два целых числа a и b a 12. Дано целое число n. Найти сумму 1 + 1/2 + 1/3 + . + 1/n

Циклы while и for

При написании скриптов зачастую встаёт задача сделать однотипное действие много раз.

Например, вывести товары из списка один за другим. Или просто перебрать все числа от 1 до 10 и для каждого выполнить одинаковый код.

Для многократного повторения одного участка кода предусмотрены циклы.

Небольшое объявление для продвинутых читателей.

В этой статье рассматриваются только базовые циклы: while , do..while и for(..;..;..) .

Если вы пришли к этой статье в поисках других типов циклов, вот указатели:

См. for…in для перебора свойств объекта.
См. for…of и Перебираемые объекты для перебора массивов и перебираемых объектов.

В противном случае, продолжайте читать.

Цикл «while»

Цикл while имеет следующий синтаксис:

Код из тела цикла выполняется, пока условие condition истинно.

Например, цикл ниже выводит i , пока i < 3 :

Одно выполнение тела цикла по-научному называется итерация. Цикл в примере выше совершает три итерации.

Если бы строка i++ отсутствовала в примере выше, то цикл бы повторялся (в теории) вечно. На практике, конечно, браузер не позволит такому случиться, он предоставит пользователю возможность остановить «подвисший» скрипт, а JavaScript на стороне сервера придётся «убить» процесс.

Любое выражение или переменная может быть условием цикла, а не только сравнение: условие while вычисляется и преобразуется в логическое значение.

Например, while (i) – более краткий вариант while (i != 0) :

Если тело цикла состоит лишь из одной инструкции, мы можем опустить фигурные скобки <…>:

Цикл «do…while»

Проверку условия можно разместить под телом цикла, используя специальный синтаксис do..while :

Цикл сначала выполнит тело, а затем проверит условие condition , и пока его значение равно true , он будет выполняться снова и снова.

Такая форма синтаксиса оправдана, если вы хотите, чтобы тело цикла выполнилось хотя бы один раз, даже если условие окажется ложным. На практике чаще используется форма с предусловием: while(…) <…>.

Цикл «for»

Более сложный, но при этом самый распространённый цикл — цикл for .

Выглядит он так:

Давайте разберёмся, что означает каждая часть, на примере. Цикл ниже выполняет alert(i) для i от 0 до (но не включая) 3 :

Рассмотрим конструкцию for подробней:

часть
начало	let i = 0	Выполняется один раз при входе в цикл
условие	i < 3	Проверяется перед каждой итерацией цикла. Если оно вычислится в false , цикл остановится.
тело	alert(i)	Выполняется снова и снова, пока условие вычисляется в true .
шаг	i++	Выполняется после тела цикла на каждой итерации перед проверкой условия.

В целом, алгоритм работы цикла выглядит следующим образом:

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

Если тема циклов для вас нова, может быть полезным вернуться к примеру выше и воспроизвести его работу на листе бумаги, шаг за шагом.

Вот в точности то, что происходит в нашем случае:

В примере переменная счётчика i была объявлена прямо в цикле. Это так называемое «встроенное» объявление переменной. Такие переменные существуют только внутри цикла.

Вместо объявления новой переменной мы можем использовать уже существующую:

Пропуск частей «for»

Любая часть for может быть пропущена.

Для примера, мы можем пропустить начало если нам ничего не нужно делать перед стартом цикла.

Можно убрать и шаг :

Это сделает цикл аналогичным while (i < 3) .

А можно и вообще убрать всё, получив бесконечный цикл:

При этом сами точки с запятой ; обязательно должны присутствовать, иначе будет ошибка синтаксиса.

Прерывание цикла: «break»

Обычно цикл завершается при вычислении условия в false .

Но мы можем выйти из цикла в любой момент с помощью специальной директивы break .

Например, следующий код подсчитывает сумму вводимых чисел до тех пор, пока посетитель их вводит, а затем – выдаёт:

Директива break в строке (*) полностью прекращает выполнение цикла и передаёт управление на строку за его телом, то есть на alert .

Вообще, сочетание «бесконечный цикл + break » – отличная штука для тех ситуаций, когда условие, по которому нужно прерваться, находится не в начале или конце цикла, а посередине или даже в нескольких местах его тела.

Переход к следующей итерации: continue

Директива continue – «облегчённая версия» break . При её выполнении цикл не прерывается, а переходит к следующей итерации (если условие все ещё равно true ).

Её используют, если понятно, что на текущем повторе цикла делать больше нечего.

Например, цикл ниже использует continue , чтобы выводить только нечётные значения:

Для чётных значений i , директива continue прекращает выполнение тела цикла и передаёт управление на следующую итерацию for (со следующим числом). Таким образом alert вызывается только для нечётных значений.

Цикл, который обрабатывает только нечётные значения, мог бы выглядеть так:

С технической точки зрения он полностью идентичен. Действительно, вместо continue можно просто завернуть действия в блок if .

Однако мы получили дополнительный уровень вложенности фигурных скобок. Если код внутри if более длинный, то это ухудшает читаемость, в отличие от варианта с continue .

Обратите внимание, что эти синтаксические конструкции не являются выражениями и не могут быть использованы с тернарным оператором ? . В частности, использование таких директив, как break/continue , вызовет ошибку.

Например, если мы возьмём этот код:

…и перепишем его, используя вопросительный знак:

…то будет синтаксическая ошибка.

Это ещё один повод не использовать оператор вопросительного знака ? вместо if .

Метки для break/continue

Бывает, нужно выйти одновременно из нескольких уровней цикла сразу.

Например, в коде ниже мы проходимся циклами по i и j , запрашивая с помощью prompt координаты (i, j) с (0,0) до (2,2) :

Нам нужен способ остановить выполнение, если пользователь отменит ввод.

Обычный break после input лишь прервёт внутренний цикл, но этого недостаточно. Достичь желаемого поведения можно с помощью меток.

Метка имеет вид идентификатора с двоеточием перед циклом:

Вызов break <labelName> в цикле ниже ищет ближайший внешний цикл с такой меткой и переходит в его конец.

В примере выше это означает, что вызовом break outer будет разорван внешний цикл до метки с именем outer .

Таким образом управление перейдёт со строки, помеченной (*) , к alert(‘Готово!’) .

Можно размещать метку на отдельной строке:

Директива continue также может быть использована с меткой. В этом случае управление перейдёт на следующую итерацию цикла с меткой.

Метки не дают возможности передавать управление в произвольное место кода.

Например, нет возможности сделать следующее:

Директива break должна находиться внутри блока кода. Технически, подойдет любой маркированный блок кода, например:

…Хотя в 99.9% случаев break используется внутри циклов, как мы видели в примерах выше.

К слову, continue возможно только внутри цикла.

Итого

Мы рассмотрели 3 вида циклов:

while – Проверяет условие перед каждой итерацией.
do..while – Проверяет условие после каждой итерации.
for (;;) – Проверяет условие перед каждой итерацией, есть возможность задать дополнительные настройки.

Чтобы организовать бесконечный цикл, используют конструкцию while (true) . При этом он, как и любой другой цикл, может быть прерван директивой break .

Если на данной итерации цикла делать больше ничего не надо, но полностью прекращать цикл не следует – используют директиву continue .

Обе этих директивы поддерживают метки, которые ставятся перед циклом. Метки – единственный способ для break/continue выйти за пределы текущего цикла, повлиять на выполнение внешнего.

Заметим, что метки не позволяют прыгнуть в произвольное место кода, в JavaScript нет такой возможности.

JavaScript For Loop

Loops are handy, if you want to run the same code over and over again, each time with a different value.

Often this is the case when working with arrays:

Instead of writing:

You can write:

Different Kinds of Loops

JavaScript supports different kinds of loops:

for — loops through a block of code a number of times
for/in — loops through the properties of an object
for/of — loops through the values of an iterable object
while — loops through a block of code while a specified condition is true
do/while — also loops through a block of code while a specified condition is true

The For Loop

The for statement creates a loop with 3 optional expressions:

Expression 1 is executed (one time) before the execution of the code block.

Expression 2 defines the condition for executing the code block.

Expression 3 is executed (every time) after the code block has been executed.

Example

From the example above, you can read:

Expression 1 sets a variable before the loop starts (let i = 0).

Expression 2 defines the condition for the loop to run (i must be less than 5).

Expression 3 increases a value (i++) each time the code block in the loop has been executed.

Expression 1

Normally you will use expression 1 to initialize the variable used in the loop (let i = 0).

This is not always the case. JavaScript doesn’t care. Expression 1 is optional.

You can initiate many values in expression 1 (separated by comma):

Example

And you can omit expression 1 (like when your values are set before the loop starts):

Example

Expression 2

Often expression 2 is used to evaluate the condition of the initial variable.

This is not always the case. JavaScript doesn’t care. Expression 2 is also optional.

If expression 2 returns true, the loop will start over again. If it returns false, the loop will end.

If you omit expression 2, you must provide a break inside the loop. Otherwise the loop will never end. This will crash your browser. Read about breaks in a later chapter of this tutorial.

Expression 3

Often expression 3 increments the value of the initial variable.

This is not always the case. JavaScript doesn’t care. Expression 3 is optional.

Expression 3 can do anything like negative increment (i—), positive increment (i = i + 15), or anything else.

Expression 3 can also be omitted (like when you increment your values inside the loop):