Массивы в JavaScript

1. Что такое массив?

В программировании часто возникает ситуация, когда нужно работать не с одним значением, а с группой однотипных данных. Например:

• Список имён студентов в группе;
• Коллекция товаров в корзине интернет-магазина;
• Результаты прохождения теста.

Конечно, можно объявить много переменных:

let student1 = "Аня";
let student2 = "Борис";
let student3 = "Вика";

Но что делать, если студентов 100? Или если их количество заранее неизвестно? Вручную объявлять переменные — путь к седым волосам и бессонным ночам.

Для этих целей придумали массивы!

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

В JavaScript массивы очень гибкие: в них можно хранить значения любых типов (числа, строки, объекты, даже другие массивы).

Аналогия: Представьте себе коробку с ячейками, в каждую из которых можно положить что угодно. Чтобы достать что-то из коробки, достаточно знать номер ячейки.

2. Как создать массив

Литерал массива

Самый популярный и удобный способ:

let fruits = ["Яблоко", "Банан", "Груша"];

Здесь мы создали массив из трёх строк. Обратите внимание: элементы массива перечисляются через запятую, а сам массив обрамлён квадратными скобками.

Конструктор Array

Можно создать массив с помощью конструктора Array:

let numbers = new Array(10, 20, 30);

Но так пишут редко. Литерал короче и понятнее. К тому же, с конструктором бывают нюансы:

let arr = new Array(5); // создаёт массив из 5 пустых ячеек, а не массив с одним элементом "5"

Пустой массив

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

let students = [];

Массивы могут хранить что угодно

В JavaScript массивы могут содержать любые типы данных, даже разные в одном массиве:

let data = [1, "Строка", true, null, [10, 20], {name: "Аня"}];
console.log(data[4][1]); // 20 — элемент вложенного массива
console.log(data[5].name); // "Аня" — свойство объекта

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

Каждый элемент массива имеет свой индекс (номер). Индексация в JavaScript начинается с нуля!

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

let fruits = ["Яблоко", "Банан", "Груша"];

console.log(fruits[0]); // "Яблоко"
console.log(fruits[1]); // "Банан"
console.log(fruits[2]); // "Груша"

Если обратиться к несуществующему индексу, получите undefined:

console.log(fruits[5]); // undefined

Изменение значения по индексу

Можно не только получать, но и изменять элементы массива:

fruits[1] = "Апельсин";
console.log(fruits); // ["Яблоко", "Апельсин", "Груша"]

Практика: создаём массив участников

Давайте в вашем учебном приложении добавим возможность хранить список имён пользователей:

let users = ["Аня", "Борис", "Вика"];
console.log("Первый пользователь:", users[0]);
console.log("Второй пользователь:", users[1]);
console.log("Третий пользователь:", users[2]);

Как узнать размер массива

У любого массива есть свойство .length — оно показывает, сколько элементов в массиве:

let fruits = ["Яблоко", "Банан", "Груша"];
console.log(fruits.length); // 3

Важно! Индексы идут от 0 до length - 1.

4. Добавление и удаление элементов: методы push, pop, shift, unshift

В реальной жизни список редко бывает статичным: кто-то входит, кто-то выходит. Для работы со списками в JavaScript есть специальные методы.

Метод push — добавить элемент в конец

let numbers = [1, 2, 3];
numbers.push(4); // добавляет 4 в конец массива
console.log(numbers); // [1, 2, 3, 4]

Возвращает новую длину массива.

Метод pop — удалить элемент с конца

let numbers = [1, 2, 3, 4];
let last = numbers.pop(); // удаляет последний элемент и возвращает его
console.log(numbers); // [1, 2, 3]
console.log("Удалили:", last); // 4

Метод unshift — добавить элемент в начало

let queue = ["Вика", "Саша"];
queue.unshift("Аня"); // добавляет "Аня" в начало
console.log(queue); // ["Аня", "Вика", "Саша"]

Возвращает новую длину массива.

Метод shift — удалить элемент с начала

let queue = ["Аня", "Вика", "Саша"];
let first = queue.shift(); // удаляет первый элемент и возвращает его
console.log(queue); // ["Вика", "Саша"]
console.log("Удалили:", first); // "Аня"

Схема: как работают push/pop/shift/unshift

Исходный массив:  [ "А", "Б", "В" ]
        ^           ^           ^
      0-й         1-й         2-й

push("Г")  → [ "А", "Б", "В", "Г" ]      // добавили в конец
pop()      → [ "А", "Б", "В" ]           // удалили последний ("Г")

unshift("Я") → [ "Я", "А", "Б", "В" ]    // добавили в начало
shift()      → [ "А", "Б", "В" ]         // удалили первый ("Я")

5. Примеры: развиваем ваше приложение

Список пользователей с динамическим добавлением

Допустим, мы хотим дать пользователю возможность самому добавить своё имя в список:

let users = ["Аня", "Борис", "Вика"];
let userName = prompt("Введите ваше имя:");
users.push(userName);
console.log("Список пользователей:", users);

Очередь на вход

Пусть у нас есть очередь из трёх человек. Новый человек приходит и становится в начало очереди:

let queue = ["Вика", "Саша", "Петя"];
let newcomer = prompt("Кто пришёл первым?");
queue.unshift(newcomer);
console.log("Очередь:", queue);

Теперь кто-то выходит из очереди (например, первый):

let left = queue.shift();
console.log(left + " покинул(а) очередь.");
console.log("Оставшиеся:", queue);

Работа с корзиной товаров

let cart = [];
cart.push("Молоко");
cart.push("Хлеб");
cart.push("Яблоки");
console.log("Корзина:", cart);

let lastItem = cart.pop();
console.log("Удалили из корзины:", lastItem);
console.log("Теперь в корзине:", cart);

6. Типичные ошибки при работе с массивами

Ошибка №1: Путаница с индексами
Часто новички забывают, что индексация начинается с 0. Если в массиве 3 элемента, последний — под индексом 2, а не 3.

Ошибка №2: Обращение к несуществующему элементу
Если обратиться к индексу, которого нет, получите undefined. Это не ошибка выполнения, но может привести к странному поведению программы.

Ошибка №3: Использование методов не по назначению
Методы push и unshift добавляют элементы, а pop и shift — удаляют. Иногда путают, какой метод работает с началом, а какой — с концом массива.

Ошибка №4: Массив и объект — не одно и то же
В JavaScript массив — это специальный объект, но не надо путать его с обычным объектом. У массива есть нумерованные индексы и методы для работы с элементами.

Ошибка №5: Изменение массива внутри цикла (преждевременно)
Если вы проходите по массиву и в процессе добавляете или удаляете элементы, это может привести к неожиданным результатам. Для начала лучше не модифицировать массив, пока его перебираете.