JavaScript · Синтаксис · Початковий рівень

Цикл for та масиви

15 завдань

Практика циклу for JavaScript на масивах: перебір елементів, фільтрація значень, підрахунки, пошук мінімуму і максимуму, робота з рядками, датами та вкладеними даними.

Короткий вступ до теми та пояснення перед вправами (вправи нижче):

Цикл for...of і масиви

#
У JavaScript немає кортежів — масиви покривають обидва варіанти використання. Ідіоматичний спосіб ітерації по масиву — цикл for...of: ```javascript const numbers = [3, 7, 1, 9, 4]; for (const n of numbers) { console.log(n); } ``` На кожній ітерації n містить наступний елемент. Коли масив закінчується — цикл завершується. Та сама синтаксична форма працює з рядками — вони ітеруються символ за символом. for...of з'явився в ES6 і є кращим сучасним синтаксисом. Старий код використовує індексні for-цикли — ви побачите обидва варіанти, але for...of читається зрозуміліше для більшості завдань. Коли потрібні і індекс, і значення — використовуйте entries(): ```javascript const days = ["Monday", "Tuesday", "Wednesday"]; for (const [i, day] of days.entries()) { console.log(`День ${i + 1}: ${day}`); } ``` entries() повертає пари [індекс, значення]. Деструктуризація [i, day] розпаковує кожну пару прямо в заголовку циклу. Це JavaScript-аналог Python's enumerate().

Побудова масивів під час ітерації

#
Багато завдань із for мають однакову форму: починаємо з порожнього масиву, проходимо по джерелу, вирішуємо, чи включати кожен елемент, і додаємо обраних через push(). ```javascript const numbers = [2, 5, 0, 8, 11, 14, 17, 0]; const result = []; for (const n of numbers) { if (n % 2 === 0 && n !== 0) { result.push(n); } } console.log(result); ``` push() додає елемент у кінець масиву. Це аналог Python's append(). Накопичення суми: ```javascript const numbers = [5, 10, 15, 20]; let total = 0; for (const n of numbers) { total += n; } console.log(total); ``` Відстеження поточного максимуму — починаємо з першого елемента, оновлюємо, коли знаходимо щось більше: ```javascript const numbers = [8, 3, 15, 6, 2]; let maxNum = numbers[0]; for (const n of numbers) { if (n > maxNum) { maxNum = n; } } console.log(maxNum); ``` Починати з numbers[0] замість 0 важливо. Якщо всі числа від'ємні, початок з 0 дав би неправильну відповідь.

Ключові патерни із завдань

#
З'єднання елементів масиву в рядок — у JavaScript масиви мають вбудований метод join(): ```javascript const numbers = [3, 7, 1, 9, 4]; const result = numbers.join("-"); console.log(result); // 3-7-1-9-4 ``` join() автоматично перетворює кожен елемент на рядок. Явне перетворення не потрібне, якщо не треба форматувати окремі значення. Побудова масиву пар — поєднуємо кожен елемент з обчисленими даними: ```javascript const words = ["JavaScript", "is", "fast"]; const result = []; for (const word of words) { result.push([word, word.length]); } console.log(result); // [['JavaScript', 10], ['is', 2], ['fast', 4]] ``` Фільтрація за властивістю рядка: ```javascript const words = ["javascript", "java", "go", "python", "c"]; let count = 0; for (const word of words) { if (word.length > 5) { count++; } } console.log(count); ``` Розбір структурованих даних — розбиваємо рядок по роздільнику, потім порівнюємо частини. Завдання на фільтрацію дат: розбити по "-", потім порівняти рік і місяць як числа.

Вправи:

01

Числа через дефіс.

#

Дано масив чисел. Виведіть кожне число з масиву в тому ж рядку в терміналі через дефіс. 3-7-1-9-4

let numbers = [3, 7, 1, 9, 4];
Рішення 
let numbers = [3, 7, 1, 9, 4];
let result = "";
for (let n of numbers) {
    result += String(n) + "-";
}
result = result.slice(0, -1);
console.log(result);

// або найкоротший варіант через join
let numbers = [3, 7, 1, 9, 4];
let result = numbers.join("-");
console.log(result);
02

Парні числа без нулів.

#

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

let numbers = [2, 5, 0, 8, 11, 14, 17, 0];
let newItems = [];
Рішення 
let numbers = [2, 5, 0, 8, 11, 14, 17, 0];
let newItems = [];
for (let n of numbers) {
    if ((n !== 0) && (n % 2 === 0)) {
        newItems.push(n);
    }
}
console.log(newItems);

