Циклы в javascript

Управление временным континуумом с Node.js

API Node.js предоставляет несколько способов планирования кода, который нужно
выполнить, в какой-то момент в будущем. Приведенные ниже функции могут показатья знакомыми, так как
они доступны в большинстве браузеров, но Node.js на самом деле предоставляет
свою реализацию этих методов. Таймеры очень тесно интегрируются с системой, и, несмотря на то,
что API Node.js отражает API браузера, все равно имеются некоторые различия в реализации.

«Когда я скажу» Выполнение ~

может использоваться для планирования выполнения кода после назначенного
количества миллисекунд. Эта функция аналогична из JavaScript API браузера, однако строка кода не может передаваться
в качестве аргумента для выполнения.

первым параметром принимает функцию, которую нужно выполнить, и задержку в миллисекундах,
как число, в качестве второго параметра. Также можно перечислить дополнительные аргументы и они
будут переданы функции. Вот пример этого:

Функция выполнится через время, максимально приближенное к
1500 миллисекундам (или 1.5 секунды), из-за вызова .

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

возвращает объект , который можно использовать в качестве ссылки
на тайм-аут, который был установлен. Этот объект можно использовать для отмены тайм-аута (см. ниже), а также для изменения поведения при выполнении (см. ниже).

«Сразу после этого» Выполнение ~

выполнит код в конце текущего цикла событий.
Этот код будет выполняться после любых операций ввода-вывода в текущем цикле событий и
перед любым запланированными таймерами для следующего цикла событий. Такое выполнение кода
можно рассматривать как «сразу после этого», то есть любой код, следующий за вызовом
функции , будет выполняться до аргумента функции .

Первым аргументом будет функция, которую нужно выполнить. Все последующие
аргументы будут переданы функции при ее выполнении. Вот пример:

Функция, переданная в , будет выполнена после того,
как будет выполнен весь исполняемый код, и в консоли мы увидим следующее:

возвращает объект , который можно использовать для отмены
запланированного immediate (см. ниже).

Примечание: Не путайте и . Между ними есть
несколько основных различий. Во-первых, выполнится перед любыми ,
а также перед любыми запланированными операциями ввода/вывода. Во-вторых, не подлежит
отмене, имеется в виду, что после того как вы запланировали выполнение кода с помощью ,
то его выполнение не может быть приостановлено, также как и с обычной функцией. Обратитесь к
, чтобы лучше понять
работу .

«Бесконечный цикл» Выполнение ~

Если у вас есть код, который нужно выполнить несколько раз, то можно использовать
для этого . принимает параметром функцию, которая будет
выполняться бесконечное количество раз с заданным интервалом в миллисекундах, сам интервал передается
вторым параметром. Как и в случае с можно передавать дополнительные аргументы,
эти аргументы будут переданы функции при вызове. Также как и с , задержка не может
быть гарантирована из-за операций, которые могут удерживать цикл событий, следовательно, нужно
рассматривать эту задержку как приблизительную. Смотрите пример ниже:

В примере выше будет выполняться каждые 1500 миллисекунд
или 1.5 секунд, до тех пор, пока ее не остановят (см. ниже).

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

Вложенный цикл в JavaScript

Циклы могут быть вложенными. Пример:

