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

На продуктивність циклу впливають кількість ітерацій та кількість операцій, що виконуються в тілі циклу кожної ітерації.

У JavaScript існують такі оператори циклу:

1) for використовується коли ви заздалегідь знаєте, скільки разів вам потрібно щось зробити;
2) for...in використовується для обходу властивостей об'єктів;
3) while використовується коли ви не знаєте, скільки разів потрібно щось зробити;
4) do...while працює аналогічно з оператором while. Відрізняється тим, що do...while завжди виконує вираз у фігурних дужках, Крайній міріодин раз навіть якщо перевірка умови повертає false .

Типи циклів JavaScript, управління циклом

1. Цикл for

Цикл for використовується для виконання ітерацій щодо елементів масивів або об'єктів, що нагадують масиви, таких як arguments і HTMLCollection . Умову перевіряють перед кожною ітерацією циклу. У разі успішної перевірки виконується код усередині циклу, інакше код усередині циклу не виконується і програма продовжує роботу з першого рядка, наступного безпосередньо після циклу.

Наступний цикл виведе на консоль рядок Hello, JavaScript! п'ять раз.

For (var i = 0; i< 5; i++) { console.log(i + ": Hello, JavaScript!"); }
Мал. 1. Результат виконання циклу for на консолі

1.1. Як працює цикл for

Цикл for складається з трьох різних операцій:

Крок 1. ініціалізація var i = 0; — оголошення змінної-лічильника, яка перевірятиметься під час виконання циклу. Ця змінна ініціалізується із значенням 0 . Найчастіше як лічильники циклу виступають змінні з іменами i, j і k.

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

Крок 3 завершальна операція i++ - операція збільшення лічильника, що збільшує значення змінної var i на одиницю. Замість операції інкременту також може використовуватися операція декременту.

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

1.2. Виведення значень масиву

Щоб вивести значення масиву за допомогою циклу for, потрібно задіяти властивість масиву length. Це допоможе визначити кількість елементів у масиві та виконати цикл таку ж кількість разів.

Наведений нижче скрипт виведе на екран п'ять повідомлень із назвами кольорів:

Var flowers = ["Rose", "Lily", "Tulip", "Jasmine", "Orchid"]; for (var i = 0; i< flowers.length; i++){ alert(flowers[i] + " - это цветок."); }

Якщо значення властивості length не змінюється в ході виконання циклу, можна зберегти його в локальній змінній, а потім використовувати цю змінну в умовному виразі. Таким чином можна підвищити швидкість виконання циклу, оскільки значення властивості length буде вилучатися лише один раз за весь час роботи циклу.

