Массивы JavaScript

Введение: Что такое массив и зачем он нужен?

Представь, что у тебя есть рюкзак, в который можно положить много разных вещей: книги, тетради, ручку, яблоко и наушники. В программировании такой "рюкзак" называется массивом (от английского array — "массив", "набор").

Массив — это специальная структура данных, которая позволяет хранить много значений в одной переменной. Без массивов нам пришлось бы создавать отдельную переменную для каждого элемента:

// Без массива — неудобно!
let книга1 = "Гарри Поттер";
let книга2 = "Властелин колец";
let книга3 = "Маленький принц";
// А если книг 100? Придется писать 100 переменных!

С массивами всё проще:

// С массивом — удобно!
let книги = ["Гарри Поттер", "Властелин колец", "Маленький принц"];

Массивы используются везде: в играх (список врагов, инвентарь персонажа), в приложениях (список контактов, сообщений), на сайтах (каталог товаров, галерея изображений). Сегодня мы научимся создавать массивы, добавлять и удалять элементы, а также проходить по всем элементам с помощью циклов.

1. Создание массива

Массив создается с помощью квадратных скобок []. Внутри скобок элементы перечисляются через запятую. Элементами могут быть любые типы данных: числа, строки, булевы значения, даже другие массивы!

Пример 1: Массив чисел (оценки ученика)

// Оценки по предметам за четверть
let оценки = [5, 4, 5, 3, 5, 4, 5];
// Индексы:    0  1  2  3  4  5  6
// В массиве 7 элементов

Пример 2: Массив строк (список друзей)

// Имена друзей в телефонной книге
let друзья = ["Анна", "Борис", "Виктор", "Галина"];
// Индексы:      0       1        2        3

Пример 3: Смешанный массив (разные типы)

// Информация о пользователе
let пользователь = ["Иван", 14, true, "ivan@mail.ru"];
//                 [имя, возраст, активен?, email]
// Типы:          строка, число, булево, строка

Важно! Нумерация элементов в массиве начинается с нуля. Первый элемент имеет индекс 0, второй — 1, и так далее. Это называется нулевая индексация.

2. Доступ к элементам массива

Чтобы получить значение элемента, нужно написать имя массива и в квадратных скобках указать его индекс:

let фрукты = ["яблоко", "банан", "апельсин", "киви"];

console.log(фрукты[0]); // "яблоко" (первый элемент)
console.log(фрукты[2]); // "апельсин" (третий элемент)
console.log(фрукты[3]); // "киви" (четвертый элемент)

// Если указать индекс, которого нет, получим undefined
console.log(фрукты[10]); // undefined (нет такого элемента)

Свойство length — длина массива

У каждого массива есть свойство length, которое показывает количество элементов:

let цвета = ["красный", "зеленый", "синий", "желтый"];
console.log(цвета.length); // 4

// Последний элемент всегда имеет индекс (length - 1)
console.log(цвета[цвета.length - 1]); // "желтый"

3. Изменение элементов массива

Массивы можно изменять — присваивать новое значение по индексу:

let дни = ["пн", "вт", "ср", "чт", "пт", "сб", "вс"];

// Заменим "ср" на "среда"
дни[2] = "среда";
console.log(дни); // ["пн", "вт", "среда", "чт", "пт", "сб", "вс"]

// Можно добавить элемент, если индекс больше длины
дни[7] = "выходной";
console.log(дни); // ["пн", "вт", "среда", "чт", "пт", "сб", "вс", "выходной"]

Внимание: Если присвоить значение по индексу, который намного больше длины массива, между существующими и новым элементом образуются "пустые" места (empty). Старайся так не делать!

4. Основные методы массивов

У массивов есть встроенные методы — готовые функции, которые помогают управлять данными. Рассмотрим самые полезные.

4.1. Добавление элементов

push() — добавляет элемент в конец массива:

let очередь = ["Иван", "Мария", "Петр"];
очередь.push("Анна");
console.log(очередь); // ["Иван", "Мария", "Петр", "Анна"]

// Можно добавить сразу несколько элементов
очередь.push("Ольга", "Сергей");
console.log(очередь); // ["Иван", "Мария", "Петр", "Анна", "Ольга", "Сергей"]

unshift() — добавляет элемент в начало массива:

let числа = [2, 3, 4];
числа.unshift(1);
console.log(числа); // [1, 2, 3, 4]

// Тоже можно несколько
числа.unshift(-1, 0);
console.log(числа); // [-1, 0, 1, 2, 3, 4]

4.2. Удаление элементов

pop() — удаляет последний элемент и возвращает его:

let корзина = ["молоко", "хлеб", "яйца", "сок"];
let последний = корзина.pop();
console.log(последний); // "сок"
console.log(корзина);   // ["молоко", "хлеб", "яйца"]

shift() — удаляет первый элемент и возвращает его:

