Цикл со счетчиком javascript

Цикл со счетчиком javascript

Циклы JavaScript обеспечивают многократное выполнение повторяющихся вычислений. Они оптимизируют процесс написания кода, выполняя одну и ту же инструкцию или блок инструкций, образующих тело цикла, заданное число раз (используя переменную-счётчик) или пока заданное условие истинно. Циклы выполняют обход последовательности значений. Однократное выполнение цикла называется итерацией.

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

В JavaScript существуют следующие операторы цикла:

1) for используется когда вы заранее знаете, сколько раз вам нужно что-то сделать;
2) for. in используется для обхода свойств объектов;
3) while используется когда вы не знаете, сколько раз нужно что-то сделать;
4) do. while работает аналогично с оператором while . Отличается тем, что do. while всегда выполняет выражение в фигурных скобках, по крайней мере один раз, даже если проверка условия возвращает false .

Типы циклов в JavaScript, управление циклом

  • Содержание:
  • 1. Цикл for
  • 2. Цикл for…in
  • 3. Цикл while
  • 4. Цикл do…while
  • 5. Бесконечный цикл
  • 6. Вложенный цикл
  • 7. Управление циклом

1. Цикл for

Цикл for используется для выполнения итераций по элементам массивов или объектов, напоминающих массивы, таких как arguments и HTMLCollection . Условие проверяется перед каждой итерацией цикла. В случае успешной проверки выполняется код внутри цикла, в противном случае код внутри цикла не выполняется и программа продолжает работу с первой строки, следующей непосредственно после цикла.

Следующий цикл выведет на консоль строчку Hello, JavaScript! пять раз.

Рис. 1. Результат выполнения цикла for на консоли

1.1. Как работает цикл for

Цикл for состоит из трёх разных операций:

Шаг 1. инициализация var i = 0; — объявление переменной-счётчика, которая будет проверяться во время выполнения цикла. Эта переменная инициализируется со значением 0 . Чаще всего в качестве счётчиков цикла выступают переменные с именами i , j и k .

Шаг 2. проверка условия i — условное выражение, если оно возвращает true , тело цикла (инструкция в фигурных скобках) будет выполнено. В данном примере проверка условия идёт до тех пор, пока значение счётчика меньше 5 .

Шаг 3. завершающая операция i++ — операция приращения счётчика, увеличивает значение переменной var i на единицу. Вместо операции инкремента также может использоваться операция декремента.

