Кратко въведение във функциите от по-висок ред в JavaScript

Функции от по-висок ред

Функция, която приема и / или връща друга функция, се нарича функция от по-висок ред .

Това е по-висок ред, защото вместо низове, числа или булеви числа, той отива по-високо, за да работи с функции. Доста мета.

С функциите в JavaScript можете

  • Съхранявайте ги като променливи
  • Използвайте ги в масиви
  • Присвоявайте ги като свойства на обекти (методи)
  • Предайте ги като аргументи
  • Върнете ги от други функции

Както всяка друга част от данните . Това е ключът тук.

Функции, работещи с данни

Низовете са данни

sayHi = (name) => `Hi, ${name}!`; result = sayHi('User'); console.log(result); // 'Hi, User!' 

Числата са данни

double = (x) => x * 2; result = double(4); console.log(result); // 8 

Booleans са данни

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е функция, която приема a 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 

Обобщение

  • Низовете, числата, групите, масивите и обектите могат да се съхраняват като променливи, масиви и свойства или методи.
  • JavaScript третира функциите по същия начин.
  • Това дава възможност за функции, които работят с други функции: функции от по-висок ред .
  • Картографирането, филтрирането и намаляването са най-добрите примери - и правят много по-лесни често срещаните модели като трансформиране, търсене и сумиране на списъци!

I’m on Twitter if you’d like to talk. Until next time!

Take care,

Yazeed Bzadough

yazeedb.com