// або так можна: спочатку перевірити нуль, а потім парність
let numbers = [2, 5, 0, 8, 11, 14, 17, 0];
let result = [];

for (let n of numbers) {
    if (n === 0) {
        continue;
    }
    if (n % 2 === 0) {
        result.push(n);
    }
}

console.log(result);
03

Сума елементів масиву.

#

Дано масив чисел. Знайдіть суму всіх елементів масиву.

let numbers = [5, 10, 15, 20];
let total = 0;
Рішення 
let numbers = [5, 10, 15, 20];
let total = 0;
for (let n of numbers) {
    total += n;
}
console.log("Сума:", total);

// або так можна через reduce, коли цей метод вже знайомий
let numbers = [5, 10, 15, 20];
let total = numbers.reduce((sum, n) => sum + n, 0);
console.log("Сума:", total);
04

Непорожні рядки.

#

Дано масив рядків. Додайте в новий масив рядки, якщо вони не порожні.

let words = ["0000-0000-0000-0000", "", "1111-1111-1111-1111", "2222-2222-2222-2222", ""];
let newWords = [];
Рішення 
let words = ["0000-0000-0000-0000", "", "1111-1111-1111-1111", "2222-2222-2222-2222", ""];
let newWords = [];
for (let w of words) {
    if (w !== "") {
        newWords.push(w);
    }
}
console.log(newWords);
05

Квадрати чисел більших за 10.

#

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

let numbers = [3, 12, 5, 18, 7, 25];
let result = [];
Рішення 
let numbers = [3, 12, 5, 18, 7, 25];
let result = [];
for (let n of numbers) {
    if (n > 10) {
        result.push(n ** 2);
    }
}
console.log(result);

// або так можна: спочатку зберегти квадрат у змінну
let numbers = [3, 12, 5, 18, 7, 25];
let result = [];

for (let n of numbers) {
    if (n > 10) {
        let square = n ** 2;
        result.push(square);
    }
}

console.log(result);
06

Дні тижня з номерами.

#

Дано масив з назвами днів тижня. Виведіть кожен день у форматі: "День X: <назва>".

let days = ["Понеділок", "Вівторок", "Середа", "Четвер", "П’ятниця"];
Рішення 
let days = ["Понеділок", "Вівторок", "Середа", "Четвер", "П’ятниця"];
let dayNum = 1;
for (let day of days) {
    console.log(`День ${dayNum}: ${day}`);
    dayNum += 1;
}

// або так можна через звичайний індекс
let days = ["Понеділок", "Вівторок", "Середа", "Четвер", "П’ятниця"];

for (let i = 0; i < days.length; i += 1) {
    console.log(`День ${i + 1}: ${days[i]}`);
}
07

Максимум через цикл.

#

Дано масив чисел. Знайдіть максимальне число в масиві, використовуючи цикл for.

let numbers = [8, 3, 15, 6, 2];
let maxNum = numbers[0];
Рішення 
let numbers = [8, 3, 15, 6, 2];
let maxNum = numbers[0];

for (let n of numbers) {
    if (n > maxNum) {
        maxNum = n;
    }
}

console.log("Максимум:", maxNum);

// або так можна
let numbers = [8, 3, 15, 6, 2];
let maxNum = Math.max(...numbers);
console.log("Максимум:", maxNum);
08

Рядки довші за 5 символів.

#

Дано масив рядків. Порахуйте, скільки рядків довші за 5 символів.

let words = ["javascript", "java", "go", "javascript", "c"];
let count = 0;
Рішення 
let words = ["javascript", "java", "go", "javascript", "c"];
let count = 0;
for (let w of words) {
    if (w.length > 5) {
        count += 1;
    }
}
console.log("Кількість рядків:", count);
09

Додатні числа з масиву.

#

Дано масив чисел. Виведіть тільки ті числа, які більші за 0.

let numbers = [-3, 5, -1, 7, 0, -2];
Рішення 
let numbers = [-3, 5, -1, 7, 0, -2];
for (let n of numbers) {
    if (n > 0) {
        console.log(n);
    }
}
10

Рядок через кому.

#

Дано масив рядків. Створіть рядок, який складатиметься з усіх елементів масиву, розділених комою та пробілом.

