JavaScript надає ряд потужних інструментів для роботи з масивами, і методи вищого порядку є одними з найбільш універсальних і виразних. Ці методи спрощують операції з масивами, дозволяючи застосовувати функції безпосередньо до елементів, що покращує читабельність і підтримуваність коду. У цьому блозі ми розглянемо деякі з найбільш поширених методів вищого порядку для масивів: forEach, map, filter, reduce, find та some/every, з детальними прикладами та поясненнями.
Що таке методи вищого порядку?
Метод вищого порядку — це функція, яка приймає іншу функцію як аргумент або повертає функцію. Такі методи масивів, як forEach, map та інші, використовують функції зворотного виклику (callback functions) для обробки кожного елемента масиву.
Приклад:
const numbers = [1, 2, 3, 4, 5];
numbers.forEach(num => {
console.log(num * 2);
});
Тут функція зворотного виклику (num => console.log(num * 2)) виконується для кожного елемента масиву numbers.
1. ForEach
Метод forEach виконує передану функцію один раз для кожного елемента масиву. Він нічого не повертає і зазвичай використовується для побічних ефектів, таких як логування або зміна зовнішніх змінних.
Приклад:
const fruits = ['apple', 'banana', 'cherry'];
fruits.forEach((fruit, index) => {
console.log(`${index + 1}: ${fruit}`);
});
Вивід:
1: apple
2: banana
3: cherry
2. Map
Метод map створює новий масив, заповнений результатами виклику переданої функції для кожного елемента оригінального масиву.
Приклад:
const numbers = [1, 2, 3, 4];
const squared = numbers.map(num => num * num);
console.log(squared);
що насправді відбувається,
const numbers = [1, 2, 3, 4];
const squareFunc = (num) => {
return num * num;
};
const squared = numbers.map(squareFunc);
console.log(squared);
Вивід:
[1, 4, 9, 16]
3. Filter
Метод filter створює новий масив з усіма елементами, які проходять перевірку, виконану переданою функцією.
Приклад:
const numbers = [10, 25, 30, 47];
const evenNumbers = numbers.filter(num => num % 2 === 0);
console.log(evenNumbers);
що насправді відбувається,
const numbers = [10, 25, 30, 47];
const isEven = (num) => {
return num % 2 === 0;
};
const evenNumbers = numbers.filter(isEven);
console.log(evenNumbers);
Вивід:
[10, 30]
4. Reduce
Метод reduce виконує редукуючу функцію для кожного елемента масиву, що дозволяє отримати одне значення в результаті. Він часто використовується для операцій, таких як підсумовування значень, згладжування масивів або обчислення середнього значення.
Приклад:
const numbers = [1, 2, 3, 4];
const sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
console.log(sum);
що насправді відбувається,
const numbers = [1, 2, 3, 4];
const sumFunc = (accumulator, currentValue) => {
return accumulator + currentValue;
};
const sum = numbers.reduce(sumFunc, 0);
console.log(sum);
Вивід:
10
5. Find
Метод find повертає перший елемент масиву, який задовольняє надану функцію перевірки. Якщо жоден елемент не задовольняє умову, повертається undefined.
Приклад:
const users = [
{ id: 1, name: 'Alice' },
{ id: 2, name: 'Bob' },
{ id: 3, name: 'Charlie' }
];
const user = users.find(user => user.id === 2);
console.log(user);
що насправді відбувається,
const users = [
{ id: 1, name: 'Alice' },
{ id: 2, name: 'Bob' },
{ id: 3, name: 'Charlie' }
];
const findUserById = (user) => {
return user.id === 2;
};
const user = users.find(findUserById);
console.log(user);
Вивід:
{ id: 2, name: 'Bob' }
## Some & Every
- Метод `some` перевіряє, чи хоча б один елемент у масиві задовольняє умову.
- Метод `every` перевіряє, чи всі елементи в масиві задовольняють умову.
**Приклади:**
const numbers = [1, 2, 3, 4, 5];
```
const hasEven = numbers.some(num => num % 2 === 0);
console.log(hasEven); // true
const allPositive = numbers.every(num => num > 0);
console.log(allPositive); // true
що насправді відбувається,
const numbers = [1, 2, 3, 4, 5];
const isAnyEven = (num) => {
return num % 2 === 0;
};
const areAllPositive = (num) => {
return num > 0;
};
const hasEven = numbers.some(isAnyEven);
console.log(hasEven); // true
const allPositive = numbers.every(areAllPositive);
console.log(allPositive); // true
Порівняння
- forEach => Повертає
undefined=> Виконує побічні ефекти. - map => Повертає новий масив => Трансформує кожен елемент.
- filter => Повертає новий масив => Витягує елементи, що відповідають умові.
- reduce => Повертає одне значення => Агрегує значення масиву.
- find => Повертає один елемент => Знаходить перший елемент, що відповідає умові.
- some => Повертає булеве значення => Перевіряє чи є хоча б один збіг.
- every => Повертає булеве значення => Перевіряє, чи всі елементи відповідають умові.
Ключові висновки
- Методики вищого порядку роблять операції з масивами більш декларативними та лаконічними.
- Вибір правильного методу для завдання покращує читабельність і ефективність.
- Розуміння цих методів значно підвищує вашу здатність працювати з масивами в JavaScript.
Почніть експериментувати з цими методами у своїх проєктах, і ви побачите, як вони спрощують маніпуляції з масивами! Щасливого кодування!
Перекладено з: Higher-Order Array Methods in JavaScript