Функції вищого порядку
Функція, яка приймає та / або повертає іншу функцію, називається функцією вищого порядку .
Це вищого порядку, тому що замість рядків, чисел або булевих значень він вищий, щоб працювати з функціями. Досить мета.
Завдяки функціям у JavaScript ви можете
- Зберігайте їх як змінні
- Використовуйте їх у масивах
- Призначити їх як властивості об'єкта (методи)
- Передайте їх як аргументи
- Повернути їх з інших функцій
Як і будь-яка інша частина даних . Це ключове тут.
Функції, що діють на даних
Рядки - це дані
sayHi = (name) => `Hi, ${name}!`; result = sayHi('User'); console.log(result); // 'Hi, User!' Числа - це дані
double = (x) => x * 2; result = double(4); console.log(result); // 8 Логічні дані - це дані
getClearance = (allowed) => (allowed ? 'Access granted' : 'Access denied'); result1 = getClearance(true); result2 = getClearance(false); console.log(result1); // 'Access granted' console.log(result2); // 'Access denied' Об'єкти - це дані
getFirstName = (obj) => obj.firstName; result = getFirstName({ firstName: 'Yazeed' }); console.log(result); // 'Yazeed' Масиви - це дані
len = (array) => array.length; result = len([1, 2, 3]); console.log(result); // 3 Ці 5 типів є першокласними громадянами на всіх основних мовах.
Що робить їх першокласними? Ви можете передавати їх, зберігати у змінних та масивах, використовувати як вхідні дані для розрахунків. Ви можете використовувати їх як будь-яку частину даних .
Функціями можуть бути також дані
Функціонує як аргументи
isEven = (num) => num % 2 === 0; result = [1, 2, 3, 4].filter(isEven); console.log(result); // [2, 4] Подивіться, як filterвикористовувати, isEvenщоб вирішити, які номери зберігати? isEven, функція , була параметром для іншої функції .
Він викликається filterдля кожного числа і використовує повернене значення trueабо falseвизначає, чи слід зберігати чи відкидати число.
Повернення функцій
add = (x) => (y) => x + y; addвимагає двох параметрів, але не всіх одночасно. Це функція, яка запитує справедливість x, яка повертає функцію, яка запитує справедливість y.
Знову ж таки, це можливо лише тому, що JavaScript дозволяє функціям повертати значення - так само, як рядки, числа, булеві значення тощо
Ви все ще можете поставити xі yнегайно, за бажанням, подвійний виклик
result = add(10)(20); console.log(result); // 30 Або xзараз і yпізніше:
add10 = add(10); result = add10(20); console.log(result); // 30 Давайте перемотаємо цей останній приклад. add10є результатом виклику addз одним параметром. Спробуйте увійти в консоль.
add10- це функція, яка приймає yі повертає x + y. Після поставки yвін поспішає розрахувати і повернути кінцевий результат.
Більша багаторазовість
Ймовірно, найбільшою перевагою HOF є більша багаторазовість. Без них, методи прем'єра масиву в JavaScript - map, filterі reduce - не існуватиме!
Ось список користувачів. Ми зробимо кілька розрахунків з їх інформацією.
users = [ { name: 'Yazeed', age: 25 }, { name: 'Sam', age: 30 }, { name: 'Bill', age: 20 } ]; Карта
Без функцій вищого порядку нам завжди потрібні цикли для імітації mapфункціональності.
getName = (user) => user.name; usernames = []; for (let i = 0; i < users.length; i++) { const name = getName(users[i]); usernames.push(name); } console.log(usernames); // ["Yazeed", "Sam", "Bill"] Або ми могли б це зробити!
usernames = users.map(getName); console.log(usernames); // ["Yazeed", "Sam", "Bill"] Фільтр
У світі без HOF нам все ще потрібні цикли для відтворення filterфункціональності.
startsWithB = (string) => string.toLowerCase().startsWith('b'); namesStartingWithB = []; for (let i = 0; i < users.length; i++) { if (startsWithB(users[i].name)) { namesStartingWithB.push(users[i]); } } console.log(namesStartingWithB); // [{ "name": "Bill", "age": 20 }] Або ми могли б це зробити!
namesStartingWithB = users.filter((user) => startsWithB(user.name)); console.log(namesStartingWithB); // [{ "name": "Bill", "age": 20 }] Зменшити
Так, зменшіть теж ... Не можу робити багато цікавих речей без функцій вищого порядку !! ?
total = 0; for (let i = 0; i < users.length; i++) { total += users[i].age; } console.log(total); // 75 Як це?
totalAge = users.reduce((total, user) => user.age + total, 0); console.log(totalAge); // 75 Резюме
- Рядки, числа, bools, масиви та об'єкти можуть зберігатися як змінні, масиви та властивості або методи.
- JavaScript обробляє функції однаково.
- Це дозволяє функціям, які працюють з іншими функціями: функціями вищого порядку .
- Карта, фільтрування та зменшення є головними прикладами - і значно полегшують такі загальні схеми, як перетворення, пошук та підсумовування списків!
I’m on Twitter if you’d like to talk. Until next time!
Take care,
Yazeed Bzadough
yazeedb.com