Для, пока и делай ... пока циклы в JavaScript

1. О, МОЙ БОГ! Книга JavaScript, написанная Кирупой? !!
2. Цикл для
3. Отправная точка
4. Как долго держать петли
5. Достигая конца
6. Собираем все вместе
7. Некоторые для Loop Примеры
8. Разорвать петлю
9. Пропуск итерации
10. Возвращаясь назад
11. Вам не нужно использовать номера
12. Массив! Массив! Массив!
13. Мы прыгаем вперед здесь :(
14. О нет, он не сделал!
15. Другие петли
16. В то время как петля
17. До ... пока Loop
18. Заключение
19. KIRUPA NEWSLETTER

Когда вы что-то кодируете, иногда вы хотите повторить действие или выполнить какой-то код несколько раз. Например, допустим, у нас есть функция saySomething, которую мы хотим повторно вызывать 10 раз.

Один из способов сделать это - просто вызвать функцию 10 раз с помощью копирования и вставки:

скажите что-то(); скажите что-то(); скажите что-то(); скажите что-то(); скажите что-то(); скажите что-то(); скажите что-то(); скажите что-то(); скажите что-то(); скажите что-то();

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

Теперь, даже если вы решите дублировать некоторый код вручную, этот подход на практике не работает. Количество повторений кода, которое вам понадобится, будет зависеть от некоторых внешних факторов, таких как количество элементов в наборе данных, результат выполнения вызова веб-службы, количество букв в слове и другие разные вещи. это будет постоянно меняться. Это не всегда будет фиксированное число, например, 10 . Часто количество повторений кода может быть ОЧЕНЬ большим. Вы не хотите копировать и вставлять что-то несколько сотен или тысяч раз, чтобы что-то повторить. Это было бы ужасно.

Нам нужно общее решение для повторения кода с контролем того, сколько раз код повторяется. В JavaScript это решение предоставляется в форме цикла . Есть три вида петель, которые вы можете создать:

• для петель
• в то время как петли
• делать ... пока петли

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

Onwards!

О, МОЙ БОГ! Книга JavaScript, написанная Кирупой? !!

Чтобы перенести ваши навыки JavaScript в космическое пространство, все, что вы видите здесь и многое другое (со всей его случайной ясностью!), Доступно как в мягкой обложке, так и в цифровых изданиях.

КУПИТЬ НА АМАЗОНЕ

Цикл для

Одним из наиболее распространенных способов создания цикла является использование оператора for для создания цикла for . Цикл for позволяет вам многократно запускать некоторый код, пока указанное вами выражение не вернет false . Это, вероятно, не имеет большого смысла. Чтобы прояснить это определение, давайте рассмотрим пример.

Если бы нам пришлось перевести наш предыдущий пример saySomething с помощью for, это выглядело бы следующим образом:

var count = 10; for (var i = 0; i <count; i ++) {saySomething (); } function saySomething () {document.writeln ("привет!"); }

Если бы вы вводили этот код в некоторые теги скрипта и просматривали его в браузере, вы бы увидели следующее:

Слово привет! будет повторяться десять раз на вашей странице. Это стало возможным благодаря циклу for, поэтому мы хотим поблагодарить его, узнав все о том, как он работает. Во-первых, вот наша звезда:

for (var i = 0; i <count; i ++) {saySomething (); }

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

for (start_point; выражение; собирается_фром_старт_в_финиш) {// код для выполнения}

Это высокоуровневое представление соответствует фактическим значениям из нашего примера:

for (var i = 0; i <count; i ++) {saySomething (); }

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

Отправная точка

В первом регионе мы определяем отправную точку. Общая отправная точка обычно включает объявление и инициализацию переменной. В нашем примере я создаю новую переменную с именем i и инициализирую ее числом 0:

for (var i = 0; i <count; i ++) {saySomething (); }

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

Как долго держать петли

Как только мы определим нашу начальную точку, в следующем регионе мы определим, как долго продолжать цикл. Это обрабатывается выражением, которое возвращает либо true, либо false. В нашем примере условие состоит в том, что наша переменная i меньше значения count - 10 :

for (var i = 0; i <count; i ++) {saySomething (); }

Если наша переменная i меньше 10, это выражение оценивается как true, и наш цикл продолжает выполняться . Если наша переменная i становится равной или большей 10, условие ложно , и наш цикл завершается . Теперь вам может быть интересно, что вызывает переменную i. Ну, это кроется в следующем ...

Достигая конца

До сих пор мы смотрели на нашу отправную точку. Мы также рассмотрели выражение, которое должно быть оценено как ложное, если мы хотим разорвать наш цикл. Чего не хватает, так это последней области, в которой мы опишем, как пройти от вашей начальной точки до остановки:

for (var i = 0; i <25; i ++) {saySomething (); }

В нашем примере на каждой итерации нашего цикла мы увеличиваем нашу переменную i на 1. В случае, если вы не знакомы с этим синтаксисом, ++ после i означает, что вы увеличиваете любое значение переменной i на 1. Каждый раз, когда цикл запускается, все, что вы указали здесь, будет выполняться. В этом случае наше значение i будет увеличиваться.

Собираем все вместе

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

var count = 10; for (var i = 0; i <count; i ++) {saySomething (); } function saySomething () {document.write ("привет!"); }

Когда наш цикл for изначально ударил, переменная i создается и инициализируется в 0 . Затем наш код проверяет, меньше ли значение i, чем значение, на которое ссылается count ..., равное 10 . В этот момент все становится зеленым, и любой код внутри цикла выполняется. В нашем случае это функция saySomething. Как только это будет сделано, начнется последняя часть оператора for. Переменная i увеличивается на 1.

Теперь цикл начинается заново, за исключением того, что переменная i не была повторно инициализирована. Его значение равно 1, и это означает, что он проходит тест i <count. Функция saySomething вызывается снова, и значение i снова увеличивается. Теперь значение переменной i равно 2.

Весь этот процесс повторяется до тех пор, пока значение i не станет равным 10 . В этот момент тест i <count не пройден, и цикл завершится после успешного выполнения функции saySomething () 10 раз.

Некоторые для Loop Примеры

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

Разорвать петлю

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

for (var i = 0; i <100; i ++) {document.writeln (i); if (i == 45) {перерыв; }}

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

Пропуск итерации

Будут моменты, когда вы хотите, чтобы ваш цикл пропустил свою текущую итерацию и перешел к следующей. Это ловко обрабатывается ключевым словом continue:

вар этажей = 28; for (var i = 1; i <= этажей; i ++) {if (i == 13) {// никакой этаж здесь не продолжается; } document.writeln ("На этаже:" + i + "<br>"); }

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

Возвращаясь назад

Нет никаких причин, почему вы начинаете с 0, а затем увеличиваете вверх:

for (var i = 25; i> 0; i--) {document.writeln ("привет"); }

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

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

Вам не нужно использовать номера

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

for (var i = "a"; i! = "aaaaaaaa"; i + = "a") {document.writeln ("hmm ..."); }

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

Массив! Массив! Массив!

Одна из величайших любовных историй всех времен - это то, что между структурой данных, известной как массив и цикл for :

var myArray = ["one", "two", "three"]; for (var i = 0; i <myArray.length; i ++) {document.writeln (myArray [i]); }

Массив - это коллекция элементов. Способ перечисления и доступа ко всем элементам в массиве требует некоторого вида цикла, и цикл for обычно является выбранным.

Мы прыгаем вперед здесь :(

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

Обратите внимание, что мое условие для того, как долго мы зациклимся, включает длину массива (myArray.length), а не какое-то фиксированное значение, такое как 10. Кроме того, на первый элемент в массиве ссылается число 0. Фактически, почти все первые элементы в JavaScript ссылается на 0. Поэтому мы инициализируем наш счетчик цикла, переменную i, равным 0, а не 1 или некоторому другому значению.

В любом случае, я решил познакомить вас с массивом и парой циклов . Как романтично!

О нет, он не сделал!

О да! Да, я сделал. Я пошел туда, сделал снимок, разместил в Facebook и вернулся:

var i = 0; var yay = true; for (; yay;) {if (i == 10) {yay = false; } i ++; document.writeln ( "странный"); }

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

Другие петли

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

В то время как петля

Цикл while повторяет некоторый код, пока его тестовое условие (другое выражение) не вернет false:

var count = 0; while (count <10) {document.writeln ("зацикливание!"); подсчитывать ++; }

В этом примере условие представлено выражением count <10. С каждой итерацией наш цикл увеличивает значение счетчика на 1 :

var count = 0; while (count <10) {document.writeln ("зацикливание!"); подсчитывать ++; }

Как только значение count становится равным 10 , цикл останавливается, потому что выражение count <10 вернет false . Это все, что нужно для цикла while.

До ... пока Loop

Теперь перейдем к Мег Гриффин из вариантов петли. Это был бы цикл do ... while, цель которого еще менее определена, чем while. Если у цикла while было условное выражение, прежде чем цикл будет выполняться, цикл do ... while имеет условное выражение в конце.

Вот пример:

var count = 0; делать {считать ++; document.writeln («Я не знаю, что я здесь делаю! <br>»); } while (количество <10);

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

while (false) {document.writeln («Не могу коснуться этого!»); }

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

do {document.writeln («Этот код будет запущен один раз!»); } while (false);

Yaaawwn! В любом случае, есть только одна последняя информация, которую я должен сообщить вам, прежде чем мы продолжим. Операторы break и continue, которые мы рассматривали ранее как часть удивительного цикла for, также работают аналогично при использовании внутри циклов while и do ... while.

Заключение

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

Если у вас есть вопрос по этой или любой другой теме, проще всего наши форумы где куча самых дружелюбных людей, с которыми ты когда-либо встретишься, будет рада помочь тебе!

KIRUPA NEWSLETTER

Получите крутые советы, хитрости, селфи и многое другое ... лично доставленные вручную на ваш почтовый ящик!

( Посмотреть прошлые выпуски за идею о том, что ты упускал все это время! )

Похожие

Комментарии