Учебник по JS

ГЛАВНАЯ JS Введение JS Куда Вывод JS Заявления JS JS-синтаксис JS-комментарии JS-переменные JS Пусть Константа JS JS-операторы JS-арифметика Назначение JS JS-типы данных JS-функции JS-объекты JS-события JS-строки Строковые методы JS Поиск строки JS Шаблоны строк JS JS-номера Методы номеров JS JS-массивы Методы массива JS Сортировка массива JS Итерация массива JS Константа массива JS JS-даты Форматы даты JS Методы получения даты JS Методы установки даты JS JS-математика JS Случайный JS Булевы значения Сравнение JS JS-условия JS-переключатель JS цикл для Цикл JS для входа Цикл JS для Цикл JS во время Перерыв JS JS-итерации JS-наборы JS-карты JS Typeof Преобразование типов JS JS побитовый JS регулярное выражение JS-ошибки Область JS JS-подъем Строгий режим JS JS это ключевое слово Функция стрелки JS JS-классы JS JSON JS-отладка Руководство по стилю JS Лучшие практики JS JS-ошибки JS-производительность Зарезервированные слова JS

JS-версии

JS-версии JS 2009 (ES5) JS 2015 (ES6) JS 2016 JS 2017 JS 2018 JS IE/пограничный История JS

JS-объекты

Определения объектов Свойства объекта Методы объекта Отображение объекта Средства доступа к объектам Конструкторы объектов Прототипы объектов Итерации объектов Наборы объектов Карты объектов Ссылка на объект

JS-функции

Определения функций Параметры функции Вызов функции Вызов функции Функция Применить Закрытие функций

JS-классы

Введение в класс Наследование классов Статический класс

JS асинхронный

Обратные вызовы JS JS асинхронный JS-обещания JS асинхронный/ожидание

JS HTML DOM

Дом Введение DOM-методы Документ DOM DOM-элементы DOM HTML DOM-формы ДОМ CSS DOM-анимации События ДОМ Слушатель событий DOM DOM-навигация DOM-узлы Коллекции DOM Списки узлов DOM

Спецификация браузера JS

JS-окно JS-экран Местоположение JS История JS JS-навигатор Всплывающее оповещение JS JS Тайминг JS-куки

JS-веб-API

Введение в веб-API API веб-форм API истории веб-поиска API веб-хранилища API веб-работника API веб-выборки API веб-геолокации

JS АЯКС

Введение в АЯКС AJAX XMLHttp АЯКС-запрос AJAX-ответ XML-файл AJAX АЯКС PHP АЯКС АСП База данных AJAX AJAX-приложения Примеры AJAX

JS JSON

Введение в JSON Синтаксис JSON JSON против XML Типы данных JSON Анализ JSON Строковая JSON JSON-объекты JSON-массивы JSON-сервер JSON PHP JSON HTML JSON JSONP

JS против JQuery

Селекторы jQuery JQuery HTML jQuery CSS JQuery DOM

JS-графика

JS-графика JS Холст JS сюжет JS Chart.js JS Google Диаграмма JS D3.js

JS-примеры

JS-примеры JS HTML DOM JS HTML-ввод HTML-объекты JS HTML-события JS JS-браузер JS-редактор JS-упражнения JS-викторина JS-сертификат

JS-ссылки

Объекты JavaScript HTML DOM-объекты


JavaScript для цикла


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


Циклы JavaScript

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

Часто это бывает при работе с массивами:

Вместо того, чтобы писать:

text += cars[0] + "<br>";
text += cars[1] + "<br>";
text += cars[2] + "<br>";
text += cars[3] + "<br>";
text += cars[4] + "<br>";
text += cars[5] + "<br>";

Ты можешь написать:

for (let i = 0; i < cars.length; i++) {
  text += cars[i] + "<br>";
}

Различные виды петель

JavaScript поддерживает различные виды циклов:

  • for - перебирает блок кода несколько раз
  • for/in - перебирает свойства объекта
  • for/of - перебирает значения итерируемого объекта
  • while - перебирает блок кода, пока заданное условие истинно
  • do/while - также перебирает блок кода, пока заданное условие выполняется

Цикл For

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

for (statement 1; statement 2; statement 3) {
  // code block to be executed
}

Оператор 1 выполняется (один раз) перед выполнением блока кода.

Оператор 2 определяет условие выполнения блока кода.

Оператор 3 выполняется (каждый раз) после выполнения блока кода.

Пример

for (let i = 0; i < 5; i++) {
  text += "The number is " + i + "<br>";
}

Из приведенного выше примера вы можете прочитать:

Оператор 1 устанавливает переменную до начала цикла (пусть i = 0).

Оператор 2 определяет условие запуска цикла (i должно быть меньше 5).

Оператор 3 увеличивает значение (i++) каждый раз, когда блок кода в цикле выполняется.



Заявление 1

Обычно вы будете использовать оператор 1 для инициализации переменной, используемой в цикле (пусть i = 0).

Это не всегда так, JavaScript это не волнует. Утверждение 1 является необязательным.

Вы можете инициировать много значений в операторе 1 (разделенные запятой):

Пример

for (let i = 0, len = cars.length, text = ""; i < len; i++) {
  text += cars[i] + "<br>";
}

И вы можете опустить оператор 1 (например, когда ваши значения устанавливаются до начала цикла):

Пример

let i = 2;
let len = cars.length;
let text = "";
for (; i < len; i++) {
  text += cars[i] + "<br>";
}

Заявление 2

Часто оператор 2 используется для оценки состояния исходной переменной.

Это не всегда так, JavaScript это не волнует. Утверждение 2 также является необязательным.

Если оператор 2 возвращает истину, цикл начинается снова, если он возвращает ложь, цикл завершается.

Если вы опускаете оператор 2, вы должны обеспечить разрыв внутри цикла. В противном случае цикл никогда не закончится. Это приведет к сбою вашего браузера. Читайте о перерывах в следующей главе этого руководства.


Заявление 3

Часто оператор 3 увеличивает значение начальной переменной.

Это не всегда так, JavaScript это не волнует, а оператор 3 является необязательным.

Оператор 3 может делать что угодно, например отрицательное приращение (i--), положительное приращение (i = i + 15) или что-то еще.

Утверждение 3 также можно опустить (например, когда вы увеличиваете свои значения внутри цикла):

Пример

let i = 0;
let len = cars.length;
let text = "";
for (; i < len; ) {
  text += cars[i] + "<br>";
  i++;
}

Объем цикла

Использование varв цикле:

Пример

var i = 5;

for (var i = 0; i < 10; i++) {
  // some code
}

// Here i is 10

Использование letв цикле:

Пример

let i = 5;

for (let i = 0; i < 10; i++) {
  // some code
}

// Here i is 5

В первом примере с использованием varпеременная, объявленная в цикле, повторно объявляет переменную вне цикла.

Во втором примере с использованием letпеременная, объявленная в цикле, не повторно объявляет переменную вне цикла.

Когда letиспользуется для объявления переменной i в цикле, переменная i будет видна только внутри цикла.


Циклы For/Of и For/In

Цикл for/inи for/ofпетля объясняются в следующей главе.


Пока циклы

Цикл whileи the do/whileобъясняются в следующих главах.


Проверьте себя с помощью упражнений

Упражнение:

Создайте цикл, который проходит от 0 до 9.

let i;
 ( = ;  < ; ) {
  console.log(i);
}