Рассмотрим методы работы с массивами в 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. Использование этих методов делает код более чистым, читаемым и эффективным, чем традиционные циклы. Цепочки методов позволяют решать сложные задачи компактным и понятным способом.