JavaScript для циклу (з прикладами)

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

У програмуванні цикли використовуються для повторення блоку коду.

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

Цей підручник зосереджений на forциклі JavaScript . Про інший тип петель ви дізнаєтесь із майбутніх підручників.

JavaScript для циклу

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

  for(initialExpression; condition; updateExpression) ( // for loop body )

Ось,

1. InitialExpression инициализирует і / або оголошуються змінні і виконує тільки один раз.
2. Стан оцінюється.
   • Якщо умова є false, forцикл припиняється.
   • якщо умова є true, виконується блок коду всередині forциклу.
3. UpdateExpression оновлює значення initialExpression , коли умова true.
4. Стан оцінюється ще раз. Цей процес триває, поки умова не буде false.

Щоб дізнатись більше про умови , відвідайте Порівняльний та логічний оператори JavaScript.

Блок-схема JavaScript для циклу

Приклад 1: Відображення тексту п’ять разів

 // program to display text 10 times const n = 5; // looping from i = 1 to 5 for (let i = 1; i <= n; i++) ( console.log(`I love JavaScript.`); )

Вихідні дані

Я люблю JavaScript. Я люблю JavaScript. Я люблю JavaScript. Я люблю JavaScript. Я люблю JavaScript.

Ось як працює ця програма.

Ітерація	Змінна	Стан: i <= n	Дія
1-й	i = 1 n = 5	true	Я люблю JavaScript. друкується. i збільшено до 2 .
2-й	i = 2 n = 5	true	Я люблю JavaScript. друкується. i збільшено до 3 .
3-й	i = 3 n = 5	true	Я люблю JavaScript. друкується. i збільшено до 4 .
4-й	i = 4 n = 5	true	Я люблю JavaScript. друкується. i збільшено до 5 .
5-й	i = 5 n = 5	true	Я люблю JavaScript. друкується. i збільшено до 6 .
6-й	i = 6 n = 5	false	Цикл припинено.

Приклад 2: Відображення чисел від 1 до 5

 // program to display numbers from 1 to 5 const n = 5; // looping from i = 1 to 5 // in each iteration, i is increased by 1 for (let i = 1; i <= n; i++) ( console.log(i); // printing the value of i )

Вихідні дані

 1 2 3 4 5

Ось як працює ця програма.

Ітерація	Змінна	Стан: i <= n	Дія
1-й	i = 1 n = 5	true	1 надруковано. i збільшено до 2 .
2-й	i = 2 n = 5	true	2 надруковано. i збільшено до 3 .
3-й	i = 3 n = 5	true	3 надруковано. i збільшено до 4 .
4-й	i = 4 n = 5	true	4 надруковано. i збільшено до 5 .
5-й	i = 5 n = 5	true	5 надруковано. i збільшено до 6 .
6-й	i = 6 n = 5	false	Цикл припинено.

Приклад 3: Відображення суми n натуральних чисел

 // program to display the sum of natural numbers let sum = 0; const n = 100 // looping from i = 1 to n // in each iteration, i is increased by 1 for (let i = 1; i <= n; i++) ( sum += i; // sum = sum + i ) console.log('sum:', sum);

Вихідні дані

 сума: 5050

Тут значення суми дорівнює 0 спочатку. Потім forцикл виконується з ітерації i = 1 to 100. У кожній ітерації i додається до суми, і її значення збільшується на 1 .

Коли i стає 101 , умовою тесту є, falseі сума буде дорівнювати 0 + 1 + 2 + … + 100.

Вищевказану програму додавання суми натуральних чисел також можна записати як

 // program to display the sum of n natural numbers let sum = 0; const n = 100; // looping from i = n to 1 // in each iteration, i is decreased by 1 for(let i = n; i>= 1; i-- ) ( // adding i to sum in each iteration sum += i; // sum = sum + i ) console.log('sum:',sum);

Ця програма також дає такий самий результат, як Приклад 3 . Ви можете виконати одне і те ж завдання різними способами в програмуванні; програмування полягає в логіці.

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

JavaScript нескінченний для циклу

Якщо умова тесту в forциклі завжди true, він працює вічно (до заповнення пам'яті). Наприклад,

 // infinite for loop for(let i = 1; i> 0; i++) ( // block of code )

У наведеній вище програмі завжди є умова, trueяка потім буде запускати код протягом нескінченного часу.

У наступному навчальному посібнику ви дізнаєтеся про цикл whileі do… while.