Как выполнить какой-либо метод для каждого элемента в массиве?

Применение метода к каждому элементу массива

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

Основные методы

1. Array.forEach() — выполнить действие

Этот метод выполняет функцию для каждого элемента, но не возвращает новый массив.

const numbers = [1, 2, 3, 4, 5];

// Базовое использование
numbers.forEach((num) => {
  console.log(num * 2); // 2, 4, 6, 8, 10
});

// С индексом
numbers.forEach((num, index) => {
  console.log(`Index ${index}: ${num}`);
});

// С самим массивом
numbers.forEach((num, index, arr) => {
  console.log(`Element ${index} of ${arr.length}: ${num}`);
});

Когда использовать: когда нужны побочные эффекты (console.log, обновить DOM, отправить API)

Результат: undefined

const result = [1, 2, 3].forEach(x => x * 2);
console.log(result); // undefined

2. Array.map() — преобразовать массив

Этот метод создаёт новый массив с преобразованными элементами.

const numbers = [1, 2, 3, 4, 5];

// Простое преобразование
const doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6, 8, 10]

// С объектами
const users = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  { id: 3, name: 'Charlie' }
];

const names = users.map(user => user.name);
console.log(names); // ['Alice', 'Bob', 'Charlie']

// Преобразование в объекты
const formatted = users.map(user => ({
  id: user.id,
  displayName: user.name.toUpperCase(),
  greeting: `Hello, ${user.name}`
}));
// [
//   { id: 1, displayName: 'ALICE', greeting: 'Hello, Alice' },
//   { id: 2, displayName: 'BOB', greeting: 'Hello, Bob' },
//   { id: 3, displayName: 'CHARLIE', greeting: 'Hello, Charlie' }
// ]

Когда использовать: когда нужен новый массив с трансформированными элементами

Результат: новый массив

const result = [1, 2, 3].map(x => x * 2);
console.log(result); // [2, 4, 6]

3. Array.filter() — отфильтровать элементы

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

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

// Чётные числа
const even = numbers.filter(num => num % 2 === 0);
console.log(even); // [2, 4, 6, 8, 10]

// Пользователи старше 18
const users = [
  { name: 'Alice', age: 25 },
  { name: 'Bob', age: 17 },
  { name: 'Charlie', age: 30 }
];

const adults = users.filter(user => user.age >= 18);
// [{ name: 'Alice', age: 25 }, { name: 'Charlie', age: 30 }]

// Комбинирование: filter + map
const adultNames = users
  .filter(user => user.age >= 18)
  .map(user => user.name);
console.log(adultNames); // ['Alice', 'Charlie']

Когда использовать: когда нужно отобрать элементы по условию

4. Array.reduce() — аккумулировать значение

Этот метод накапливает одно значение из всех элементов.

const numbers = [1, 2, 3, 4, 5];

// Сумма
const sum = numbers.reduce((acc, num) => acc + num, 0);
console.log(sum); // 15

// Произведение
const product = numbers.reduce((acc, num) => acc * num, 1);
console.log(product); // 120

// Подсчёт элементов
const words = ['apple', 'banana', 'apple', 'cherry', 'banana', 'banana'];
const counts = words.reduce((acc, word) => {
  acc[word] = (acc[word] || 0) + 1;
  return acc;
}, {});
console.log(counts);
// { apple: 2, banana: 3, cherry: 1 }

// Преобразование в объект по id
const users = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' }
];

const usersById = users.reduce((acc, user) => {
  acc[user.id] = user;
  return acc;
}, {});
console.log(usersById);
// { 1: { id: 1, name: 'Alice' }, 2: { id: 2, name: 'Bob' } }

Когда использовать: когда нужно аккумулировать данные в одно значение

5. Array.find() — найти элемент

Этот метод возвращает первый элемент, который проходит проверку.

const users = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  { id: 3, name: 'Charlie' }
];

// Найти пользователя по id
const user = users.find(u => u.id === 2);
console.log(user); // { id: 2, name: 'Bob' }

// Найти первое чётное число
const firstEven = [1, 3, 5, 2, 4].find(num => num % 2 === 0);
console.log(firstEven); // 2

// Если не найден
const notFound = users.find(u => u.id === 999);
console.log(notFound); // undefined

Когда использовать: когда нужно найти один элемент

6. Array.findIndex() — найти индекс

Этот метод возвращает индекс первого элемента, который проходит проверку.

const numbers = [10, 20, 30, 40, 50];

