Массивы

Массивы — один из самых используемых инструментов в JavaScript. Список пользователей, набор карточек, результаты запроса к серверу — всё это, как правило, приходит и хранится в виде массивов. Давайте разберём их подробнее.

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

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

const cities = ['Санкт-Петербург', 'Москва', 'Казань'];
const mixed  = [1, 'текст', true, null, { name: 'объект' }];
const empty  = [];
js

Доступ к элементу — по индексу, начиная с нуля:

console.log(cities[0]); // Санкт-Петербург
console.log(cities[2]); // Казань
console.log(cities.length); // 3
js

Изменение массива

Базовые методы для добавления и удаления элементов:

const list = ['а', 'б', 'в'];

list.push('г');       // добавить в конец → ['а', 'б', 'в', 'г']
list.pop();           // удалить из конца → ['а', 'б', 'в']
list.unshift('0');    // добавить в начало → ['0', 'а', 'б', 'в']
list.shift();         // удалить из начала → ['а', 'б', 'в']
js

Метод splice позволяет удалять или добавлять элементы в произвольном месте:

const list = ['а', 'б', 'в', 'г'];

// splice(начало, сколько_удалить, ...что_добавить)
list.splice(1, 2);          // удалить 2 элемента начиная с индекса 1 → ['а', 'г']
list.splice(1, 0, 'б', 'в'); // добавить без удаления → ['а', 'б', 'в', 'г']
js

Перебор массива

Помимо уже знакомого нам for...of для массивов существует набор мощных методов-итераторов. Все они принимают функцию-колбэк, которая вызывается для каждого элемента.

forEach — просто перебрать

Выполняет колбэк для каждого элемента. Ничего не возвращает:

const cities = ['Санкт-Петербург', 'Москва', 'Казань'];

cities.forEach((city) => {
  console.log(city);
});
js

map — преобразовать массив

Создаёт новый массив, применяя колбэк к каждому элементу. Исходный массив не изменяется:

const lengths = cities.map((city) => city.length);
console.log(lengths); // [15, 6, 6]
js

filter — отфильтровать

Создаёт новый массив из элементов, для которых колбэк вернул true:

const longNames = cities.filter((city) => city.length > 6);
console.log(longNames); // ['Санкт-Петербург']
js

find и findIndex — найти элемент

find возвращает первый элемент, для которого колбэк вернул true. Если ничего не нашлось — undefined:

const found = cities.find((city) => city.startsWith('М'));
console.log(found); // 'Москва'
js

findIndex делает то же самое, но возвращает индекс, а не сам элемент. Если не найдено — -1.

reduce — свернуть в одно значение

reduce «сворачивает» массив в одно значение, накапливая результат:

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((accumulator, current) => accumulator + current, 0);
console.log(sum); // 15
js

Первый аргумент колбэка — аккумулятор (накопленное значение), второй — текущий элемент. Второй аргумент reduce (после колбэка) — начальное значение аккумулятора.

reduce — очень гибкий инструмент, с его помощью можно реализовать map и filter. Подробнее с примерами можно почитать на doka.guide.

Важное замечание

map, filter, find, reduce — не изменяют исходный массив, а возвращают новый результат. Это называется иммутабельным подходом и считается хорошей практикой.

Другие полезные методы

const a = [1, 2, 3];
const b = [4, 5, 6];

// объединить два массива в новый
const combined = a.concat(b);  // [1, 2, 3, 4, 5, 6]
// или через spread-оператор:
const combined2 = [...a, ...b]; // [1, 2, 3, 4, 5, 6]

// преобразовать массив в строку
console.log(a.join(', ')); // '1, 2, 3'

// проверить наличие элемента
console.log(a.includes(2)); // true

// найти индекс элемента
console.log(a.indexOf(3)); // 2

// создать копию части массива
console.log(a.slice(0, 2)); // [1, 2]
js

Статические методы класса Array

Помимо методов экземпляра (которые вызываются на конкретном массиве), у Array есть статические методы — они вызываются напрямую через Array.

Array.isArray

Самый используемый. Проверяет, является ли переданное значение массивом:

console.log(Array.isArray([1, 2, 3]));  // true
console.log(Array.isArray('строка'));   // false
console.log(Array.isArray({ a: 1 }));  // false
js

Это важно, потому что typeof для массивов возвращает 'object' и не позволяет отличить массив от обычного объекта.

Array.from

Создаёт массив из любого итерируемого объекта или массивоподобной структуры:

// из строки
Array.from('hello'); // ['h', 'e', 'l', 'l', 'o']

// создать массив из 5 нулей
Array.from({ length: 5 }, () => 0); // [0, 0, 0, 0, 0]

// создать массив чисел от 0 до 4
Array.from({ length: 5 }, (_, i) => i); // [0, 1, 2, 3, 4]
js

Array.of

Создаёт массив из переданных аргументов. Используется редко, но полезно знать:

Array.of(1, 2, 3); // [1, 2, 3]
js

Шпаргалка

Полный список методов с примерами всегда доступен на MDN.

В следующем уроке поговорим об асинхронности — о том, как JavaScript работает с операциями, которые занимают время.