Работа с массивами: map, filter, reduce, find, some, every, includes

Введение: Зачем нужны методы массивов? 🤔

Массивы — как швейцарский нож в JavaScript. Но чтобы ими эффективно пользоваться, важно освоить встроенные методы. Они заменяют громоздкие циклы for и делают код:

• Читаемым
• Предсказуемым
• Легко тестируемым

💡 Совет от Данилы Бежина: Если вы пишете for для обработки массива — остановитесь и проверьте, нет ли подходящего метода. 99% задач уже решены встроенными методами!

map(): Трансформация без боли 🔄

Преобразует каждый элемент массива по заданному правилу. Возвращает новый массив той же длины.

const numbers = [1, 2, 3];
const squared = numbers.map(num => num * num); // [1, 4, 9]

Где использовать:

• Форматирование данных перед выводом
• Извлечение конкретных свойств объектов

const users = [
  { id: 1, name: 'Анна' },
  { id: 2, name: 'Пётр' }
];

const names = users.map(user => user.name); // ['Анна', 'Пётр']

filter(): Исключаем ненужное 🧹

Возвращает новый массив только с элементами, прошедшими проверку.

const numbers = [10, 20, 30, 40];
const bigNumbers = numbers.filter(num => num > 25); // [30, 40]

Крутой пример — фильтрация активных пользователей:

const users = [
  { id: 1, active: true },
  { id: 2, active: false }
];

const activeUsers = users.filter(user => user.active);

reduce(): Универсальный солдат 🛠️

Самый мощный (и пугающий) метод. Преобразует массив в любое значение через аккумулятор.

Базовый синтаксис:

array.reduce((accumulator, current) => {
  return /* новая версия accumulator */;
}, initialValue);

Примеры:

1. Сумма элементов:

[1, 2, 3].reduce((sum, num) => sum + num, 0); // 6

2. Группировка по условию:

const people = [
  { name: 'Алиса', age: 25 },
  { name: 'Боб', age: 30 }
];

const ageGroups = people.reduce((acc, person) => {
  const key = person.age > 28 ? 'old' : 'young';
  acc[key].push(person);
  return acc;
}, { young: [], old: [] });

⚠️ Всегда указывайте начальное значение (initialValue), иначе первый элемент станет им — это частая ошибка!

find(): Поиск элемента 🔍

Возвращает первый подходящий элемент или undefined.

const users = [
  { id: 1, name: 'Анна' },
  { id: 2, name: 'Пётр' }
];

const user = users.find(u => u.id === 2); // { id: 2, name: 'Пётр' }

some() / every(): Проверка условий ✅

• some() — хотя бы один элемент соответствует условию
• every() — все элементы соответствуют

const hasAdmin = users.some(u => u.role === 'admin');
const allAdults = users.every(u => u.age >= 18);

🔥 Лайфхак: Эти методы оптимизированы и перестают проверять элементы после получения результата (как && и ||).

includes(): Простое включение 🤏

Проверяет, есть ли элемент в массиве (строгое сравнение через ===).

const fruits = ['яблоко', 'груша'];
fruits.includes('груша'); // true
fruits.includes('апельсин'); // false

Важно: Для объектов не работает — используйте some() с глубоким сравнением.

Комбинирование методов 💪

Настоящая сила — в сочетании методов через цепочки вызовов:

const transactions = [
  { amount: 100, currency: 'USD' },
  { amount: 200, currency: 'EUR' }
];

const totalInUsd = transactions
  .filter(t => t.currency === 'USD')
  .map(t => t.amount)
  .reduce((sum, amount) => sum + amount, 0);

Итоговая таблица сравнения 📊

Практика — лучший учитель 🏋️

Попробуйте решить без циклов for:

1. Преобразуйте массив строк в их длины: javascript ['Иван', 'Мария'] → [4, 5]

2. Найдите сумму всех чётных чисел в массиве.

3. Проверьте, все ли пользователи старше 18 лет.