const index = numbers.findIndex(num => num === 30);
console.log(index); // 2

const notFound = numbers.findIndex(num => num === 999);
console.log(notFound); // -1

7. Array.some() — проверить, есть ли элемент

Этот метод возвращает true, если хотя бы один элемент проходит проверку.

const numbers = [1, 2, 3, 4, 5];

const hasEven = numbers.some(num => num % 2 === 0);
console.log(hasEven); // true

const hasNegative = numbers.some(num => num < 0);
console.log(hasNegative); // false

// Проверка наличия элемента
const users = [
  { id: 1, name: 'Alice', active: true },
  { id: 2, name: 'Bob', active: false }
];

const hasActiveUser = users.some(u => u.active === true);
console.log(hasActiveUser); // true

8. Array.every() — проверить все элементы

Этот метод возвращает true, если все элементы проходят проверку.

const numbers = [2, 4, 6, 8, 10];

const allEven = numbers.every(num => num % 2 === 0);
console.log(allEven); // true

const allPositive = numbers.every(num => num > 0);
console.log(allPositive); // true

const allGreaterThan5 = numbers.every(num => num > 5);
console.log(allGreaterThan5); // false

Практические примеры

Пример 1: Обработка данных API

// Данные с сервера
const apiResponse = [
  { id: 1, name: 'Alice', email: 'alice@example.com', status: 'active' },
  { id: 2, name: 'Bob', email: 'bob@example.com', status: 'inactive' },
  { id: 3, name: 'Charlie', email: 'charlie@example.com', status: 'active' }
];

// Получить только активных пользователей
const activeUsers = apiResponse.filter(u => u.status === 'active');

// Преобразовать в объекты для отображения
const displayUsers = activeUsers.map(u => ({
  id: u.id,
  label: `${u.name} (${u.email})`
}));

console.log(displayUsers);
// [
//   { id: 1, label: 'Alice (alice@example.com)' },
//   { id: 3, label: 'Charlie (charlie@example.com)' }
// ]

Пример 2: React компонент с обработкой массива

function UserList({ users }) {
  return (
    <ul>
      {users
        .filter(user => user.active)
        .map(user => (
          <li key={user.id}>
            <strong>{user.name}</strong> - {user.email}
          </li>
        ))}
    </ul>
  );
}

Пример 3: Вычисления

const products = [
  { name: 'Laptop', price: 1000, quantity: 2 },
  { name: 'Mouse', price: 25, quantity: 5 },
  { name: 'Keyboard', price: 75, quantity: 3 }
];

// Общая стоимость
const totalPrice = products.reduce((sum, product) => {
  return sum + (product.price * product.quantity);
}, 0);

console.log(totalPrice); // 2400

// Средняя цена
const averagePrice = products.reduce((sum, p) => sum + p.price, 0) / products.length;
console.log(averagePrice); // 366.67

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

Цепочки методов (chaining)

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

// Комбинирование методов
const result = numbers
  .filter(num => num % 2 === 0)     // [2, 4, 6, 8, 10]
  .map(num => num * num)             // [4, 16, 36, 64, 100]
  .reduce((sum, num) => sum + num, 0); // 220

console.log(result); // 220

Производительность

// forEach — медленнее, чем for
// Используй forEach для читаемости, когда производительность не критична

// map создаёт новый массив
// Если не нужен результат — используй forEach вместо map

// ❌ Плохо
arr.map(x => console.log(x));

// ✓ Хорошо
arr.forEach(x => console.log(x));

Best Practices

1. Используй правильный метод для задачи

   • Нужен новый массив? -> map, filter
   • Нужна одна ценность? -> reduce
   • Нужны побочные эффекты? -> forEach

2. Избегай мутации исходного массива

// ❌ Плохо
const arr = [1, 2, 3];
arr.forEach((num, i) => arr[i] = num * 2);

// ✓ Хорошо
const doubled = arr.map(num => num * 2);

1. Цепочки вместо вложенности

// ❌ Плохо
const result = map(filter(data, isActive), getName);

// ✓ Хорошо
const result = data.filter(isActive).map(getName);

1. Используй const для результата

// ✓ Правильно
const doubled = arr.map(x => x * 2);

Итог

В JavaScript есть множество способов обработки массивов:

• forEach — для побочных эффектов
• map — для преобразования
• filter — для отбора элементов
• reduce — для аккумуляции
• find — для поиска элемента
• some/every — для проверки условий

Выбирай правильный метод для задачи, и ваш код будет читаемым и эффективным.