Цикли
Цикл це повторюваний набір дій.
Ітерація циклу - один крок виконання циклу.
Ітератор (лічильник) - змінна, що збільшує або зменшує своє значення на кожному кроці циклу, використовується для рахування ітерацій, доступу до елементів масиву і т.п.
Увага! Будьте обережні! Якщо невірно задати умову циклу - може створитися безкінечний цикл, при цьому браузер підвисає і його доведеться перезапустити.
Цикл while
Даний цикл має в собі умову. Поки вона ствердна - виконуються ітерації циклу.
Керування ітератором здійснюється в тілі циклу, а його ініціалізація - перед циклом.
Ітератор не є обов'язковим, якщо не потрібно рахувати ітерації.
while ( умова ) {
тіло циклу;
}
let s = 'hello';
let i = 0;
while (i < s.length) {
console.log(s[i]);
i++;
}
// коротший варіант:
let s = 'hello', i = 0;
while (i < s.length) console.log(s[i++]);
Даний цикл може не виконати жодної ітерації:
let s = '';
let i = 0;
while (i < s.length) {
console.log(s[i]);
i++;
}
Завдання
-
Створіть запит імені користувача:
let n = prompt("Введіть ім'я:");
if (n === null) n = ''; - Переберіть циклом while всі літери отриманої змінної.
- Якщо код символа парний - виведіть цей символ і його код в консоль за допомогою console.error,
інакше - за допомогою console.warn.
Цикл do-while
Даний цикл спочатку виконує ітерацію, а в кінці перевіряє чи виконувати наступну.
do {
тіло циклу;
} while ( умова );
let i = 1, img;
do {
img = document.createElement('img');
img.setAttribute('src', 'images/slide_' + i++ + '.jpg');
slider.appendChild(img);
} while (i < 6);
Цикл do-while мінімум одну ітерацію виконає.
Даний цикл використовується найрідше, оскільки не часто зустрічаються задачі, в яких потрібно виконати мінімум одну ітерацію.
Завдання
- Виводьте в консоль квадрати чисел 1, 2, 3, 4..., останній квадрат повинен бути більшим за 2100.
Цикл for
Цикл for найпоширеніший, тому що суміщає в одній короткій строці кода ініціалізацію ітератора, умову і інкремент ітератора.
for ( ініціалізація лічильника ; умова ; інкремент лічильника ) {
тіло цикла;
}
for (let i = 1; i < 5; i = i + 1) {
console.log(i);
}
let s = 'Маша', r = '';
for (let i = s.length - 1; i >= 0; i--) {
r += s[i];
}
console.log(r);
Порядок виконання циклу:
- Ініціалізація ітератора.
- Перевірка умови.
- Виконання ітерації.
- Інкремент лічильника.
- Перевірка умови.
- Виконання ітерації.
- Інкремент лічильника.
- Перевірка умови.
- ...
Різниця між let і var в циклі
Змінна, що створена за допомогою let, існує тільки в межах циклу. Змінна var - також і поза межами циклу.
for (let i = 0; ...) { ... }
for (let i = 0; ...) { ... }
for (let i = 0; ...) { ... }
for (var i = 0; ...) { ... }
for (i = 0; ...) { ... }
for (i = 0; ...) { ... }
Протестуйте два наступних фрагмента кода:
for (var i = 0; i < 3; i++) console.log('>', i);
console.log('=', i);
for (let i = 0; i < 3; i++) console.log('>', i);
console.log('=', i);
Завдання
-
Створіть змінну зі своїм іменем. Виведіть в консоль в стовбчик кожну букву строки і через пробіл - номер букви в строці:
М 0
а 1
ш 2
а 3 - Створіть пусту строку і циклом занесіть у неї цифри від 0 до 5. Виведіть строку в alert, повинно відобразитися "012345".
- Виведіть в консоль 10 випадкових чисел від 0 до 1. Використайте групування в консолі.
Вічний цикл, break, continue
Вічний цикл має завжди ствердну умову:
for (i = 0; true; i++) { ... }
for (i = 1; i > 0; i++) { ... }
while (1) { ... }
do { ... } while ('hey');
Такі цикли підвісять браузер. Тому у таких циклах потрібно передбачати примусове завершення ітерацій.
Команда break дозволяє обірвати цикл.
Наприклад, наступний код шукає букву d в тексті. Знайшли букву - далі перебирати строку немає потреби (звісно, можна скористатися методом строк для пошуку букви, даний код представлено лише для приклада).
let s = 'Lorem ipsum dolor sit amet';
for (var i = 0; i < s.length; i++) {
if (s[i] === 'd') break;
}
console.log('Буква d на ' + i + ' місці.'); // починаючи з одиниці
// що буде, якщо в циклі використати let ?
Команда continue дозволяє закінчити поточну ітерацію циклу і перейти до наступної.
Даний код знайде прості числа, виведе їх в консоль і створить з них масив. Якщо число не просте, то і немає сенсу далі щось робити з таким числом.
arr = [];
for (let i = 1; i < 300; i++) {
if (!ifSimple(i)) { continue; }
console.log(i);
arr.push(i);
}
console.log(arr);
function ifSimple(n) {
for (let i = 2; i < n; i++) {
if (n % i === 0) return false;
}
return true;
}
Оператори break та continue можна застосовувати у всіх типах циклів.
В циклі можна не задавати лічильник, якщо його задано раніше. При цьому ставиться крапка з комою:
let i = s.length - 1;
for (; i >= 0; i++) { ... }
В циклі можна не задавати зміну лічильника, якщо лічильник буде мінятися в тілі циклу:
let i = 0;
for (; i < 10;) {
...
i++;
}
В циклі можна не задавати умову, в результаті у нас вийде безкінечний цикл:
for (;;) { console.log('Браузер підвис'); }
let i = parseInt(prompt('Введіть число:', 100));
if (isNaN(i)) i = 100;
for (;;) {
if (i > 10000) break;
console.log(i);
i *= 2;
if (i % 7 === 0) i--;
}
Домашнє завдання
-
Створіть циклом строку з не менше 17 букв, що повторюються: "сода" (содасодасода...). Виведіть в консоль.
Виведіть в консоль строку, в якій всі букви "с" будуть замінені на букву "в". -
Порахуйте циклом кількість букв "о" у наступному виразі:
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore. -
Створіть функцію, що видає випадкове число від 50 до 100.
Виведіть в консоль 20 випадкових чисел за допомогою цієї функції.
Використайте групування в консолі. -
Створіть функцію, яка повертатиме дану їй строку задом наперед. За допомогою неї виведіть в консоль ваше ім'я:
рднаскелО -
Дано функцію, яка "з сервера" присилає дані про випадкового користувача:
let name, age;Виведіть в консоль вік Маші, наприклад:
function getUser(){
let users = ['Коля','Іра','Льоша','Маша','Грыша','Пєтя','Гоша','Аня','Свєта','Іван'];
let ages = ['19','21','14','18','27','22','18','21','24','31'];
let n = Math.floor(Math.random()*10);
name = users[n];
age = ages[n];
}Маша: 17 років.