Методы массивов (forEach, map, filter, find)

Урок: Методы массивов (forEach, map, filter, find)

Введение

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

Представь список товаров. Иногда нужно просто показать их все. Иногда — применить скидку ко всем ценам. Иногда — оставить только те, которые дешевле определённой суммы. А иногда — найти один конкретный товар.

Раньше для этого использовали циклы for, но со временем в JavaScript появились более удобные и выразительные способы — методы массивов.

Они позволяют описывать действия над массивом более понятным языком: «пройди по каждому», «создай новый массив», «отфильтруй», «найди».

В этом уроке мы разберём четыре ключевых метода: forEach, map, filter и find.

Как работают методы массивов

Методы массивов — это функции, которые вызываются у массива и принимают другую функцию внутри себя.

Звучит сложнее, чем есть на самом деле. Посмотрим пример:

let numbers = [1, 2, 3];

numbers.forEach(function (num) {
  console.log(num);
});

Здесь:

• forEach — это метод массива;
• внутрь передаётся функция;
• эта функция вызывается для каждого элемента массива.

Такая функция называется callback (функция-обработчик).

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

Метод forEach — перебор без возврата результата

Метод forEach используется, когда нужно просто пройтись по массиву и что-то сделать с каждым элементом.

let numbers = [1, 2, 3];

numbers.forEach(function (num) {
  console.log(num);
});

Результат:

1
2
3

Что происходит:

• forEach берёт каждый элемент массива;
• передаёт его в функцию как num;
• выполняет код внутри функции.

Важно: forEach ничего не возвращает. Он просто выполняет действие.

Он подходит, когда нужно:

• вывести данные;
• выполнить побочный эффект;
• что-то изменить вне массива.

Метод map — создание нового массива

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

let numbers = [1, 2, 3];

let doubled = numbers.map(function (num) {
  return num * 2;
});

console.log(doubled);

Результат:

[2, 4, 6]

Разберём:

• map проходит по каждому элементу;
• для каждого элемента выполняется функция;
• результат функции возвращается;
• из этих результатов собирается новый массив.

Важно:

• исходный массив не изменяется;
• создаётся новый.

Это один из самых часто используемых методов.

Метод filter — отбор элементов

Метод filter используется, когда нужно оставить только те элементы, которые соответствуют условию.

let numbers = [10, 20, 30, 40];

let result = numbers.filter(function (num) {
  return num > 20;
});

console.log(result);

Результат:

[30, 40]

Что происходит:

• filter проверяет каждый элемент;
• если функция возвращает true, элемент остаётся;
• если false — исключается.

Таким образом создаётся новый массив только с подходящими значениями.

Метод find — поиск одного элемента

Метод find используется, когда нужно найти первый элемент, который подходит под условие.

let numbers = [10, 20, 30, 40];

let result = numbers.find(function (num) {
  return num > 20;
});

console.log(result);

Результат:

30

Здесь:

• find проходит по массиву;
• как только находит подходящий элемент — возвращает его;
• дальше поиск прекращается.

Если ничего не найдено, возвращается undefined.

Как выглядят методы в более современном виде

Часто вместо обычной функции используют стрелочные функции:

let numbers = [1, 2, 3];

let result = numbers.map((num) => num * 2);

console.log(result);

Это более короткая запись той же логики.

Здесь:

• num => num * 2 — это функция;
• она возвращает результат автоматически.

Цепочки вызовов методов

Поскольку map и filter возвращают новый массив, их можно вызывать последовательно — один за другим через точку. Это называется цепочкой методов.

let numbers = [1, 2, 3, 4, 5, 6];

let result = numbers
  .filter(function(num) { return num % 2 === 0; })
  .map(function(num) { return num * 10; });

console.log(result);

Результат:

[20, 40, 60]

Что происходит:

• сначала filter отбирает чётные числа: [2, 4, 6];
• затем map умножает каждое на 10: [20, 40, 60].

Результат filter — это новый массив, и сразу на нём вызывается map.

На практике такие цепочки часто пишут со стрелочными функциями:

let prices = [100, 200, 50, 300, 75];

let discounted = prices
  .filter((p) => p > 100)
  .map((p) => p * 0.9);

console.log(discounted);

Результат:

[180, 270]

Цепочку можно строить из любого количества методов. Каждый следующий получает массив, который вернул предыдущий:

let users = [
  { name: 'Алиса', age: 17 },
  { name: 'Боб', age: 25 },
  { name: 'Кирилл', age: 19 },
];

let names = users
  .filter((user) => user.age >= 18)
  .map((user) => user.name);

console.log(names);

Результат:

['Боб', 'Кирилл']

Сначала filter оставляет только совершеннолетних, затем map извлекает только имена.

Сравнение методов

Важно понимать разницу между методами.

forEach — просто перебирает, ничего не возвращает. map — создаёт новый массив с преобразованными значениями. filter — создаёт новый массив с отобранными элементами. find — возвращает один первый найденный элемент.

Каждый из них решает свою задачу, и важно выбирать подходящий.

Где это используется на практике

Эти методы используются постоянно.

Например:

• forEach — для вывода списка на страницу;
• map — для преобразования данных с сервера;
• filter — для поиска товаров по условиям;
• find — для поиска конкретного пользователя.

В реальных приложениях массивы почти всегда обрабатываются именно через эти методы, а не через классические циклы.

Они делают код более читаемым и ближе к тому, как мы формулируем задачу на человеческом языке.

Итоговое понимание

Методы массивов — это более высокий уровень работы с данными.

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

Ключевая идея — не просто перебрать массив, а выразить намерение. map говорит: «создай новый массив», filter — «оставь только нужное», find — «найди первый подходящий».

Это делает код более понятным, компактным и удобным для поддержки.