Frontend Academy · Урок

Методы массивов: map, filter, reduce, find

«Методы массивов: map, filter, reduce, find» — бесплатный урок Frontend Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Frontend Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Frontend Academy содержит 4 уроков всего.

Зачем нужны методы массивов

Императивные циклы for работают, но скрывают намерение кода. Методы массивов высшего порядка объявляют, что Вы хотите получить, а не как выполнять итерацию. Они создают более чистый, тестируемый и компонуемый код, который читается почти как обычный текст.

Array.map() — преобразование каждого элемента

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

const names = ['alice', 'bob', 'carol'];
const upper = names.map(name => name.toUpperCase());
// ['ALICE', 'BOB', 'CAROL']

const prices = [10, 20, 30];
const withTax = prices.map(p => p * 1.2);
// [12, 24, 36]

Array.filter() — выбор подходящих элементов

filter() возвращает новый массив, содержащий только элементы, для которых функция обратного вызова возвращает истинное значение. Функция обратного вызова является предикатом.

const users = [
  { name: 'Alice', age: 22 },
  { name: 'Bob',   age: 17 },
  { name: 'Carol', age: 30 },
];
const adults = users.filter(u => u.age >= 18);
// [{ name: 'Alice', age: 22 }, { name: 'Carol', age: 30 }]

Array.reduce() — накопление значения

reduce(callback, initialValue) объединяет все элементы в одно значение. Функция обратного вызова получает аккумулятор и текущий элемент. Начальное значение — это исходное значение аккумулятора.

const prices = [10, 20, 30, 40];
const total = prices.reduce((sum, price) => sum + price, 0);
// 100

const tallied = ['a', 'b', 'a', 'c', 'b', 'a'].reduce((acc, letter) => {
  acc[letter] = (acc[letter] || 0) + 1;
  return acc;
}, {});
// { a: 3, b: 2, c: 1 }

Array.find() — первое совпадение

find() возвращает первый элемент, соответствующий предикату, или undefined, если такой элемент не найден. Используйте этот метод, чтобы найти элемент по ID или значению свойства.

const users = [{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }];
const bob = users.find(u => u.id === 2);
// { id: 2, name: 'Bob' }

const missing = users.find(u => u.id === 99);
// undefined

Array.findIndex()

findIndex() работает подобно find(), но возвращает индекс подходящего элемента или -1, если элемент не найден. Это удобно, когда нужно определить, где обновить элемент в массиве.

const idx = users.findIndex(u => u.id === 2);
// 1

Array.some() и Array.every()

some() возвращает значение истина, если проверку проходит хотя бы один элемент. every() возвращает значение истина, только если проверку проходят все элементы. Оба метода прекращают работу сразу после получения однозначного результата.

const hasAdult = users.some(u => u.age >= 18);  // true if any adult
const allAdults = users.every(u => u.age >= 18); // true only if all adults

Array.flatMap() — отображение с последующим выравниванием

flatMap() преобразует каждый элемент, а затем выравнивает результат на один уровень. Это эквивалент .map(...).flat(), но более эффективный.

const sentences = ['Hello world', 'Foo bar'];
const words = sentences.flatMap(s => s.split(' '));
// ['Hello', 'world', 'Foo', 'bar']

Цепочки методов массивов

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

const result = products
  .filter(p => p.inStock)
  .map(p => ({ ...p, price: p.price * 0.9 })) // 10% discount
  .sort((a, b) => a.price - b.price)
  .slice(0, 5); // top 5 cheapest in-stock products

Array.at() и Array.includes()

at(-1) получает последний элемент. includes(value) проверяет, существует ли значение. Это гораздо понятнее, чем arr[arr.length - 1] и arr.indexOf(v) !== -1.

const arr = [1, 2, 3, 4, 5];
arr.at(-1);        // 5
arr.at(-2);        // 4
arr.includes(3);   // true
arr.includes(99);  // false

Неизменяемость: не изменяйте исходные данные

Методы map, filter и reduce возвращают новые массивы. В отличие от них, методы добавления, удаления последнего элемента и изменения части массива изменяют исходный массив. В состоянии React всегда создавайте новые массивы (с помощью spread или map), а не изменяйте состояние напрямую.

// Bad in React:
state.items.push(newItem); // mutates original

// Good:
const newItems = [...state.items, newItem]; // new array

Быстрая проверка

Какой метод массива возвращает новый массив элементов, для которых функция обратного вызова возвращает true?

Повторение: методы массивов

map() преобразует каждый элемент. filter() выбирает подходящие элементы. reduce() объединяет элементы в одно значение. find() возвращает первое совпадение. some() и every() проверяют наличие элементов. Цепочки этих методов заменяют вложенные циклы понятным декларативным конвейером обработки данных.

Часто задаваемые вопросы

Урок «Методы массивов: map, filter, reduce, find» бесплатный?

Да — полный текст урока «Методы массивов: map, filter, reduce, find» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Frontend Academy, подпишись на CoddyKit PRO. Курс Frontend Academy содержит 4 уроков всего.

Чему я научусь в уроке «Методы массивов: map, filter, reduce, find»?

Преобразуйте, фильтруйте и агрегируйте массивы с помощью методов высшего порядка вместо ручных циклов. Объединяйте их в цепочки для создания выразительных конвейеров обработки данных. Ты практикуешь Frontend Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Frontend Academy?

Предыдущий опыт не требуется. Frontend Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.

Сколько времени занимает урок «Методы массивов: map, filter, reduce, find»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Frontend Academy?

Да. Каждый урок Frontend Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

Методы массивов: map, filter, reduce, find
Деструктуризация и spread для объектов
Шаблонные строки и optional chaining
Модули: import и export

← Назад к Frontend Academy