Головна » Розробка » JavaScript: Масиви від А до Я для Початківців 🚀

JavaScript: Масиви від А до Я для Початківців 🚀

Ви починаєте свій шлях у світі програмування на JavaScript? Чудово! Однією з перших і найважливіших структур даних, з якою ви зіткнетеся, є масиви. Не хвилюйтеся, якщо це звучить складно. У цій статті ми розберемо все про масиви в JavaScript – від створення до складних маніпуляцій – простою та зрозумілою мовою.

Що таке масив в JavaScript? 🤔

Уявіть, що у вас є список покупок. Замість того, щоб створювати окрему змінну для кожного товару (let item1 = "молоко", let item2 = "хліб"), ви можете створити один єдиний список, який буде містити всі ці елементи. Це і є масив – впорядкована колекція даних.

В JavaScript масиви можуть зберігати елементи будь-яких типів: числа, рядки, булеві значення (true/false), і навіть інші масиви чи об’єкти.

Як створити масив? 🎨

Існує два основних способи створення масиву. Найпростіший і найпоширеніший – за допомогою квадратних дужок [].

// Створення порожнього масиву
let emptyArray = [];

// Створення масиву з елементами
let fruits = ["Яблуко", "Банан", "Апельсин"];
let numbers = [1, 2, 3, 4, 5];
let mixedData = ["Текст", 100, true];

console.log(fruits); // Виведе: ["Яблуко", "Банан", "Апельсин"]

Доступ до елементів масиву 🔍

Кожен елемент у масиві має свій індекс – порядковий номер. Важливо пам’ятати, що нумерація в JavaScript починається з 0. Щоб отримати доступ до елемента, використовуйте ім’я масиву та індекс у квадратних дужках.

let fruits = ["Яблуко", "Банан", "Апельсин"];

console.log(fruits[0]); // Виведе: "Яблуко"
console.log(fruits[1]); // Виведе: "Банан"

// Що буде, якщо звернутися до неіснуючого індексу?
console.log(fruits[5]); // Виведе: undefined

Ви також можете легко змінити елемент, звернувшись до нього за індексом:

fruits[1] = "Ківі";
console.log(fruits); // Виведе: ["Яблуко", "Ківі", "Апельсин"]

Щоб дізнатися довжину масиву (кількість елементів у ньому), використовуйте властивість length.

console.log(fruits.length); // Виведе: 3

Основні методи для роботи з масивами 🛠️

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

Додавання та видалення елементів

  • push(): Додає один або декілька елементів у кінець масиву.
  • pop(): Видаляє останній елемент з масиву і повертає його.
  • shift(): Видаляє перший елемент з масиву і повертає його.
  • unshift(): Додає один або декілька елементів на початок масиву.
let animals = ["Кіт", "Собака"];

animals.push("Хом'як"); // ["Кіт", "Собака", "Хом'як"]
console.log(animals);

animals.pop(); // ["Кіт", "Собака"]
console.log(animals);

animals.unshift("Рибка"); // ["Рибка", "Кіт", "Собака"]
console.log(animals);

animals.shift(); // ["Кіт", "Собака"]
console.log(animals);

Перебір елементів масиву (Ітерація) 🔄

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

Класичний цикл for

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

let numbers = [10, 20, 30, 40];

for (let i = 0; i < numbers.length; i++) {
  console.log(`Елемент з індексом ${i}: ${numbers[i]}`);
}

Сучасний метод forEach

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

let colors = ["червоний", "зелений", "синій"];

colors.forEach(function(color, index) {
  console.log(`Колір #${index + 1}: ${color}`);
});

Корисні методи, які варто знати 🌟

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

  • slice(start, end): Створює новий масив, копіюючи частину старого від start до end (не включаючи end). Не змінює оригінальний масив.
  • splice(start, deleteCount, ...items): Змінює оригінальний масив, видаляючи (deleteCount) або додаючи (...items) елементи, починаючи з індексу start.
  • concat(...arrays): Створює новий масив, об’єднуючи декілька масивів.
  • includes(element): Перевіряє, чи є елемент у масиві. Повертає true або false.
  • indexOf(element): Повертає перший індекс, за яким даний елемент може бути знайдений в масиві, або -1, якщо елемента немає.
  • join(separator): Об’єднує всі елементи масиву в один рядок. Як роздільник можна вказати будь-який символ.
let letters = ['a', 'b', 'c', 'd', 'e'];

// slice
let middle = letters.slice(1, 4); // ['b', 'c', 'd']
console.log(middle);
console.log(letters); // Оригінал не змінився: ['a', 'b', 'c', 'd', 'e']

// splice
letters.splice(1, 2, 'X', 'Y'); // Видаляємо 2 елементи з індексу 1 і вставляємо 'X', 'Y'
console.log(letters); // ['a', 'X', 'Y', 'd', 'e']

// join
let sentence = ["Привіт", "світ"].join(" "); // "Привіт світ"
console.log(sentence);

Висновок

Масиви – це фундаментальна концепція в JavaScript. Розуміння того, як їх створювати, отримувати доступ до елементів та використовувати основні методи, є ключовим для будь-якого розробника-початківця.

Не бійтеся експериментувати! Створюйте власні масиви, пробуйте різні методи та дивіться, що відбувається. Практика – найкращий шлях до майстерності. Успіхів у навчанні! 💻✨