Урок 3 – Масиви та Об’єкти: Твої Скарбниці Даних

Lesson 3

Урок 3 – Масиви та Об’єкти: Твої Скарбниці Даних 💎📦

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

Масиви – Організованість як в Профі 📋

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

Створення Масиву

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

let списокПродуктів = ["молоко", "яйця", "хліб", "шоколад"];
console.log(списокПродуктів);

Що тут відбувається:

  • списокПродуктів — це назва твого масиву.
  • Квадратні дужки [] кажуть JavaScript, “Ось тут багато чого!”
  • Кожен елемент всередині розділений комою, як інгредієнти у рецепті.

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

Потрібно дістати щось із масиву? Масиви використовують індексацію з нуля, тож починати доведеться з 0 (так, трішки дивно, але звикаєш).

console.log(списокПродуктів[0]); // Результат: молоко
console.log(списокПродуктів[3]); // Результат: шоколад

У цьому прикладі, списокПродуктів[0] дає тобі перший елемент, а списокПродуктів[3] відкриває доступ до солоденького. Легко, правда?

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

Масиви у JavaScript дуже гнучкі—як твоя дієта під час свят! Ось кілька методів для додавання чи видалення елементів:

  • push(елемент): Додає елемент в кінець.
  • pop(): Видаляє останній елемент.
  • unshift(елемент): Додає елемент на початок.
  • shift(): Видаляє перший елемент.
списокПродуктів.push("банани"); // Додає "банани" в кінець
списокПродуктів.pop(); // Видаляє останній елемент ("шоколад")
console.log(списокПродуктів);

Об’єкти – Додай Трохи Деталей 🗂️

Якщо масиви — це твої списки, то об’єкти — це як файли з картками. Кожен елемент має назву (або ключ) і значення. Уяви об’єкт як набір пар значення-ключ, який ідеально підходить, коли треба додати більше деталей.

Створення Об’єкта

Об’єкт визначається фігурними дужками {}, і кожна властивість всередині має пару ключ-значення. Ось простий приклад:

let тваринка = {
  ім’я: "Бадді",
  вид: "пес",
  вік: 5,
  дружелюбний: true
};
console.log(тваринка);

У цьому об’єкті:

  • ім’я, вид, вік і дружелюбний — це ключі (назви).
  • "Бадді", "пес", 5 і true — відповідні значення.

Доступ до Властивостей Об’єкта

Щоб отримати доступ до властивостей об’єкта, використовуй точкову або квадратну нотацію:

console.log(тваринка.ім’я); // Результат: Бадді
console.log(тваринка["вік"]); // Результат: 5

Точкова нотація зручна, коли знаєш назву властивості, а квадратна — для динамічного доступу.

Додавання, Зміна та Видалення Властивостей

Об’єкти також дуже зручні: можна додавати, змінювати чи видаляти властивості як захочеш.

тваринка.вік = 6; // Оновлюємо вік
тваринка.колір = "коричневий"; // Додаємо нову властивість
delete тваринка.дружелюбний; // Видаляємо "дружелюбний"
console.log(тваринка);

Комбінування Масивів та Об’єктів – Динамічний Дует 🦸‍♂️🦸‍♀️

Потрібна потужна комбінація? Масиви об’єктів і об’єкти з масивами — це як борщ зі сметаною для твого коду.

Масив Об’єктів

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

let команда = [
  { ім’я: "Аліса", роль: "менеджер" },
  { ім’я: "Боб", роль: "розробник" },
  { ім’я: "Чарлі", роль: "дизайнер" }
];
console.log(команда[1].ім’я); // Результат: Боб

Об’єкт з Масивами

Чудово, коли кожна властивість має кілька значень.

let клас = {
  учні: ["Аліса", "Боб", "Чарлі"],
  предмети: ["Математика", "Наука", "Мистецтво"],
  номерКімнати: 101
};
console.log(клас.предмети[2]); // Результат: Мистецтво

Час Попрактикуватись!

Пора застосувати нові знання на практиці:

Завдання: Склади Список Завдань

  1. Створи масив під назвою списокЗавдань з трьома завданнями.
  2. Додай четверте завдання в кінець.
  3. Видали перше завдання зі списку.
  4. Створи об’єкт під назвою деталіЗавдання з властивостями завдання, строкВиконання та пріоритет.
let списокЗавдань = ["Купити продукти", "Прибрати кімнату", "Читати книгу"];
списокЗавдань.push("Тренування");
списокЗавдань.shift();
let деталіЗавдання = {
  завдання: "Тренування",
  строкВиконання: "Завтра",
  пріоритет: "Високий"
};
console.log(списокЗавдань);
console.log(деталіЗавдання);

Що Далі?

Чудова робота! Ти щойно освоїв потужність масивів і об’єктів. Ці структури збережуть твої дані в порядку, а код — ефективним. У наступному уроці ми розглянемо маніпуляцію DOM—як змусити твій JavaScript взаємодіяти безпосередньо зі сторінками вебсайту!

Чекай на Урок 4 – Маніпуляція DOM: Перетвори Веб у Свій Особистий Майданчик!

Тепер вперед, наповнюй свої скрині даними!

JavaScript  Масиви  Об’єкти  Структури Даних 

See also