Массивы: создание, индексы, длина

Когда в программе нужно хранить не одно значение, а целый список — на сцену выходит массив. Это одна из самых используемых структур данных в JavaScript, и без неё не обходится ни одно реальное приложение.

🤔 Зачем вообще нужен массив?

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

let grade1 = 5;
let grade2 = 4;
let grade3 = 3;
let grade4 = 5;
let grade5 = 4;

Уже пять переменных. А если студентов тридцать? Или триста? А если нужно найти среднюю оценку — придётся написать grade1 + grade2 + grade3 + ... вручную. Это не программирование, это ручной труд.

С массивом предыдущий пример превращается в:

let grades = [5, 4, 3, 5, 4];

Одна строка вместо пяти. И это ещё не самое интересное — дальше будет лучше.

📦 Массив как ящик с ячейками

Представьте обычный ящик для яиц. У него есть ячейки, расположенные по порядку. В каждую ячейку можно положить одно яйцо. Номера ячеек идут по порядку слева направо.

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

🛠️ Как создать массив

Есть два способа создать массив в JavaScript.

Способ 1: Литерал массива — квадратные скобки []

Это главный и самый популярный способ. Просто перечисляем значения через запятую в квадратных скобках:

// Массив чисел
let numbers = [1, 2, 3, 4, 5];

// Массив строк
let fruits = ["яблоко", "банан", "апельсин"];

// Массив булевых значений
let flags = [true, false, true, true];

// Пустой массив (ни одного элемента)
let empty = [];

// Смешанный массив — JS разрешает смешивать типы
let mixed = [42, "привет", true, null];

console.log(numbers); // [1, 2, 3, 4, 5]
console.log(fruits);  // ["яблоко", "банан", "апельсин"]

Способ 2: Конструктор new Array()

Второй способ — через ключевое слово new Array(). Используется редко, но знать нужно:

// Создать массив с начальными значениями
let colors = new Array("красный", "зелёный", "синий");

// Создать пустой массив заданной длины (5 пустых ячеек)
let slots = new Array(5);
console.log(slots.length); // 5
console.log(slots);        // [empty × 5]

0️⃣ Индексация начинается с нуля!

Это, пожалуй, самое важное правило, которое нужно усвоить раз и навсегда. В JavaScript (и во многих других языках) нумерация элементов начинается с нуля, а не с единицы.

Возьмём массив:

let fruits = ["яблоко", "банан", "апельсин", "манго"];

Вот как выглядит этот массив «на полке»:

Первый элемент — индекс 0, второй — индекс 1, и так далее. Последний элемент в массиве из 4 элементов — индекс 3 (то есть длина минус один).

Обращение по индексу

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

let fruits = ["яблоко", "банан", "апельсин", "манго"];

console.log(fruits[0]); // "яблоко"  — первый элемент
console.log(fruits[1]); // "банан"   — второй элемент
console.log(fruits[3]); // "манго"   — четвёртый (последний) элемент

// Что если указать несуществующий индекс?
console.log(fruits[10]); // undefined — не ошибка, просто "нет такого"

🔙 Метод .at() и отрицательные индексы

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

let fruits = ["яблоко", "банан", "апельсин", "манго"];
let last = fruits[fruits.length - 1]; // "манго"

Это работает, но выглядит не очень изящно. Современный JavaScript предлагает метод .at(), который поддерживает отрицательные индексы:

let fruits = ["яблоко", "банан", "апельсин", "манго"];

// .at() с отрицательным индексом считает с конца
console.log(fruits.at(-1)); // "манго"      — последний
console.log(fruits.at(-2)); // "апельсин"  — предпоследний
console.log(fruits.at(-3)); // "банан"     — третий с конца

// Обычные положительные индексы тоже работают
console.log(fruits.at(0));  // "яблоко"    — первый
console.log(fruits.at(1));  // "банан"     — второй

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

Каждый массив знает свою длину. Доступ к ней — через свойство .length. Это не метод (не нужны скобки), это просто свойство.

let fruits = ["яблоко", "банан", "апельсин", "манго"];
console.log(fruits.length); // 4

let empty = [];
console.log(empty.length); // 0

let single = [42];
console.log(single.length); // 1

Очень частая задача — получить последний элемент через .length:

let fruits = ["яблоко", "банан", "апельсин", "манго"];

// Последний элемент: длина минус 1
let lastIndex = fruits.length - 1; // 3
let lastFruit = fruits[lastIndex];  // "манго"

// Или сразу в одну строку:
let last = fruits[fruits.length - 1]; // "манго"

✏️ Изменение элемента по индексу

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

let fruits = ["яблоко", "банан", "апельсин"];
console.log(fruits); // ["яблоко", "банан", "апельсин"]

// Меняем второй элемент (индекс 1)
fruits[1] = "виноград";
console.log(fruits); // ["яблоко", "виноград", "апельсин"]

// Можно даже добавить элемент за пределами массива
fruits[5] = "киви";
console.log(fruits);        // ["яблоко", "виноград", "апельсин", empty, empty, "киви"]
console.log(fruits.length); // 6 — JS растянул массив!

🎭 JS позволяет смешивать типы данных

В большинстве «строгих» языков (Java, C++) массив хранит данные только одного типа: либо все числа, либо все строки. JavaScript — язык динамический, и в массив можно положить что угодно вперемешку:

// Разрешено, но делать так лучше осознанно
let anything = [
  42,           // число
  "привет",     // строка
  true,         // булево
  null,         // null
  [1, 2, 3],    // другой массив!
  { name: "Иван" } // объект!
];

console.log(anything[0]); // 42
console.log(anything[1]); // "привет"
console.log(anything[4]); // [1, 2, 3]
console.log(anything[5]); // { name: "Иван" }

🧪 Практический пример: работаем с массивом

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

// Список температур за неделю (в градусах Цельсия)
let temperatures = [18, 22, 19, 25, 23, 20, 17];

// Сколько дней в нашем массиве?
console.log("Дней:", temperatures.length); // 7

// Температура в первый день (понедельник)
console.log("Понедельник:", temperatures[0], "°C"); // 18

// Температура в последний день (воскресенье) — два способа
console.log("Воскресенье:", temperatures[temperatures.length - 1], "°C"); // 17
console.log("Воскресенье:", temperatures.at(-1), "°C");                    // 17

// Температура в среду (третий день, индекс 2)
console.log("Среда:", temperatures[2], "°C"); // 19

// Исправляем данные — в пятницу было 24, а не 23
temperatures[4] = 24;
console.log("Обновлённый массив:", temperatures);
// [18, 22, 19, 25, 24, 20, 17]

✅ Итоги урока

• Массив — это одна переменная для хранения списка значений
• Создаём через литерал [] или конструктор new Array() — предпочитайте []
• Индексация начинается с нуля: первый элемент — [0], второй — [1]
• Обращение по индексу: arr[0], arr[2], arr[arr.length - 1]
• Метод .at(-1) — современный способ получить последний элемент
• Свойство .length возвращает количество элементов
• Изменение элемента: arr[1] = "новое значение"
• JavaScript позволяет хранить в массиве значения разных типов