let words = ["JavaScript", "це", "круто"];
let result = "";
Рішення 
let words = ["JavaScript", "це", "круто"];
let result = "";
for (let w of words) {
    result += w + ", ";
}
result = result.slice(0, -2);
console.log(result);

// або коротше через join
let words = ["JavaScript", "це", "круто"];
let result = words.join(", ");
console.log(result);
11

Слова та їх довжина.

#

А будьте такі ласкаві 🧐, створити з цього масиву рядків новий масив, у якому елементами будуть масиви. У кожному масиві два елементи: рядок і його довжина, наприклад: words = ["JavaScript", "це", "круто"] new = [["JavaScript", 10], ["це", 2], ["круто", 5]]

let words = ["JavaScript", "це", "круто"];
let newItems = [];
Рішення 
let words = ["JavaScript", "це", "круто"];
let newItems = [];
for (let word of words) {
    let t = [word, word.length];
    newItems.push(t);
}
console.log(newItems);

// або так можна без проміжної змінної
let words = ["JavaScript", "це", "круто"];
let result = [];

for (let word of words) {
    result.push([word, word.length]);
}

console.log(result);
12

Символи рядка в нижньому регістрі.

#

Хм... Терміново потрібно зробити з цього рядка "Цієї", масив, який складатиметься із символів цього рядка в нижньому регістрі!!! (маленькі літери)

let word = "Цієї";
Рішення 
let word = "Цієї";
let arr = Array.from(word.toLowerCase());
console.log(arr);

// або через цикл, щоб явно побачити додавання кожного символу
let word = "Цієї";
let arr = [];

for (let char of word) {
    arr.push(char.toLowerCase());
}

console.log(arr);
13

Номер картки через дефіс.

#

Знову терміново! Якийсь розумник зберіг номер банківської картки у вигляді масиву по 4 цифри картки: card = ["1111", "2222", "3333", "4444"] Зробіть із цього рядок у такому форматі: normCard = "1111-2222-3333-4444"

let card = ["1111", "2222", "3333", "4444"];
Рішення 
let card = ["1111", "2222", "3333", "4444"];

let normCard = card.join("-");

console.log(normCard);

// або так:
let card = ["1111", "2222", "3333", "4444"];

let normCard = "";

for (let part of card) {
    normCard += part + "-";
}

normCard = normCard.slice(0, -1);

console.log(normCard);
14

Мінімум, максимум і середнє.

#

Продовжуємо терміновий квест! Знайдіть по-швидкому: - мінімальне значення в масиві; - максимальне значення в масиві; - суму всіх значень у масиві; - середнє арифметичне значень у масиві. А потім, за бажанням, не по-швидкому.

let arr = [10, 100, 500, 11, 18, 99, -3, 101];
Рішення 
// по-швидкому

let numbers = [5, 2, 9, 1, 7];

let minNum = Math.min(...numbers);
let maxNum = Math.max(...numbers);

let total = numbers.reduce((sum, n) => sum + n, 0);

let average = total / numbers.length;

console.log("Мінімум:", minNum);
console.log("Максимум:", maxNum);
console.log("Сума:", total);
console.log("Середнє:", average);

// не по-швидкому

let numbers = [5, 2, 9, 1, 7];

let minNum = numbers[0];
let maxNum = numbers[0];
let total = 0;

for (let n of numbers) {
    if (n < minNum) {
        minNum = n;
    }

    if (n > maxNum) {
        maxNum = n;
    }

    total += n;
}

let average = total / numbers.length;

console.log("Мінімум:", minNum);
console.log("Максимум:", maxNum);
console.log("Сума:", total);
console.log("Середнє:", average);
15

Фільтр дат після 2027.09.01.

#

На останок, за 5 хвилин до кінця робочого дня потрібно: Є масив із датами у чіткому форматі yyyy.mm.dd: dates = ["2027.09.25", "2027.10.14", "2027.03.01", "2027.12.29", "2027.09.11", "2027.05.06"] Потрібен новий масив, де будуть тільки дати після 2027.09.01. Підказка: спробуйте порівнювати рядки через < і >, інколи це корисно😉.

let dates = ["2027.09.25", "2027.10.14", "2027.03.01", "2027.12.29", "2027.09.11", "2027.05.06"];
let newItems = [];
Рішення 
let dates = ["2027.09.25", "2027.10.14", "2027.03.01", "2027.12.29", "2027.09.11", "2027.05.06"];
let newItems = [];
for (let date of dates) {
    if (date >= "2027.09.01") {
        newItems.push(date);
    }
}
console.log(newItems);