let маршрут = ["дом", "школа", "парк", "магазин"];
let первый = маршрут.shift();
console.log(первый);  // "дом"
console.log(маршрут); // ["школа", "парк", "магазин"]

4.3. Поиск элементов

indexOf() — возвращает индекс первого найденного элемента или -1, если элемент не найден:

let звери = ["кот", "собака", "попугай", "кот", "хомяк"];

console.log(звери.indexOf("кот"));      // 0 (первое вхождение)
console.log(звери.indexOf("собака"));   // 1
console.log(звери.indexOf("тигр"));     // -1 (не найден)

// Второй параметр — с какого индекса начинать поиск
console.log(звери.indexOf("кот", 1));   // 3 (начиная с индекса 1)

includes() — проверяет, есть ли элемент в массиве (возвращает true/false):

let игры = ["Майнкрафт", "Террария", "Роблокс"];
console.log(игры.includes("Майнкрафт")); // true
console.log(игры.includes("Fortnite"));  // false

4.4. Удаление и замена элементов (splice)

splice() — универсальный метод. Он может удалять, добавлять и заменять элементы. Первый параметр — начальный индекс, второй — сколько элементов удалить, остальные — что добавить.

let цвета = ["красный", "зеленый", "синий", "желтый"];

// Удаляем 1 элемент с индекса 2 (удаляем "синий")
let удаленные = цвета.splice(2, 1);
console.log(удаленные); // ["синий"]
console.log(цвета);     // ["красный", "зеленый", "желтый"]

// Заменяем "зеленый" на "фиолетовый" (удаляем 1 элемент и добавляем 1)
цвета.splice(1, 1, "фиолетовый");
console.log(цвета); // ["красный", "фиолетовый", "желтый"]

// Добавляем "оранжевый" на позицию 1 (удаляем 0 элементов)
цвета.splice(1, 0, "оранжевый");
console.log(цвета); // ["красный", "оранжевый", "фиолетовый", "желтый"]

4.5. Объединение массивов (concat)

concat() — создает новый массив, объединяя два или более массивов:

let мальчики = ["Иван", "Петр", "Алексей"];
let девочки = ["Анна", "Мария", "Елена"];

let всеДети = мальчики.concat(девочки);
console.log(всеДети); // ["Иван", "Петр", "Алексей", "Анна", "Мария", "Елена"]

// Можно объединять не только массивы, но и отдельные элементы
let числа1 = [1, 2];
let числа2 = числа1.concat(3, 4, [5, 6]);
console.log(числа2); // [1, 2, 3, 4, 5, 6]

5. Перебор элементов массива (циклы)

Очень часто нужно выполнить какое-то действие с каждым элементом массива. Для этого используют циклы.

5.1. Цикл for с индексами

Классический способ — использовать цикл for от 0 до length - 1:

let температуры = [22, 25, 19, 30, 27, 23, 20];

// Выводим каждую температуру с номером дня
for (let i = 0; i < температуры.length; i++) {
    console.log("День " + (i + 1) + ": " + температуры[i] + "°C");
}
// Результат:
// День 1: 22°C
// День 2: 25°C
// ... и так далее

5.2. Цикл for...of (для элементов)

Более современный способ, если не нужны индексы, а только сами элементы:

let студенты = ["Аня", "Боря", "Витя", "Гоша"];

for (let имя of студенты) {
    console.log("Привет, " + имя + "!");
}
// Привет, Аня!
// Привет, Боря!
// Привет, Витя!
// Привет, Гоша!

5.3. Практический пример: подсчет суммы

// Подсчитываем сумму всех чисел в массиве
let числа = [10, 20, 30, 40, 50];
let сумма = 0;

for (let i = 0; i < числа.length; i++) {
    сумма = сумма + числа[i]; // можно сократить: сумма += числа[i]
}

console.log("Сумма чисел: " + сумма); // Сумма чисел: 150

6. Многомерные массивы (массивы внутри массивов)

Иногда нужно хранить табличные данные. Например, поле для игры в морской бой или шахматную доску. Для этого создают массив массивов — двумерный массив.

// Таблица умножения 3x3
let таблица = [
    [1, 2, 3],   // строка 0
    [4, 5, 6],   // строка 1
    [7, 8, 9]    // строка 2
];

// Доступ к элементу: сначала строка, потом столбец
console.log(таблица[0][0]); // 1 (первая строка, первый столбец)
console.log(таблица[1][2]); // 6 (вторая строка, третий столбец)
console.log(таблица[2][1]); // 8 (третья строка, второй столбец)

// Перебор двумерного массива (вложенные циклы)
for (let строка = 0; строка < таблица.length; строка++) {
    for (let столбец = 0; столбец < таблица[строка].length; столбец++) {
        console.log("Элемент [" + строка + "][" + столбец + "] = " + таблица[строка][столбец]);
    }
}

7. Полезные методы: sort, reverse, join

7.1. sort() — сортировка

Сортирует элементы как строки (по алфавиту):