Var flowers = ["Rose", "Lily", "Tulip", "Jasmine", "Orchid"], len = flowers.length; for (var i = 0; i

2. Цикл for...in

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

Наприклад створимо об'єкт з допомогою літералу об'єкта.

Var user = ( name: "Alice", age: 25, country: "Russia"); for (var prop in user) ( console.log(prop + ": " + user); )
Мал. 2. Результат виконання циклу for...in на консолі

Припустимо, що у сценарії до або після створення об'єкта user прототип об'єкта Object було розширено додатковим методом clone().

If (typeof Object.prototype.clone === "undefined") ( Object.prototype.clone = function () (); )

Оскільки ланцюжок успадкування прототипу постійно перевіряється інтерпретатором, всі об'єкти автоматично отримують доступом до нового методу.

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

Щоб уникнути виявлення цього в процесі перерахування властивостей об'єкта user , використовується метод hasOwnProperty() , який відфільтрує властивості прототипу.

Var user = ( name: "Alice", age: 25, country: "Russia"); if (typeof Object.prototype.clone === "undefined") ( Object.prototype.clone = function () (); ) for (var prop in user) ( if (user.hasOwnProperty(prop)) ( console.log (prop + ": " + user); ) )
Мал. 4. Результат перерахування властивостей об'єкта за допомогою методу hasOwnProperty()

3. Цикл while

Цикл while - цикл з попередньою перевіркоюумовного вираження. Інструкція всередині циклу (блок коду у фігурних дужках) виконуватиметься у разі, якщо умовний вираз обчислюється в true . Якщо перша перевірка дасть результат false, блок інструкцій не виконається жодного разу.

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

Цей цикл виведе на екран таблицю множення для числа 3:

Var i = 1; var msg = ""; while (i< 10) { msg+= i + " x 3 = " + (i * 3) + "
"; i++; ) document.write(msg);
Мал. 5. Результат виконання циклу while

4. Цикл do...while

Цикл do...while; перевіряє умову продовження після виконання циклу. На відміну від циклу while, do...while; тіло циклу виконується як мінімум один раз, оскільки умова перевіряється наприкінці циклу, а чи не на початку. Цей цикл використовується рідше, ніж while , оскільки практично ситуація, коли потрібно хоча б одноразове виконання циклу, зустрічається рідко.

Var result = ""; var i = 0; do ( i += 1; result += i + " "; ) while (i< 5); document.write(result);
Мал. 6. Результат виконання циклу do...while

У наступному прикладі оператори всередині циклу виконуються один раз, навіть якщо умова не виконується.

Var i = 10; do ( document.write(i + " "); i++; ) while (i< 10);

5. Нескінченні цикли

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

For (var i = 25; i > 10; i++) ( document.write("Ця пропозиція буде виводитися нескінченно...
"); }

6. Вкладені цикли

Цикл всередині іншого циклу називається вкладеним. За кожної ітерації циклу вкладений цикл виконується повністю. Вкладені цикли можна створювати за допомогою циклу for та циклу while.

For (var count = 1; count< 3; count++) { document.write(count + ". Строка цикла
"); for (var nestcount = 1; nestcount< 3; nestcount++) { document.write("Строка вложенного цикла
"); } }
Мал. 7. Результат виконання вкладеного циклу for

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

Цикл можна керувати за допомогою операторів break; та continue; .

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

Оператор break; завершує виконання поточного циклу. Він використовується у виняткових випадках, коли цикл не може виконуватися з якоїсь причини, наприклад, якщо програма виявляє помилку. Найчастіше оператор break; є частиною конструкції if.

Коли оператор break; використовується без мітки, він дозволяє вийти з циклу або з інструкції switch. У наступному прикладі створюється лічильник, значення якого повинні змінюватися від 1 до 99, проте оператор break перериває цикл після 14 ітерацій.

For (var i = 1; i< 100; i++) { if (i == 15) { break; } document.write(i); document.write("
"); }
Мал. 8. Результат роботи оператора break у циклі for

Для вкладених циклів оператор break; використовується з міткою, за допомогою якої завершується робота іменованої інструкції. Мітка дозволяє вийти з будь-якого блоку коду. Іменованою інструкцією може бути будь-яка інструкція, зовнішня щодо оператору break; . Як мітки може бути ім'я інструкції if або ім'я блоку інструкцій, укладених у фігурні дужкилише присвоєння мітки цьому блоку. між ключовим словом break; та ім'ям мітки не допускається переклад рядка.

Outerloop: for(var i = 0; i< 10; i++) { innerloop: for(var j = 0; j < 10; j++) { if (j >3) break; // Вихід із самого внутрішнього циклу if (i == 2) break innerloop; // Те саме if (i == 4) break outerloop; // Вихід із зовнішнього циклу document.write("i = " + i + " j = " + j + "
"); ) ) document.write("FINAL i = " + i + " j = " + j + "
");

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

Оператор continue; зупиняє поточну ітерацію циклу та запускає нову ітерацію. При цьому, цикл whileповертається безпосередньо до своєї умови, а цикл forспочатку обчислює вираз інкременту, а потім повертається до умови.

У цьому прикладі на екран будуть виведені всі парні числа:

Var i; for(i = 1; i<= 10; i++) { if (i % 2 !== 0) { continue; } document.write("
парне число= " + i); )
Мал. 9. Результат роботи оператора continue у циклі for

Оператор continue; також може застосовуватися у вкладених циклах із міткою.

Outerloop: for (var i = 0; i "); for (var j = 0; j "); ) ) document.write("Всі цикли виконані"+"
");
Мал. 10. Результат роботи оператора continue з міткою

Одним із найважливіших інструментів у програмуванні є цикли. Вони корисні у випадках, коли потрібно зробити щось певне у раз.

Якщо таке завдання, наприклад, вивести на екран рядок " всім привіт " 1000 раз. Те, без використання циклу, по-перше, це займе багато часу і по-друге, це буде виглядати не дуже красиво. Тому цикли потрібно знати на відміннотому, що вони використовуються дуже і дуже часто.

У програмуванні існують чотири цикли, це while, do-while, for і foreach. Кожен має свій синтаксис і кожен використовується у певних випадках.

Найчастіше використовуються цикли for і foreach, потім while, а цикл do-while зустрічається дуже рідко.

І почнемо ми з циклу 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.

Синтаксис циклу do-while наступний:

Різниця між циклом while та do-while полягає в тому, що цикл do-while може виконатися хоча б один раз, незалежно від умови, тоді як у циклу while якщо умова лож, то він взагалі не виконається.

Зауваження! Як і у циклу while, не забудьте інкрементувати лічильник i.

Перейдемо до практики. Наприклад порахуємо добуток чисел від 1 до 10.

Var i = 1; var production = 1; do( production *= i; i++; )while(i

Результатом буде число 3628800. На першому кроці ми відразу увійшли в цикл, незважаючи на його умову, де виконалося операція production * = i (це теж те, що і production = production * 1). Потім інкрементуємо лічильник. Після інкрементації він має значення 2. І наприкінці перевіряємо умову, якщо значення лічильника менше або дорівнює 10, то йдемо до наступної ітерації циклу, інакше ми виходимо з циклу і йдемо далі.

Цикл for

Як я вже написав вище цикл for, зустрічається досить часто, тому його потрібно знати дуже добре.

Синтаксис циклу forнаступний:

Для кращого розуміння вирішимо просте завдання. Допустимо нам потрібно порахувати суму чисел від 1 до 1000 за допомогою циклу for.

Var summa = 0; for(var i = 1; i

Зберігаємо документ, відкриваємо його у браузері та бачимо, що результат дорівнює 500500.

Зауваження! Якщо в циклі знаходиться лише один оператор, то фігурні дужки використовувати необов'язково.

Для демонстрації виведемо на екран 5 разів, якийсь рядок, наприклад "Здрастуйте!".

For(var i = 1; i

Зауваження! Після виконання циклу змінної i, залишається останнє значення.

Тепер вирішимо завдання трохи складніше, наприклад, нам потрібно вивести рядок "Привіт" 100 разів. І щоб це все не вивелося в один ряд, то після кожної 10-ої ітерації, перейдемо на новий рядок. І наприкінці виведемо значення змінної i.

For(var i = 1; i<= 100; i++){ document.write("привет!"); if(i % 10 == 0)  document.write("
"); ) document.write("

Змінна i = " + i + "

"); // i = 101

Цикл foreachзазвичай використовується для перебору об'єктів та масивів. Тому про нього я розповім у статті, що описує роботу з масивами.

Оператор breakпризначений для того, щоб примусово вийти з циклу.

Оператор continueдозволяє перервати поточну ітерацію циклу і перейти до наступної.

Для кращого розуміння теж вирішимо просте завдання. Припустимо, ми хочемо порахувати суму непарних чисел з 1 до 20. І коли дійдемо до 15-ї ітерації, то вийдемо з циклу.

Var summa = 0; for(var i = 1; i<= 20; i++){ //Пропускаем текущею итерацию цикла if(i % 2 == 0) continue; summa += i; //Выходим совсем из цикла. if(i == 15) break; document.write(i + ". Итерация
"); ) document.write("

summa= "+ summa +"

"); //summa = 64

Зберігаємо документ, відкриваємо його у браузері та дивимося на результат.

Для тренування спробуйте змінити написаний скрипт таким чином, щоб він порахував суму парних чисел.

На цьому закінчується ця стаття. Тепер Ви знаєте синтаксис циклів while, do-while, for та як з ними працювати. Також познайомилися з операторами break та continue.

Цикли

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

У мові JavaScript є чотири цикли: while, do/while, for та for/in. Кожному з них присвячено один із наступних підрозділів. Одне із звичайних застосувань циклів – обхід елементів масиву.

Цикл while

Оператор if є базовим умовним оператором у мові JavaScript, а базовим циклом JavaScript можна вважати цикл while. Він має наступний синтаксис:

while (вираз) (інструкція)

Цикл while починає роботу з обчислення виразу. Якщо цей вираз має хибне значення, інтерпретатор пропускає інструкцію, яка становить тіло циклу, і переходить до наступної інструкції у програмі. Якщо вираз має справжнє значення, виконується інструкція, що утворює тіло циклу, потім управління передається на початок циклу і вираз обчислюється знову. Іншими словами, інтерпретатор знову і знову виконує інструкцію тіла циклу, доки значення виразу залишається істинним. Зверніть увагу, що є можливість організувати нескінченний цикл за допомогою синтаксису while (true).

Зазвичай не потрібно, щоб інтерпретатор JavaScript знову і знову виконував ту саму операцію. Майже у кожному циклі з кожною ітерацією циклу одна чи кілька змінних змінюють свої значення. Оскільки змінна змінюється, дії, які виконує інструкція при кожному проході тіла циклу можуть відрізнятися.

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

Var count = 0; while (count

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

Цикл do/while

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

do (інструкція) while (вираз);

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

Function printArray(a) ( var len = a.length, i = 0; if (len == 0) console.log("Порожній масив"); else ( do ( console.log(a[i]); ) while (++i

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

Цикл for

Цикл for є конструкцією циклу, яка часто виявляється більш зручною, ніж цикл while. Цикл for спрощує конструювання циклів, наступних шаблону, загальному більшості циклів. Більшість циклів мають деяку змінну-лічильник. Ця змінна ініціалізується перед початком циклу та перевіряється перед кожною ітерацією. Нарешті, змінна-лічильник інкрементується або змінюється будь-яким іншим чином наприкінці тіла циклу, безпосередньо перед повторною перевіркою змінної. Ініціалізація, перевірка та оновлення - це три ключові операції, що виконуються зі змінною циклу. Інструкція for робить ці три кроки явною частиною синтаксису циклу:

for(ініціалізація; перевірка; інкремент) ( інструкція )

Ініціалізація, перевірка та інкремент – це три вирази (розділених точкою з комою), які відповідальні за ініціалізацію, перевірку та збільшення змінної циклу. Розташування в першому рядку циклу спрощує розуміння те, що робить цикл for, і дозволяє забути ініціалізувати чи збільшити змінну циклу.

Найпростіше пояснити роботу циклу for, показавши еквівалентний йому цикл while:

ініціалізація; while (перевірка) ( інструкція; інкремент; )

Іншими словами, вираз ініціалізації обчислюється один раз перед початком циклу. Цей вираз, як правило, є виразом із побічними ефектами (зазвичай привласненням). JavaScript також допускається, щоб вираз ініціалізації був інструкцією оголошення змінної var, тому можна одночасно оголосити та ініціалізувати лічильник циклу.

Вираз перевірки обчислюється перед кожною ітерацією і визначає, чи виконуватиметься тіло циклу. Якщо результатом перевірки є справжнє значення, виконується інструкція, яка є тілом циклу. Наприкінці циклу обчислюється вираз інкременту. Щоб використання цього виразу мало сенс, воно має бути виразом із побічними ефектами. Зазвичай це вираз присвоювання, або вираз, що використовує оператор ++ або --.

Вивести числа від 0 до 9 можна також за допомогою циклу for, як показано нижче, на противагу еквівалентному циклу while, показаному в прикладі раніше:

For (var count = 0; count

Звичайно, цикли можуть бути значно складнішими, ніж у цих простих прикладах, і іноді у кожній ітерації циклу змінюється кілька змінних. Ця ситуація - єдиний випадок у JavaScript, коли часто застосовується оператор "кома" - він дозволяє об'єднати кілька виразів ініціалізації та інкрементування в один вираз, що підходить для використання в циклі for:

Var i,j; for (i = 0, j = 0; i

Цикл for/in

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

for (змінна in об'єкт) ( інструкція )

Як змінну тут зазвичай використовується ім'я змінної, але так само можна використовувати інструкцію var, що оголошує єдину змінну. Параметр об'єкта - це вираз, що повертає об'єкт. І як завжди, інструкція - це інструкція чи блок інструкцій, що утворюють тіло циклу.

Для обходу елементів масиву природно використовувати звичайний цикл:

Var arr =; for (var i = 0; i

Інструкція for/in також природно дозволяє виконати обхід властивостей об'єкта:

// Створимо новий об'єкт var obj = (name: "Alex", password: "12345"); for (var i in obj) ( // Вивести значення кожної властивості об'єкта console.log(obj[i]); )

Щоб виконати інструкцію for/in, інтерпретатор JavaScript спочатку обчислює вираз об'єкта. Якщо воно повертає значення null або undefined, інтерпретатор пропускає цикл та переходить до наступної інструкції. Якщо вираз повертає просте значення, воно перетворюється на еквівалентний обгортку. В іншому випадку вираз повертає об'єкт. Потім інтерпретатор виконує по одній ітерації циклу для кожного перерахованого властивості об'єкта. Перед кожною ітерацією інтерпретатор обчислює значення висловлювання, зберігає їх у змінної і надає йому ім'я властивості (рядкове значення).

Дуже часто потрібно, щоб певну частину програми виконували багато разів. Зрозуміло, можна просто зробити так: скопіювати-вставити і так потрібне число разів. Однак це абсурдно, особливо, якщо дію треба виконувати, наприклад, 1000 разів. Тому існують так звані цикли, що є у більшості мов програмування. І про них я вам розповім.

Містить певний код, який багаторазово прокручується. Існує кілька видів циклів: for, whileі do-while.

Почнемо з першого циклу (і найпопулярнішого) - циклу for. Загальний вигляд цього циклу такий:

For (змінна_ітерації = початкове_значення; умова; дія_після_кожної_ітерації) (
//код програми
}

Давайте прокоментую, що тут написано. Спочатку йде - змінна ітерація. Це просте ім'я змінної для ітерації. Далі йде початкове значення. Власне, назва говорить сама за себе. Далі йде умова, під час виконання якої (тобто повертається true) цикл запускається ще один раз, і, нарешті, дія, яка виконується після кожної ітерації. Як правило, це зміна змінної для ітерації.

Давайте з Вами напишемо простий скрипт, який виводитиме кількість ітерацій циклу:

For (i = 0; i< 100; i++)
document.write(i + " ");

Тут ми поставили змінну для ітерації (називається i), якій надали значення 0 . Далі перевіряється умова: i< 100 . Якщо воно виконується, виконується одна ітерація циклу. Після виконання кожної ітерації відбувається i++(тобто збільшення змінної iна 1 ). Знову перевіряється умова, і якщо вона є істинною, то виконується ще одна ітерація. І так доти, доки умова i< 100 не стане хибним. Очевидно, що воно буде хибним лише через 100 ітерацій. Таким чином, цей цикл виконуватиметься 100 разів, що ми можемо побачити, якщо запустимо цей скрипт. І ще дещо. Так як у нас тут виконується лише один оператор ( document.write()), то наявність фігурних дужок необов'язкова. Якщо у Вас 2 і більше операторів крутяться у циклі, тоді необхідно їх поставити.

Тепер поговоримо про другий різновид циклів у JavaScript - while. В принципі, цикл дуже схожий на for(хоча всі цикли схожі). Але тут загальний вигляд інший:

While (умова) (
//код програми
}

Як бачите, тут немає ні змінної для ітерації, ні будь-яких дій після ітерації. Звідси випливає висновок: щоб вийти з циклу необхідно в самому циклі зробити так, щоб " умоваСтало хибним. Якщо це не зробити, то відбудеться зациклювання, а, отже, Ваш скрипт повисне.

Давайте реалізуємо таке ж завдання, як і раніше, але використовуючи цикл while.

Var i = 0;
while (i< 100) {
i++;
document.write(i + " ");
}

Перед початком циклу ми створили змінну i, якій надали початкове значення. Потім перед запуском циклу перевіряється умова, і якщо воно є істинним, то запускається ітерація циклу, в якій ми збільшуємо змінну для ітерації (інакше відбудеться зациклювання). І виводимо цю змінну.

І, нарешті, останній вигляд циклів у JavaScript - цикл do-while. Синтаксис такий:

Do (
//код програми
) while (умова)

Дуже схожий на цикл whileПроте, тут є лише одна, але дуже принципова відмінність. Якщо цикл whileспочатку перевіряє умову, а потім уже виконує чи ні ітерацію. То цикл do-whileспочатку саме виконує ітерацію, і лише потім перевіряє умову. І якщо воно хибне, то виходить із циклу. Іншими словами, незалежно від умови цей цикл гарантовано виконається хоча б 1 раз. Думаю, що цей код буде зайвим, але все ж таки.

Var i = 0;
do (
i++;
document.write(i + " ");
) while (i< 100)

Поясняти код не буду, впевнений, Ви з мене з ним розберетеся. Тому я краще перейду до двох цікавих операторів: breakі continue.

Почнемо з break. Цей оператор дозволяє достроково вискочити з циклу. Давайте з Вами напишемо такий код:

For (i = 0; i< 100; i++) {
if (i == 50) break;
document.write(i + " ");
}

Ви можете запустити цей скрипт і виявите, що вивели лише числа до 49 , так як при i = 50цикл перервався завдяки оператору break.

Тепер розповідаю про оператора continue. Цей оператор дозволяє перейти до наступної ітерації циклу. Щоб не розписувати тут багато, краще одразу покажу приклад:

For (i = 0; i< 100; i++) {
if (i == 50) continue;
document.write(i + " ");
}

Якщо ви запустите цей скрипт, то побачите, що не вистачає числа 50 . Це сталося тому, що за i = 50, ми переходимо до наступної ітерації циклу, перед якою iзбільшується на 1 і стає рівним 51-му.

Ось, начебто, і все, що хотілося написати про циклах JavaScript. Сподіваюся, Вам стало ясно. Можете також придумати собі якесь завдання і вирішити її. Це буде чудовим тренуванням.

Цикли- це особливі висловлювання, що дозволяють виконати той самий блок коду кілька разів. Виконання коду переривається після настання певної умови.

JavaScript пропонує програмістам кілька різновидів циклів. Розглянемо їх докладніше.

Цикл із лічильником

Циклз лічильником зручний, якщо якийсь код потрібно виконати строго кілька разів. Ймовірно, це найпоширеніший вид циклу.

Цикл із лічильником записується так:

for (<выражение инициализации>; <условие>; <приращение>)
<тело цикла>

Тут використовується ключове слово for. Тому такі цикли часто називають циклами for.

Вираз ініціалізації виконується найпершим і лише один раз. Воно надає особливої ​​змінної, званої лічильником циклу, якесь початкове значення (зазвичай 1). Лічильник циклу підраховує, скільки разів було виконано тіло циклу - власне код, який потрібно виконати певну кількість разів.

Наступний крок – перевірка умови. Воно визначає момент, коли виконання циклу перерветься і почне виконуватися наступний за ним код. Як правило, умова порівнює значення лічильника циклу з його граничним значенням. Якщо умова повертає true, виконується тіло циклу, інакше цикл завершується і починається виконання коду, наступного за циклом.

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

Приклад циклу з лічильником:

for (i = 1; i< 11; i++) {
a + = 3;
b = i * 2 + 1;
}

Цей цикл буде виконано 10 разів. Ми присвоюємо лічильнику i початкове значення 1 після кожного виконання тіла циклу збільшуємо його на одиницю. Цикл перестане виконуватися, коли значення лічильника збільшиться до 11 і умова циклу стане хибним.

Лічильник циклу можна записати в одному із виразів тіла циклу, як це зробили ми. У нашому випадку лічильник i міститиме послідовно зростаючі значення від 1 до 10, які використовуються в обчисленнях.

Наведемо ще два приклади циклу з лічильником:

for (i = 10; i > 0; i--) (
a + = 3;
b = i * 2 + 1;
}

Тут значення лічильника декрементується. Початкове значення дорівнює 10. Цикл виконається 10 разів і завершиться, коли лічильник i буде містити 0; при цьому значення останнього послідовно зменшуватимуться від 10 до 1.

for (i = 2; i< 21; i += 2) b = i * 2 + 1;

На цьому прикладі початкове значення лічильника дорівнює 2, а кінцеве - 21, але цикл виконається, знову ж таки, 10 раз. А все тому, що значення лічильника збільшується на 2 і приймає послідовно значення 2, 4, 6 ... 20.

Цикл із постумовою

Цикл з постумовою багато в чому схожий на цикл із лічильником: він виконується доти, доки залишається істинною умова циклу. Причому умова перевіряється не до, а після виконання тіла циклу, через що цикл з постумовою і отримав свою назву. Такий цикл виконається хоча б один раз, навіть якщо його умова з самого початку хибна.

Формат циклу з умовою:

do
<тело цикла>
while (<условие>);

Для завдання циклу з умовою передбачені ключові слова do і while, тому такі цикли часто називають "циклами do-while".

Ось приклад циклу з постумовою:

do (
a = a * i + 2;
++i;
) while (a< 100);

А ось ще один приклад:

var a = 0, i = 1;
do (
a = a * i + 2;
++i;
) while (i< 20);

Хоча тут зручніше був би вже знайомий нам і спеціально призначений для таких випадків цикл із лічильником.

Цикл із передумовою

Циклз передумовою відрізняється від циклу з тим, що умова перевіряється перед виконанням тіла циклу. Отже, якщо вона (умова) спочатку помилкова, цикл не виконається жодного разу:

while (<условие>)
<тело цикла>

Для створення циклу з умовою передбачено ключове слово while. Тому такі цикли називають ще "циклами while" (не плутати із "циклами do-while"!).

Приклад циклу з передумовою:

while (a< 100) {
a = a * i + 2;
++i;
}

Переривання та перезапуск циклу

Іноді буває потрібно перервати виконання циклу. Для цього JavaScript надає Web-програмістам оператори break та continue.

Оператор переривання break дозволяє перервати виконання циклу і перейти до наступного виразу:

while (a< 100) {
a = a * i + 2;
if (a > 50) break;
++i;
}

У цьому прикладі ми перериваємо виконання циклу, якщо значення змінної aперевищить 50.

Оператор перезапуску continue дозволяє перезапустити цикл, тобто залишити невиконаними всі наступні вирази, що входять у тіло циклу, і запустити виконання циклу від самого його початку: перевірка умови, виконання прирощення і тіла і т.д.

Приклад:

while (a< 100) {
i = ++i;
if (i > 9 && i< 11) continue;
a = a * i + 2;
}

Тут ми пропускаємо вираз, що обчислює aдля всіх значень iвід 10 до 20