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

Рассмотрим методы работы с массивами в JavaScript: forEach, map, filter, reduce, find, findIndex. Разберем их применение на практических примерах, сравним с традиционными циклами и покажем использование цепочек методов для повышения эффективности кода.

Традиционные циклы

Представим массив people, состоящий из объектов, где каждый элемент содержит информацию о человеке. Переберем этот массив с помощью циклов for и for…of.

// Цикл for
for (let i = 0; i < people.length; i++) {
  console.log(people[i]);
}

// Цикл for...of
for (const person of people) {
  console.log(person);
}

Оба цикла выводят каждый объект массива в консоль. for…of – более современный синтаксис (ES6), но for работает в большем количестве браузеров.

forEach

Каждый массив в JavaScript имеет встроенные методы. Рассмотрим forEach. Он перебирает каждый элемент массива и выполняет переданную функцию (callback). Эта функция принимает три параметра: сам элемент, его индекс и сам массив.

people.forEach(function(person, index, array) {
  console.log(person, index, array);
});

Этот код аналогичен циклам for и for…of, но более компактен. Часто используется только первый параметр (сам элемент). С использованием стрелочных функций (ES6) код можно сократить:

people.forEach(person => console.log(person));

map

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

const newPeople = people.map(person => person); // Возвращает копию исходного массива
console.log(newPeople);

const names = people.map(person => person.name); // Возвращает массив имён
console.log(names);

const formattedData = people.map(person => `${person.name} (${person.age})`); // Более сложная трансформация
console.log(formattedData);

map позволяет легко трансформировать данные в массиве, создавая новые массивы с изменёнными данными.

filter

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

const adults = people.filter(person => person.age >= 18);
console.log(adults);

Этот код создаёт массив adults, содержащий только людей старше или равных 18 лет.

reduce

Метод reduce выполняет итерацию по массиву, накапливая результат в одном значении. Он принимает callback-функцию с двумя параметрами: накопитель (аккумулирующее значение) и текущий элемент. Второй параметр reduce – начальное значение накопителя.

const totalBudget = people.reduce((total, person) => total + person.budget, 0);
console.log(totalBudget);

Этот код суммирует значения поля budget всех объектов в массиве people.

find и findIndex

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

const igor = people.find(person => person.name === 'Игорь');
console.log(igor);

const igorIndex = people.findIndex(person => person.name === 'Игорь');
console.log(igorIndex);

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

Методы массивов можно использовать в цепочках, что повышает читаемость и эффективность кода.

const newPeople = people
  .filter(person => person.budget > 3000)
  .map(person => ({ info: { name: person.name, age: person.age }, budget: person.budget }));

const totalBudget = newPeople.reduce((total, person) => total + person.budget, 0);

console.log(newPeople);
console.log(totalBudget);

Этот код сначала фильтрует массив, затем преобразует объекты, а затем суммирует бюджеты.

Рассмотренные методы массивов – мощный инструмент для работы с данными в JavaScript. Использование этих методов делает код более чистым, читаемым и эффективным, чем традиционные циклы. Цепочки методов позволяют решать сложные задачи компактным и понятным способом.

Что будем искать? Например,программа