По завершении цикла в переменной var i сохраняется значение 1 . Следующий виток цикла выполняется для for (var i = 1; i . Условное выражение вычисляется снова, чтобы проверить, является ли значение счётчика i всё ещё меньше 5 . Если это так, операторы в теле цикла выполняются ещё раз. Завершающая операция снова увеличивает значение переменной на единицу. Шаги 2 и 3 повторяются до тех пор, пока условие i возвращает true .

1.2. Вывод значений массива

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

Приведённый ниже скрипт выведет на экран пять сообщений с названиями цветов:

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

2. Цикл for. in

Циклы for. in используются для обхода свойств объектов, не являющихся массивами. Такой обход также называется перечислением. При обходе рекомендуется использовать метод hasOwnProperty() , чтобы отфильтровать свойства, которые были унаследованы от прототипа.

Для примера создадим объект с помощью литерала объекта.

Рис. 2. Результат выполнения цикла for. in на консоли

Предположим, что в сценарии до или после создания объекта user прототип объекта Object был расширен дополнительным методом clone() .

Так как цепочка наследования прототипа постоянно проверяется интерпретатором, то все объекты автоматически получают доступ к новому методу.

Рис. 3. Результат повторного выполнения цикла for. in на консоли

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

3. Цикл while

Цикл while — цикл с предварительной проверкой условного выражения. Инструкция внутри цикла (блок кода в фигурных скобках) будет выполняться в случае, если условное выражение вычисляется в true . Если первая проверка даст результат false , блок инструкций не выполнится ни разу.

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

Данный цикл выведет на экран таблицу умножения для числа 3:

Рис. 5. Результат выполнения цикла while

4. Цикл do. while

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

Рис. 6. Результат выполнения цикла do. while

В следующем примере операторы внутри цикла выполняются один раз, даже если условие не выполняется.

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

При создании любого цикла можно создать бесконечный цикл, который никогда не завершится. Такой цикл может потенциально продолжать работать до тех пор, пока работает компьютер пользователя. Большинство современных браузеров могут обнаружить это и предложат пользователю остановить выполнение скрипта. Чтобы избежать создания бесконечного цикла, вы должны быть уверены, что заданное условие в какой-то момент вернёт false . Например, следующий цикл задаёт условие, которое никогда не возвращает ложь, так как переменная i никогда не будет меньше 10 :

Читайте также:  Построение окружности по трем точкам

6. Вложенные циклы

Цикл внутри другого цикла называется вложенным. При каждой итерации цикла вложенный цикл выполняется полностью. Вложенные циклы можно создавать с помощью цикла for и цикла while .

Рис. 7. Результат выполнения вложенного цикла for

7. Управление циклом

Циклом можно управлять с помощью операторов break; и continue; .

7.1. Оператор break;

Оператор break; завершает выполнение текущего цикла. Он используется в исключительных случаях, когда цикл не может выполняться по какой-то причине, например, если приложение обнаруживает ошибку. Чаще всего оператор break; является частью конструкции if .

Когда оператор break; используется без метки, он позволяет выйти из цикла или из инструкции switch . В следующем примере создаётся счётчик, значения которого должны изменяться от 1 до 99 , однако оператор break прерывает цикл после 14 итераций.

Рис. 8. Результат работы оператора break в цикле for

Для вложенных циклов оператор break; используется с меткой, с помощью которой завершается работа именованной инструкции. Метка позволяет выйти из любого блока кода. Именованной инструкцией может быть любая инструкция, внешняя по отношению к оператору break; . В качестве метки может быть имя инструкции if или имя блока инструкций, заключенных в фигурные скобки только для присвоения метки этому блоку. Между ключевым словом break; и именем метки не допускается перевод строки.

7.2. Оператор continue;

Оператор continue; останавливает текущую итерацию цикла и запускает новую итерацию. При этом, цикл while возвращается непосредственно к своему условию, а цикл for сначала вычисляет выражение инкремента, а затем возвращается к условию.

В этом примере на экран будут выведены все чётные числа:

Рис. 9. Результат работы оператора continue в цикле for

Оператор continue; также может применяться во вложенных циклах с меткой.

Рис. 10. Результат работы оператора continue с меткой

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

В языке JavaScript имеется четыре цикла: while, do/while, for и for/in. Каждому из них посвящен один из следующих подразделов. Одно из обычных применений циклов — обход элементов массива.

Цикл while

Оператор if является базовым условным оператором в языке JavaScript, а базовым циклом для JavaScript можно считать цикл while. Он имеет следующий синтаксис:

Цикл while начинает работу с вычисления выражения. Если это выражение имеет ложное значение, интерпретатор пропускает инструкцию, составляющую тело цикла, и переходит к следующей инструкции в программе. Если выражение имеет истинное значение, то выполняется инструкция, образующая тело цикла, затем управление передается в начало цикла и выражение вычисляется снова. Иными словами, интерпретатор снова и снова выполняет инструкцию тела цикла, пока значение выражения остается истинным. Обратите внимание, что имеется возможность организовать бесконечный цикл с помощью синтаксиса while(true).

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

Кроме того, если изменяемая переменная (или переменные) присутствует в выражении, значение выражения может меняться при каждом проходе цикла. Это важно, т.к. в противном случае выражение, значение которого было истинным, никогда не изменится и цикл никогда не завершится! Ниже приводится пример цикла while, который выводит числа от 0 до 9:

Как видите, в начале переменной count присваивается значение 0, а затем ее значение увеличивается каждый раз, когда выполняется тело цикла. После того как цикл будет выполнен 10 раз, выражение вернет false (т.е. переменная count уже не меньше 10), инструкция while завершится и интерпретатор перейдет к следующей инструкции в программе. Большинство циклов имеют переменные-счетчики, аналогичные count. Чаще всего в качестве счетчиков цикла выступают переменные с именами i, j и k, хотя для того чтобы сделать программный код более понятным, следует давать счетчикам более наглядные имена.

Цикл do/while

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

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

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

Читайте также:  Камера с отслеживанием движения

Цикл for

Цикл for представляет собой конструкцию цикла, которая часто оказывается более удобной, чем цикл while. Цикл for упрощает конструирование циклов, следующих шаблону, общему для большинства циклов. Большинство циклов имеют некоторую переменную-счетчик. Эта переменная инициализируется перед началом цикла и проверяется перед каждой итерацией. Наконец, переменная-счетчик инкрементируется или изменяется каким-либо другим образом в конце тела цикла, непосредственно перед повторной проверкой переменной. Инициализация, проверка и обновление — это три ключевых операции, выполняемых с переменной цикла. Инструкция for делает эти три шага явной частью синтаксиса цикла:

Инициализация, проверка и инкремент — это три выражения (разделенных точкой с запятой), которые ответственны за инициализацию, проверку и увеличение переменной цикла. Расположение их в первой строке цикла упрощает понимание того, что делает цикл for, и не позволяет забыть инициализировать или увеличить переменную цикла.

Проще всего объяснить работу цикла for, показав эквивалентный ему цикл while:

Другими словами, выражение инициализации вычисляется один раз перед началом цикла. Это выражение, как правило, является выражением с побочными эффектами (обычно присваиванием). В JavaScript также допускается, чтобы выражение инициализации было инструкцией объявления переменной var, поэтому можно одновременно объявить и инициализировать счетчик цикла.

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

Вывести числа от 0 до 9 можно также с помощью цикла for, как показано ниже, в противовес эквивалентному циклу while, показанному в примере ранее:

Конечно, циклы могут быть значительно более сложными, чем в этих простых примерах, и иногда в каждой итерации цикла изменяется несколько переменных. Эта ситуация — единственный случай в JavaScript, когда часто применяется оператор «запятая» — он позволяет объединить несколько выражений инициализации и инкрементирования в одно выражение, подходящее для использования в цикле for:

Цикл for/in

Цикл for/in использует ключевое слово for, но он в корне отличается от обычного цикла for. Цикл for/in имеет следующий синтаксис:

В качестве переменной здесь обычно используется имя переменной, но точно так же можно использовать инструкцию var, объявляющую единственную переменную. Параметр объект — это выражение, возвращающее объект. И как обычно, инструкция — это инструкция или блок инструкций, образующих тело цикла.

Для обхода элементов массива естественно использовать обычный цикл for:

Инструкция for/in так же естественно позволяет выполнить обход свойств объекта:

Чтобы выполнить инструкцию for/in, интерпретатор JavaScript сначала вычисляет выражение объект. Если оно возвращает значение null или undefined, интерпретатор пропускает цикл и переходит к следующей инструкции. Если выражение возвращает простое значение, оно преобразуется в эквивалентный объект-обертку. В противном случае выражение возвращает объект. Затем интерпретатор выполняет по одной итерации цикла для каждого перечислимого свойства объекта. Перед каждой итерацией интерпретатор вычисляет значение выражения, сохраняет его в переменной и присваивает ему имя свойства (строковое значение).

Обратите внимание, что переменная в цикле for/in может быть любым выражением, возвращающим значение, которое можно использовать слева от оператора присваивания. Это выражение вычисляется в каждой итерации цикла, т.е. каждый раз оно может возвращать разные значения. Например, чтобы скопировать имена всех свойств объекта в массив, можно использовать следующий цикл:

В действительности цикл for/in может совершать обход не по всем свойствам объекта, а только по перечислимым свойствам. Многочисленные встроенные методы, определяемые в базовом языке JavaScript, не являются перечислимыми. Например, все объекты имеют метод toString(), но цикл for/in не перечислит свойство toString. Кроме встроенных методов также не являются перечислимыми многие другие свойства встроенных объектов. При этом все свойства и методы, определяемые пользователем, являются перечислимыми. Унаследованные свойства, которые были определены пользователем, также перечисляются циклом for/in.

Если в теле цикла for/in удалить свойство, которое еще не было перечислено, это свойство перечислено не будет. Если в теле цикла создать новые свойства, то обычно такие свойстве не будут перечислены. (Однако некоторые реализации могут перечислять унаследованные свойства, добавленные в ходе выполнения цикла.)

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

Оператор цикла for

В JavaScript циклы чаще всего создаются с помощью оператора цикла for. Он выглядит так:

У оператора for содержится в скобках три выражения, разделённых точкой с запятой. Эти выражения имеют такой смысл:

Первое выражение . В нём задаётся начальное значение определённой переменной. Обычно её называют i. Хотя её можно назвать как угодно, это просто переменная. Первое выражение выполняется один раз в начале цикла и больше не используется. Если переменная i не была объявлена ранее, то её можно объявить прямо в цикле.

Читайте также:  Постоянно пропадает интернет через вай фай роутер

Второе выражение . Содержит условие, при котором цикл выполняется. Когда условие перестаёт выполняться, цикл прекращается.

Третье выражение . В нём производится изменение значения переменной i.

Далее в фигурных скобках следуют строки, которые выполняются в цикле.

Порядок работы оператора for такой:

  • В первом выражении переменная i получает начальное значение.
  • Затем проверяется условие во втором выражении. Если условие верно, то выполняются строки в фигурных скобках.
  • После этого в третьем выражении переменная i меняет значение и вновь проверяется условие. Если оно опять верно, то ещё раз выполняются строки в фигурных скобках. И снова меняется значение i, и снова проверяется условие.Так происхожит до тех пор, пока условие не перестанет выполняться.
  • Если условие неверно, то строки цикла не выполняются, цикл прекращается и начинают работать строки, следующие за закрывающей фигурной скобкой.

В предложенном примере переменная i имеет начальное значение 1. После выполнения строк цикла она каждый раз увеличивается на единицу. Цикл выполняется до тех пор, пока i меньше 5. В фигурных скобках содержится только одна строка. Она выводит на экран текущее значение переменной i.

Создайте страницу и добавьте на неё опрератор for так, как он написан в примере. Запустите страницу и посмотрите как оператор работает. Затем попробуйте что нибудь изменить в операторе. Измените начальное значение или условие цикла, добавьте другие строки в цикл.

Строки, которые находятся в фигурных скобках, называются тело цикла. Одно выполнение этих строк называется итерация. Если строки выполнились 5 раз, то это 5 итераций.

Цикл со счётчиком

В нашем примере переменная i получает начальное значение 1 и увеличивается на единицу на каждой итерации. . Это самый распространённый вариант. Такой цикл называется цикл со счётчиком, а переменная i называется счётчик цикла. Это используется, когда нужно выполнить какие-то действия конкретное количество раз. Но в JavaScript цикл со счётчиком — это далеко не единственный способ создания цикла. Переменной i можно задавать любое начальное значение и изменять как угодно. Главное правило остаётся неизменным — пока условие цикла соблюдается, цикл выполняется.

Оператор цикла while

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

У оператора while в скобках пишется условие цикла, а затем в фигурных скобках тело цикла. Пример:

В приведённом примере переменная n умножается на число 2.3 и полученный результат отдельной строкой выводится на экран. Цикл продолжается до тех пор, пока значение n не превысит 1000.

При рассмотрении оператора присваивания я писал, что если с переменной производятся арифметические расчёты и результат записывается в ту же переменную, то для этого существует краткая запись. Строка 16 может выглядеть так:

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

В операторах цикла while и for могут использоваться слова continue и break . continue останавливает текущую итерацию, и происходит очередная проверка условия и очередная итерация. А break прекращает цикл и начинают работать строки, следующие за циклом.

Конструкция do while

Оператор цикла while можно использовать вместе с ключевым словом do . При этом оператор выглядит совсем по-другому. Сначала пишется слово do и тело цикла. А затем while и условие цикла. В этом случае сначала выполняется тело цикла, а потом проверяется условие. Поэтому первая итерация будет обязательно, независимо от условия, ведь сначала производится итерация и только потом первый раз проверяется условие. Пример:

Обратите внимание — первая итерация происходит, хотя условие цикла не выполняется сразу.

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

Вложенные циклы

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

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

Коприрование материалов сайта возможно только с согласия администрации

Ссылка на основную публикацию
Хорошие характеристики для ноутбука
На сегодняшний день портативной электроникой никого не удивишь - персональным носимым компьютером имеют право именоваться не только планшеты, плееры и...
Фото для срисовки легкие но красивые карандашом
Хотите научиться рисовать, но не знаете с чего начать? Подборка самых простых и легких картинок для срисовки помогут создать красивый...
Фото для школьной беседы
Если обычный диалог подразумевает участие только двух пользователей, то в беседу можно позвать нескольких друзей. Эта функция удобна, если нужно...
Хорошие щетки стеклоочистителя отзывы
Проверяем щетки стеклоочистителей. На испытаниях — 8 брендов. Сегодня можно определить к себе на службу дворника любой националь… простите, конструкции:...
Adblock detector