Массивы — одна из самых используемых структур данных в JavaScript, но многие разработчики ограничиваются базовыми операциями. Знание продвинутых методов массивов сокращает код в разы и делает его читаемее.
По данным State of JS 2023, методы map() и filter() входят в топ-5 самых популярных возможностей языка среди 40 тысяч опрошенных разработчиков. Разбираем шесть методов, которые покрывают 90% задач при работе с массивами.
push/pop и shift/unshift — базовые операции
push() добавляет элементы в конец массива, pop() удаляет последний элемент. unshift() добавляет элементы в начало, shift() удаляет первый элемент.
Важный нюанс: эти методы изменяют исходный массив. В React или Vue это может привести к неожиданным ре-рендерам — используйте spread-оператор для создания новых массивов.
map() — преобразование каждого элемента
map() создаёт новый массив, применяя функцию к каждому элементу. Классика — преобразование массива чисел в массив их квадратов или извлечение ID из массива объектов пользователей.
Метод не изменяет исходный массив и всегда возвращает массив той же длины.
filter() — отбор элементов по условию
filter() возвращает новый массив только с элементами, прошедшими проверку. Типичный пример — фильтрация активных пользователей из общего списка или товаров в определённом ценовом диапазоне.
Результирующий массив может быть короче исходного или пустым, если ни один элемент не прошёл проверку.
reduce() — свёртка массива в одно значение
reduce() — самый мощный метод, сворачивающий массив в единственное значение. Может заменить циклы for в большинстве случаев обработки массивов.
Помимо суммирования, reduce() группирует объекты, строит новые структуры данных, находит максимальные и минимальные значения.
forEach() — выполнение действий без возврата
forEach() выполняет функцию для каждого элемента массива, но не возвращает новый массив. Подходит для операций с побочными эффектами — логирования, отправки HTTP-запросов, изменения DOM.
В отличие от map(), forEach() нельзя прервать через break — только через исключение или return внутри колбэка.
Практический совет: используйте map/filter/reduce для трансформации данных, forEach — для побочных эффектов. Такой код легче читать, тестировать и отлаживать в команде.