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]); // Выведет: Искусство

Пора Практиковаться!

Давай проверим эти знания в деле:

Задача: Управляй Списком Дел

Создай массив под названием списокДел с тремя задачами.
Добавь четвёртую задачу в конец.
Удали первую задачу из списка.
Создай объект под названием деталиЗадачи со свойствами задача, срок и приоритет.

let списокДел = ["Сходить в магазин", "Убрать комнату", "Почитать книгу"];
списокДел.push("Позаниматься спортом");
списокДел.shift();
let деталиЗадачи = {
  задача: "Позаниматься спортом",
  срок: "Завтра",
  приоритет: "Высокий"
};
console.log(списокДел);
console.log(деталиЗадачи);

Что Дальше?

Отличная работа! Ты только что освоил силу массивов и объектов. Эти структуры помогут держать твои данные в порядке, а код — компактным. В следующем уроке мы рассмотрим манипуляцию DOM — как заставить JavaScript напрямую взаимодействовать с веб-страницами!

Ожидай Урок 4 – Манипуляция DOM: Превращаем Веб в Твою Личную Площадку!

Теперь иди и наполняй эти сундуки своими сокровищами данных!

JavaScript Массивы Объекты Структуры Данных