for (var i = 1; i for (var j = 1; j 

Здесь вложенный цикл выделен красным цветом. Этот пример выведет на экран таблицу из 4-х строк и 3-х столбцов:

| 1-1 | 1-2 | 1-3 |
| 2-1 | 2-2 | 2-3 |
| 3-1 | 3-2 | 3-3 |
| 4-1 | 4-2 | 4-3 |

ВНИМАНИЕ! Помните, что инструкция выполняет выход
только из самого внутреннего цикла. То есть если используется во вложенном цикле, то этот цикл прервётся, но внешний цикл будет продолжать работу.. Эта статья — лишь капля в море знаний о JavaScript

Если хотите испить эту чашу до дна, то изучить этот язык, а также jQuery и Ajax можно здесь:

Эта статья — лишь капля в море знаний о JavaScript. Если хотите испить эту чашу до дна, то изучить этот язык, а также jQuery и Ajax можно здесь:

Цикл for…in

Цикл for…in используется для перебора всех свойств из объекта в случайном порядке и имеет следующий синтаксис:

В качестве nеременной (variable) можно подставить имя переменной или инструкцию var, объявляющую одну переменную. Переменной перед началом каждой итерации цикла присваивается в виде строки имя одного из свойств объекта. Как и в цикле for, оператор var здесь не обязателен, но его рекомендуется использовать, чтобы переменная была локальной. Справа от ключевого слова in указывается объект, свойства которого будут перебираться циклом. Если переменная, представляющая объект, будет иметь значение или цикл не выполнится ни разу. И как обычно, инструкция – это инструкция или блок инструкций, образующих тело цикла.

Пример итерации по свойствам объекта:

Выполнить код »
Скрыть результаты

Как отмечалось ранее, если имя свойства хранится в переменной, то обратиться к нему можно только через квадратные скобки (myCar), а не через оператор «точка».

Свойства объектов в JavaScript не упорядочены, поэтому порядок возврата их имен в цикле for…in предсказать сложно. Все перечислимые свойства будут возвращены, но порядок их вывода может зависеть от браузера.

Согласно стандарта ECMAScript, если имя свойства – нечисловая строка, то такие свойства всегда перебираются в том же порядке, в каком присваивались. Так получилось в примере выше при выводе свойств объекта myCar.
С другой стороны, если в качестве имени свойства выступает число или строка, которая может быть преобразована в числовой фомат, то браузеры осуществлят сортировку таких свойств в целях внутренней оптимизации. Вывод таких имен свойств объекта не будет соответствовать их оригинальному расположению.

Symbol.iterator

Мы легко поймём принцип устройства перебираемых объектов, создав один из них.

Например, у нас есть объект. Это не массив, но он выглядит подходящим для .

Например, объект , который представляет собой диапазон чисел:

Чтобы сделать итерируемым (и позволить работать с ним), нам нужно добавить в объект метод с именем (специальный встроенный , созданный как раз для этого).

1. Когда цикл запускается, он вызывает этот метод один раз (или выдаёт ошибку, если метод не найден). Этот метод должен вернуть итератор – объект с методом .
2. Дальше работает только с этим возвращённым объектом.
3. Когда хочет получить следующее значение, он вызывает метод этого объекта.
4. Результат вызова должен иметь вид , где означает, что итерация закончена, в противном случае содержит очередное значение.

Вот полная реализация с пояснениями:

Обратите внимание на ключевую особенность итераторов: разделение ответственности

• У самого нет метода .
• Вместо этого другой объект, так называемый «итератор», создаётся вызовом , и именно его генерирует значения.

Таким образом, итератор отделён от самого итерируемого объекта.

Технически мы можем объединить их и использовать сам как итератор, чтобы упростить код.

Например, вот так:

Теперь возвращает сам объект : у него есть необходимый метод , и он запоминает текущее состояние итерации в . Короче? Да. И иногда такой способ тоже хорош.

Недостаток такого подхода в том, что теперь мы не можем использовать этот объект в двух параллельных циклах : у них будет общее текущее состояние итерации, потому что теперь существует лишь один итератор – сам объект. Но необходимость в двух циклах , выполняемых одновременно, возникает редко, даже при наличии асинхронных операций.

Бесконечные итераторы

Можно сделать бесконечный итератор. Например, будет бесконечным при . Или мы можем создать итерируемый объект, который генерирует бесконечную последовательность псевдослучайных чисел. Это бывает полезно.

Метод не имеет ограничений, он может возвращать всё новые и новые значения, это нормально.

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

Рекурсивный setTimeout

Существует 2 способа запускать что-то регулярно.

• Первый — setInterval.
• Второй — рекурсивный setTimeout.

Например:

Метод setTimeout планирует следующий вызов сразу после окончания текущего (*). Рекурсивный setTimeout является более гибким методом, чем setInterval. С его помощью следующий вызов может задаваться по-разному в зависимости от результатов прошлого.

Например, нужно написать сервис, который отправляет запрос с целью получения данных на сервер каждые пять секунд, однако,если сервер перегружен, то нужно увеличить интервал запросов до 10, 20, 40 секунд… Смотрите псевдокод:

В том случае,если функции, которыемыпланируемявляютсяресурсоемкими и требуют времени, то можно измерить время, требующееся на выполнение, и спланировать дальнейший вызов раньше или позже. Рекурсивный setTimeout позволяет более точно задать задержку между выполнениями, в отличие от setInterval.

Сравним оба фрагмента кода. Первый применяет setInterval:

Второй — рекурсивный setTimeout:

Для setInterval внутренний планировщик будет выполнять func(i) каждые 100 мс:

Реальная задержка между вызовами func посредством setInterval меньше, чем она указана в коде! Это нормально, так как время, затраченное на выполнение func, будет использовать часть указанного интервала времени.

Не исключено, что выполнение func окажется дольше, чем ожидается, и займёт больше 100 мс. В таком случае движок ждет завершения выполнения func, после чего проверяет планировщик и, если время истекло, сразу же запускает его снова.

Взгляните на изображение, показывающее процесс работы рекурсивного setTimeout:

Рекурсивный setTimeout гарантирует фиксированную задержку (в примере 100 мс). Все потому, что новый вызов запланирован в конце предыдущего.

Цикл while

Синтаксис цикла while следующий:

Сначала объявляем переменную i, которая является счётчиком и внутри цикла мы этот счётчик инкрементируем. Внутри круглых скобок пишем условие входа/выхода из цикла.

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

Для примера выведем строку ‘Всем привет!’ 10 раз.

var i = 0;
while(i ');
    i++;
}

Переменная i, может начаться как с 0 так и с 1 или с другого любого числа.

Условие выхода является в тоже время и условием входа. Цикл работает следующим образом: Сначала проверяется если переменная i, меньше 10, и если условие истина, то мы входим в цикл, иначе, нет. В данном случае если переменная i будет равна 30, например, то цикл не выполнится, потому что 30 не меньше 10.

Зашли цикл, вывели строчку ‘Всем привет’, инкрементировали счётчик и опять переходим к условию, где опять проверяем если значение переменной i, меньше 10, то мы входим в цикл, иначе выходим из него. И так происходит до того момента когда условие входа станет лож, то есть значение переменной i будет 10. 10 не меньше 10, поэтому мы уже не входим в цикл, а идём дальше.

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

С циклом while разобрались, теперь перейдём к циклу do-while.

Побитовые операторы

Побитовые операторы работают с 32-разрядными целыми числами (при необходимости приводят к ним), на уровне их внутреннего двоичного представления.

Эти операторы не являются чем-то специфичным для JavaScript, они поддерживаются в большинстве языков программирования.

Поддерживаются следующие побитовые операторы:

• AND(и) ( )
• OR(или) ( )
• XOR(побитовое исключающее или) ( )
• NOT(не) ( )
• LEFT SHIFT(левый сдвиг) ( )
• RIGHT SHIFT(правый сдвиг) ( )
• ZERO-FILL RIGHT SHIFT(правый сдвиг с заполнением нулями) ( )

Они используются редко, когда возникает необходимость оперировать с числами на очень низком (побитовом) уровне. В ближайшем времени они нам не понадобятся, так как веб-разработчики редко к ним прибегают, хотя в некоторых сферах (например, в криптографии) они полезны. Можете прочитать на MDN, когда возникнет реальная необходимость.

Инструкции break и continue

Внутри тела цикла можно использовать специальные инструкции: и .

Инструкция «break» предназначена для прекращения выполнения текущего цикла. Другими словами, она осуществляет выход и передачу управления инструкции, идущей после этого цикла.

Пример, в котором завершим цикл по перебору элементов массива, если его текущий элемент не будет являться числом:

// массив
var arr = ;
// цикл «for» для перебора массива arr
for (var i = 0, length = arr.length; i < length; i++) {
  // если текущий элемент массива не является числом, то...
  if (typeof arr !== 'number') {
    // прерываем выполнение цикла
    break;
  }
  // выводим текущий элемент массива в консоль
  console.log(arr);
}
// в результате в консоль будет выведено: 5, 3

Инструкция «continue» предназначена для прекращения дальнейшего выполнения кода и перехода к следующей итерации цикла.

Пример, в котором найдём в слове «программирование» символы «а» и «о», и выведем их позиции в консоль:

// строка
var str = 'программирование';
// цикл "for" для перебора символов строки
for (var i = 0, length = str.length; i < length; i++) {
  // если текущий символ не равен а и о, то...
  if (str !== 'а' && str !== 'о') {
    // прекращаем выполнение текущей итерации и переходим к следующей
    continue;
  }
  // выведем в консоль сам символ и его индекс
  console.log(i + ' => ' + str);
}
// данный цикл выведет в консоль: 2 => "о", 5 => "а", 10 => "о", 12 => "а"

Метки для break и continue

Метка представляет собой идентификатором с двоеточием, который необходимо указать перед циклом.

someLabel: while (условие) {
  // текло цикла
}

Далее после оператора или необходимо указать эту метку:

someLabel: while (условие) {
  if (условие) {
    break someLabel;
  }
}

Вызов приведёт к переходу в конец цикла, перед которым данная метка указана.

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

В коде с одиночным циклом использование метки не даст никакого результата. Её есть смысл использовать только когда вам нужно выйти сразу из нескольких циклов.

Пример, в котором выйдем сразу из 2 циклов, когда произведение значений переменных-счётчиков даст число большее 10.

// обозначим внешний цикл, используя метку outer
outer: for (var i = 2; i < 5; i++) {
  // вложенный цикл
  for (var j = 2; j < 5; j++) {
    // если условие выполняется, то прерываем работу и переходим к концу цикла с меткой outer
    if (i * j > 10) break outer;
    // выведем в консоль
    console.log(i + ' * ' + j + ' = ' + i * j);
  }
}
// в консоль будет выведено: 2 * 2 = 4, 2 * 3 = 6, 2 * 4 = 8, 3 * 2 = 6, 3 * 3 = 9

Кроме этого, операторы и нельзя использовать в выражениях тернарных операторов.

Цикл do/while

Цикл do/while во многом похож на цикл while, за исключением того, что выражение цикла проверяется в конце, а не в начале. Это значит, что тело цикла всегда выполняется как минимум один раз. Эта инструкция имеет следующий синтаксис:

do
{ 
    инструкция 
} 
while (выражение);

Цикл do/while используется реже, чем родственный ему цикл while. Дело в том, что на практике ситуация, когда вы заранее уверены, что потребуется хотя бы один раз выполнить тело цикла, несколько необычна. Ниже приводится пример использования цикла do/while:

Между циклом do/while и обычным циклом while имеется два отличия. Во-первых, цикл do требует как ключевого слова do (для отметки начала цикла), так и ключевого слова while (для отметки конца цикла и указания условия). Во-вторых, в отличие от цикла while, цикл do завершается точкой с запятой. Цикл while необязательно завершать точкой с запятой, если тело цикла заключено в фигурные скобки.

Цикл for…of (новинка в ES6)

Цикл появился в стандарте ES6. Предназначен он для перебора итерируемых объектов, т.е. объектов, в которых реализован метод . Этот метод ещё называют итератором. Именно его и использует цикл для перебора объектов.

Метод имеется у , , , , , и других объектов.

Пример использование цикла для посимвольного перебора строки:

// переменная, содержащая строку
let str = 'Новый';
// посимвольный перебор строки
for (let char of str) {
  console.log(char);
}
// в консоль будет выведено: "Н", "о", "в", "ы", "й"

Пример использование цикла для перебора коллекции DOM-элементов:

let elements = document.querySelectorAll('p');
for (let element of elements) {
  console.log(element);
}

Пример использование цикла для перебора массива:

// массив
let superHeroes = ;
// перебор массива
for (let value of superHeroes) {
  console.log(value);
}
// в консоль будет выведено: "Iron Man", "Thor", "Hulk"

Чем цикл for…of отличается от for…in

Первое отличие цикла от заключается в том, что он может применяться только для итерируемым объектов, т.е. объектов, в которых реализован итератор (). Цикл итератор не использует. Он предназначен для перебора любых объектов.

Второе отличие заключается в том, что цикл перебирает объект так, как это определено в итераторе. Например, в итератор реализован так, что цикл пройдёт только по значениям в массиве и не будет включать в перебор другие (не индексные) свойства. Цикл организован по-другому, он перебирает все перечисляемые свойства (имена ключей) объекта, в том числе и наследуемые.

Рассмотрим эти отличия. Для этого возьмём предыдущий пример и добавим к нему пользовательское свойство, например, и установим ему значение .

let superHeroes = ;
superHeroes.hero = 'Wasp';

При использовании он переберёт все значения этого массива:

// цикл for...of
for (let value of superHeroes) {
  console.log(value);
}
// в консоль будет выведено: "Iron Man", "Thor", "Hulk"

При использовании он переберёт все перечисляемые имена ключей этого объекта:

// цикл for...in
for (let key in superHeroes) {
  console.log(key);
}
// в консоль будет выведено: 0, 1, 2, "hero"

Чтобы получить значение ключа по его имени можно воспользоваться квадратными скобками:

// цикл for...in
for (let key in superHeroes) {
  console.log(superHeroes);
}
// в консоль будет выведено: "Iron Man", "Thor", "Hulk", "Wasp"

Самостоятельное создание итератора для объекта

Рассмотрим ещё один пример. В этом примере мы самостоятельно определим как должен итерироваться объект. Для этого создадим объект и определим ему итератор.

Создание итератора начинается с добавления к объекту специального метода. Этот метод необходимо спроектировать так, чтобы он возвращал значения последовательно (одно за другим). Название методу согласно стандарту необходимо определить с помощью символа . Итератор должен возвращать всего один метод . Этот метод в свою очередь тоже должен возвращать объект, состоящий из 2 свойств: и . Ключ — булевый. Он определяет есть ли ещё значения в последовательности ( — да, — нет). Ключ должен содержать следующее значение последовательности.

let car = {
  color: 'black',
  brand: 'Ford',
  // создадим итератор, используя символ
  () {
    // получим имена перечисляемых свойств объекта
    const keys = Object.keys(this);
    // создадим переменную (текущий индекс последовательности)
    let index = 0;
    return {
      next() {
        let done = index >= keys.length;
        let value = done ? undefined : keys;
        return {
          value,
          done
        }
      }
    }
  }
}

for (let key in car) {
  console.log(key + ' => ' + car);
}
// в консоль будет выведено: color => "black", brand => "Ford"

ИЛИ «||» находит первое истинное значение

Описанная выше логика соответствует традиционной. Теперь давайте поработаем с «дополнительными» возможностями JavaScript.

Расширенный алгоритм работает следующим образом.

При выполнении ИЛИ || с несколькими значениями:

Оператор выполняет следующие действия:

• Вычисляет операнды слева направо.
• Каждый операнд конвертирует в логическое значение. Если результат , останавливается и возвращает исходное значение этого операнда.
• Если все операнды являются ложными (), возвращает последний из них.

Значение возвращается в исходном виде, без преобразования.

Другими словами, цепочка ИЛИ возвращает первое истинное значение или последнее, если такое значение не найдено.

Например:

Это делает возможным более интересное применение оператора по сравнению с «чистым, традиционным, только булевым ИЛИ».

1. Получение первого истинного значения из списка переменных или выражений.

   Представим, что у нас имеется ряд переменных, которые могут содержать данные или быть . Как мы можем найти первую переменную с данными?

   С помощью :

   Если бы и , и были ложными, в качестве результата мы бы наблюдали .

2. Сокращённое вычисление.

   Операндами могут быть как отдельные значения, так и произвольные выражения. ИЛИ вычисляет их слева направо. Вычисление останавливается при достижении первого истинного значения. Этот процесс называется «сокращённым вычислением», поскольку второй операнд вычисляется только в том случае, если первого недостаточно для вычисления всего выражения.

   Это хорошо заметно, когда выражение, указанное в качестве второго аргумента, имеет побочный эффект, например, изменение переменной.

   В приведённом ниже примере не изменяется:

   Если бы первый аргумент имел значение , то приступил бы к вычислению второго и выполнил операцию присваивания:

   Присваивание – лишь один пример. Конечно, могут быть и другие побочные эффекты, которые не проявятся, если вычисление до них не дойдёт.

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

   В большинстве случаев лучше использовать «обычный» , чтобы облегчить понимание кода, но иногда это может быть удобно.

let

У объявлений переменной через есть три основных отличия от :

1. Область видимости переменной – блок .

   Как мы помним, переменная, объявленная через , видна везде в функции.

   Переменная, объявленная через , видна только в рамках блока , в котором объявлена.

   Это, в частности, влияет на объявления внутри , или .

   Например, переменная через :

   В примере выше – одна переменная на весь код, которая модифицируется в .

   То же самое с будет работать по-другому:

   Здесь, фактически, две независимые переменные , одна – глобальная, вторая – в блоке .

   Заметим, что если объявление в первой строке удалить, то в последнем будет ошибка: переменная не определена:

   Это потому что переменная всегда видна именно в том блоке, где объявлена, и не более.

2. Переменная видна только после объявления.

   Как мы помним, переменные существуют и до объявления. Они равны :

   С переменными всё проще. До объявления их вообще нет.

   Такой доступ приведёт к ошибке:

   Заметим также, что переменные нельзя повторно объявлять. То есть, такой код выведет ошибку:

   Это – хоть и выглядит ограничением по сравнению с , но на самом деле проблем не создаёт. Например, два таких цикла совсем не конфликтуют:

   При объявлении внутри цикла переменная будет видна только в блоке цикла. Она не видна снаружи, поэтому будет ошибка в последнем .

3. При использовании в цикле, для каждой итерации создаётся своя переменная.

   Переменная – одна на все итерации цикла и видна даже после цикла:

   С переменной – всё по-другому.

   Каждому повторению цикла соответствует своя независимая переменная . Если внутри цикла есть вложенные объявления функций, то в замыкании каждой будет та переменная, которая была при соответствующей итерации.

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

   Если бы объявление было , то была бы одна переменная на всю функцию, и вызовы в последних строках выводили бы (подробнее – см. задачу Армия функций).

   А выше объявление создаёт для каждого повторения блока в цикле свою переменную, которую функция и получает из замыкания в последних строках.

Цикл for

Данный цикл в основном используется когда известно точное количество повторений. Этот цикл ещё называют циклом со счётчиком.

Синтаксис цикла «for»:

for (инициализация; условие; финальное выражение) {
  /* тело цикла */
}

Основные части конструкции цикла «for»:

• инициализация — это выражение, которое выполняется один раз перед выполнением цикла; обычно используется для инициализации счётчика;
• условие — это выражение, истинность которого проверяется перед каждой итерацией; если выражение вычисляется как истина, то выполняется итерация; в противном случае цикл «for» завершает работу;
• финальное выражение — это выражение, которое выполняется в конце каждой итерации; обычно используется для изменения счетчика;
• тело цикла — инструкции, выполнение которых нужно повторять.

Рассмотрим пример цикла, который выведет в консоль числа от 1 до 8:

// цикл «for» от 1 до 8, с шагом 1
for (var i = 1; i <= 8; i++) {
  console.log(i);
}

В этом примере:

• инициализация: (объявление переменной и присвоение ей значения 1);
• условие выполнения цикла: (пока значение переменной меньше или равно 8);
• финальное выражение, которое нужно выполнять в конце каждой итерации: (увеличение значение переменной на 1);
• инструкция, которую нужно выполнять: (выведение значения счётчика в консоль).

При этом если тело цикла состоит из одной инструкции, то её можно не заключать в фигурные скобки.

Таким образом, пример, приведённый выше, можно записать ещё так:

// цикл «for» от 1 до 8, с шагом 1
for (var i = 1; i <= 8; i++) console.log(i);

Необязательные части цикла цикла «for».

В «for» все части цикла являются не обязательными.

Например, можно пропустить выражение инициализации:

var i = 1;
// цикл «for»
for (; i <= 8; i++) {
  console.log(i);
}

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

Условие в «for» тоже является не обязательным. Без условия цикл будет выполняться бесконечное количество раз. В этом случае чтобы его прервать (выйти из цикла) необходимо использовать инструкцию .

// цикл «for»
for (var i = 1; ; i++) {
  if (i >= 8) { // условие прерывания цикла
    break;
  }
  console.log(i);
}

Финальное выражение в «for» также является не обязательным. Счётчик цикла в этом случае можно, например, изменять в теле.

// цикл «for»
for (var i = 1; i <= 8; ) {
  console.log(i);
  i++; // увеличение счетчика на 1
}

В «for» можно вообще опустить 3 выражения (бесконечный цикл):

var i = 1;
// цикл «for»
for (;;) {
  if (i >= 8) {
    break;
  }
  console.log(i);
  i++;
}

Кроме этого, в качестве тела цикла «for» можно использовать пустое выражение (). Это используется, когда вам не нужно выполнять ни одной инструкции.

Например:

var
  arrA = ,
  arrB = [];
for (i = 0; i < arrA.length; arrB = arrA / 2) ;
console.log(arrB); // 

Пустое выражение в этом случае рекомендуется дополнительно снабжать комментарием:

// сумма чисел в массиве
var arr = ;
for (var i = 0, length = arr.length, sum = 0; i < length; sum += arr) /* пустое выражение */ ;
// выведем сумму чисел в консоль:
console.log(sum); // 12

Пример использования цикла «for» для перебора элементов массива:

var arr = ; // массив
for (var i = 0, length = arr.length; i < length; i++) {
  console.log(arr);
}

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

var output = '';
for (var i = 1; i <= 9; i++) {
  for (var j = 1; j <= 9; j++) {
    output += ' ' + i * j;
    if (i * j < 10) {
      output += ' ';
    }
  }
  console.log(output);
  output = '';
}

Цикл называется вложенным, если он находится в теле другого цикла.

Бесконечные циклы

Бесконечный цикл, как следует из названия, представляет собой цикл, который будет продолжать работать вечно. Если вы случайно сделать бесконечный цикл, это может привести к сбою браузера или компьютера

Важно, чтобы быть в курсе бесконечных циклов, так что вы могли избежать их

Общий бесконечный цикл, когда условие утверждения while установлено в true. Ниже приведен пример кода, который будет работать вечно. Не стоит испытывать бесконечные циклы.

infiniteLoop.js

// Инициировать бесконечный цикл
while (true) {
// исполнять код навсегда
}

Бесконечный цикл будет работать вечно, но программа может быть прекращена ключевым словом break.

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

polarBears.js

// Установить условие на True
const iceCapsAreMelting = true;
let polarBears = 6;

// Инициировать бесконечный цикл
while (iceCapsAreMelting) {
console.log(`Есть ${polarBears} белых медведей.`);
polarBears--;
// Прекратить бесконечный цикл, если выполняется следующее условие
if (polarBears === 0) {
console.log("Белых медведей не осталось.");
break;
}
}

Когда мы запустим код выше, вывод будет следующим.

Вывод

Есть 6 белых медведей.
Есть 5 белых медведей.
Есть 4 белых медведей.
Есть 3 белых медведей.
Есть 2 белых медведей.
Есть 1 белых медведей.
Белых медведей не осталось.

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