САМОСТОЯТЕЛЬНОЕ ОБУЧЕНИЕ ДЛЯ ВЕБ РАЗРАБОТЧИКОВ
×

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 Заявления if...else JS Заявление switch JS Цикл for JS Цикл while JS Заявление break... JS Преобразование... JS Битовые... JS Регулярные выражения JS Ошибки JS Область JS Подъемный JS Строгий JS Ключевое слово this JS Ключевое слово let JS Константы JS Функция стрелки JS Классы JS Отладчик JS Руководство стиля JS Практика JS Распространенные ошибки JS Эффективность JS Зарезервированные слова JS Версии JS Версия ES5 JS Версия ES6 JS Версия 2016 JS Версия 2017 JS JSON

JS Формы

JS Формы JS Формы API

JS Объекты

Определение объекта Свойства объекта Методы объекта Отображение объекта Доступ к объекту Конструкторы объекта Прототипы объекта ES5 Методы объекта

JS Функции

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

JS Прочее

Классы введение Наследование класса Статические методы... JS Обратный вызов JS Асинхронный JS Обещания JS Асинхронный синтаксис

JS HTML DOM

DOM Введение DOM Методы DOM Документы DOM Элементы DOM HTML DOM CSS DOM Анимация DOM События DOM Прослушиватель событий DOM Навигация DOM Узлы DOM Коллекция DOM Список узлов

JS Браузера BOM

JS Window JS Экран JS Расположение JS История JS Навигатор JS Предупреждение JS Синхронизация JS Cookies

JS AJAX

AJAX Введение AJAX XMLHttp AJAX Запрос на сервер AJAX Ответ с сервера AJAX XML Файл AJAX PHP Файл AJAX ASP Файл AJAX База данных AJAX Приложения AJAX Примеры

JS JSON

JSON Введение JSON Синтаксис JSON или XML JSON Типы данных JSON Парсинг JSON Строки JSON Объекты JSON Массивы JSON PHP JSON HTML JSON JSONP

JS Веб API

API - Введение API - История API - Хранилище API - Работник API - Извлечь файл API - Геолокации

JS или jQuery

jQuery HTML Селекторы jQuery HTML Элементы jQuery CSS Стили jQuery HTML DOM

JS Примеры

JS Примеры JS HTML DOM JS HTML Ввода JS HTML Объекты JS HTML События JS Браузер JS Редактор JS Упражнения JS Викторина JS Сертификат

JS Справочник

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


JavaScript Цикл for



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


Циклы 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>";

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

var i;
for (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) {
  // блок кода, который нужно выполнить
}

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

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

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

Пример

for (i = 0; i < 5; i++) {
  text += "The number is " + i + "<br>";
}
Попробуйте сами »

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

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

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

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



Заявление 1

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

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

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

Пример

for (i = 0, len = cars.length, text = ""; i < len; i++) {
  text += cars[i] + "<br>";
}
Попробуйте сами »

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

Пример

var i = 2;
var len = cars.length;
var text = "";
for (; i < len; i++) {
  text += cars[i] + "<br>";
}
Попробуйте сами »

Заявление 2

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

Это не всегда так, JavaScript не волнует. Заявление 2 также необязательно.

Если заявление 2 вернет true, цикл начнется заново, если он вернет false, цикл завершится.

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


Заявление 3

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

Это не всегда так, JavaScript все равно, и оператор 3 необязателен.

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

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

Пример

var i = 0;
var len = cars.length;
for (; i < len; ) {
  text += cars[i] + "<br>";
  i++;
}
Попробуйте сами »

Цикл for/in

JavaScript for/in заявление перебирает свойства объекта:

Пример

var person = {fname:"John", lname:"Doe", age:25};

var text = "";
var x;
for (x in person) {
  text += person[x];
}
Попробуйте сами »

Цикл for/of

JavaScript for/of заявление перебирает значения итерируемых объектов.

Цикл for/of позволяет перебирать итерируемые структуры данных, такие как массивы, строки, карты, списки узлов и т.д.

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

for (variable of iterable) {
  // блок кода будет выполняться
}

variable - для каждой итерации переменной присваивается значение следующего свойства. Переменная может быть объявлена с const, let, или var.

iterable - объект, имеющий итерируемые свойства.

Цикл массива

Пример

var cars = ["BMW", "Volvo", "Mini"];
var x;

for (x of cars) {
  document.write(x + "<br >");
}
Попробуйте сами »

Цикл строк

Пример

var txt = "JavaScript";
var x;

for (x of txt) {
  document.write(x + "<br >");
}
Попробуйте сами »

Цикл while

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


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

Упражнение:

Создайте цикл от 0 до 9.

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

Старт