let имена = ["Даша", "Антон", "Борис", "Глеб"];
имена.sort();
console.log(имена); // ["Антон", "Борис", "Глеб", "Даша"]

// Для чисел нужно передать функцию сравнения
let цифры = [10, 5, 100, 3, 25];
цифры.sort(function(a, b) { return a - b; }); // по возрастанию
console.log(цифры); // [3, 5, 10, 25, 100]

7.2. reverse() — обратный порядок

let буквы = ["а", "б", "в", "г"];
буквы.reverse();
console.log(буквы); // ["г", "в", "б", "а"]

7.3. join() — склеивание в строку

let слова = ["JavaScript", "это", "круто"];
let предложение = слова.join(" "); // разделитель — пробел
console.log(предложение); // "JavaScript это круто"

let дата = ["2024", "12", "31"];
console.log(дата.join("-")); // "2024-12-31"

8. Жизненные аналогии

Аналогия с почтовыми ящиками: Представь, что массив — это ряд почтовых ящиков в подъезде. У каждого ящика есть номер (индекс), и в каждом лежит письмо (значение). Чтобы прочитать письмо, нужно знать номер ящика. Чтобы положить новое письмо, нужно открыть нужный ящик.

Аналогия с поездом: Массив — это поезд, где каждый вагон — элемент. У вагонов есть номера (индексы). Ты можешь зайти в любой вагон (получить элемент), можешь прицепить новый вагон в конец (push) или в начало (unshift), можешь отцепить последний вагон (pop) или первый (shift).

9. Примеры из реальных проектов

Пример: Список покупок

let покупки = ["молоко", "хлеб", "яйца", "масло"];

// Добавляем новый товар
покупки.push("сыр");

// Удаляем "хлеб" (находим его индекс)
let индекс = покупки.indexOf("хлеб");
if (индекс !== -1) {
    покупки.splice(индекс, 1);
}

console.log(покупки); // ["молоко", "яйца", "масло", "сыр"]

// Выводим список покупок
console.log("Список покупок:");
for (let товар of покупки) {
    console.log("- " + товар);
}

Пример: Средняя оценка ученика

let оценки = [4, 5, 3, 5, 4, 4, 5, 3];
let сумма = 0;

for (let i = 0; i < оценки.length; i++) {
    сумма += оценки[i];
}

let средняя = сумма / оценки.length;
console.log("Средняя оценка: " + средняя.toFixed(1)); // toFixed округляет до 1 знака

// Находим максимальную оценку
let максимум = оценки[0];
for (let i = 1; i < оценки.length; i++) {
    if (оценки[i] > максимум) {
        максимум = оценки[i];
    }
}
console.log("Лучшая оценка: " + максимум);

10. Частые ошибки новичков

1. Путаница с индексами: Помни, что первый элемент — индекс 0, последний — длина минус 1.
2. Выход за границы массива: Если обратиться к несуществующему индексу, получишь undefined.
3. Забыл про let/const: Массив, объявленный через const, нельзя переприсвоить, но можно менять его содержимое.
4. Сравнение массивов: Два массива с одинаковыми элементами — это разные объекты. [1,2] === [1,2] даст false.

11. Практические задания

Теперь твоя очередь! Выполни эти задания в редакторе кода (например, в консоли браузера или на сайте вроде CodePen).

Задание 1: Управление списком дел

Создай массив дела с тремя строками: "Убраться в комнате", "Сделать уроки", "Погулять с собакой". Затем:

1. Добавь в начало новое дело "Позавтракать".
2. Удали последнее дело.
3. Замени "Сделать уроки" на "Выучить JavaScript".
4. Выведи итоговый массив в консоль.

Ожидаемый результат: ["Позавтракать", "Убраться в комнате", "Выучить JavaScript"]

Задание 2: Поиск чисел

Дан массив чисел: [12, 45, 7, 89, 23, 56, 34, 90, 11, 67]. Напиши код, который:

1. Находит и выводит сумму всех чисел.
2. Находит и выводит самое маленькое число.
3. Создает новый массив только из четных чисел (используй цикл и условие).

Подсказка: проверка на четность — число % 2 === 0

Задание 3: Игра "Угадай число"

Создай массив из 10 случайных чисел от 1 до 100 (используй Math.random()). Затем:

1. Выведи массив в консоль.
2. Попроси пользователя ввести число (через prompt).
3. Проверь, есть ли это число в массиве (используй includes).
4. Если есть — выведи "Угадал!", если нет — "Попробуй еще раз".

Для генерации случайного числа: Math.floor(Math.random() * 100) + 1

Совет: После выполнения заданий попробуй изменить код и посмотреть, что получится. Экспериментируй! Массивы — одна из самых важных тем в программировании. Освоив их, ты сможешь создавать гораздо более сложные и интересные программы.

В следующем уроке мы научимся использовать функции для работы с массивами — это сделает код еще более мощным и удобным. А пока — тренируйся!