Funcții de ordin superior

O funcție care acceptă și / sau returnează o altă funcție se numește a funcție de ordin superior.

este de ordin superior deoarece în loc de șiruri, numere sau booleeni, merge superior pentru a opera funcții. Destul de meta.

Cu funcții în JavaScript, puteți

  • Stocați-le ca variabile
  • Folosiți-le în tablouri
  • Atribuiți-le ca proprietăți ale obiectului (metode)
  • Treceți-le ca argumente
  • Întoarceți-le din alte funcții

Ca orice altă informație. Aceasta este cheia aici.

ad-banner

Funcțiile operează pe date

Șirurile sunt date

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

console.log(result); // 'Hi, User!'

Numerele sunt date

double = (x) => x * 2;
result = double(4);

console.log(result); // 8

Booleenii sunt date

getClearance = (allowed) => (allowed ? 'Access granted' : 'Access denied');

result1 = getClearance(true);
result2 = getClearance(false);

console.log(result1); // 'Access granted'
console.log(result2); // 'Access denied'

Obiectele sunt date

getFirstName = (obj) => obj.firstName;

result = getFirstName({
  firstName: 'Yazeed'
});

console.log(result); // 'Yazeed'

Tablourile sunt date

len = (array) => array.length;
result = len([1, 2, 3]);

console.log(result); // 3

Aceste 5 tipuri sunt cetățeni de primă clasă în fiecare limbă de masă.

Ce îi face să fie de primă clasă? Puteți să le transmiteți, să le stocați în variabile și tablouri, să le folosiți ca intrări pentru calcule. Le poți folosi ca. orice bucată de date.

Funcțiile pot fi și date

O introducere rapida la functiile de comanda superioara in JavaScript

Funcții ca argumente

isEven = (num) => num % 2 === 0;
result = [1, 2, 3, 4].filter(isEven);

console.log(result); // [2, 4]

Vezi cum filter utilizări isEven să decid ce numere să păstreze? isEven, o functie, a fost un parametru la o altă funcție.

Este chemat de filter pentru fiecare număr și folosește valoarea returnată true sau false pentru a determina dacă un număr trebuie păstrat sau aruncat.

Funcții de returnare

add = (x) => (y) => x + y;

add necesită doi parametri, dar nu dintr-o dată. Este o funcție care cere doar x, care returnează o funcție care cere doar y.

Din nou, acest lucru este posibil doar deoarece JavaScript permite funcțiilor să fie o valoare returnată – la fel ca șirurile, numerele, booleenii etc.

Puteți furniza în continuare x și y imediat, dacă doriți, cu o dublă invocație

result = add(10)(20);
console.log(result); // 30

Sau x acum și y mai tarziu:

add10 = add(10);
result = add10(20);

console.log(result); // 30

Să revenim la ultimul exemplu. add10 este rezultatul apelului add cu un singur parametru. Încercați să o conectați în consolă.

1611763445 236 O introducere rapida la functiile de comanda superioara in JavaScript

add10 este o funcție care ia o y și se întoarce x + y. După ce aprovizionezi y, se grăbește să calculeze și să returneze rezultatul final.

1611763445 202 O introducere rapida la functiile de comanda superioara in JavaScript

Reutilizare mai mare

Probabil cel mai mare beneficiu al HOF este o mai mare reutilizare. Fără ele, metodele Array de premieră JavaScript – map, filter, șireduce– nu ar exista!

Iată o listă de utilizatori. Vom face câteva calcule cu informațiile lor.

users = [
  {
    name: 'Yazeed',
    age: 25
  },
  {
    name: 'Sam',
    age: 30
  },
  {
    name: 'Bill',
    age: 20
  }
];

Hartă

Fără funcții de ordin superior, am avea întotdeauna nevoie de bucle pentru a imitamapfuncționalitatea.

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"]

Sau am putea face asta!

usernames = users.map(getName);

console.log(usernames);
// ["Yazeed", "Sam", "Bill"]

Filtru

Într-o lume fără HOF, am mai avea nevoie de bucle pentru a ne recrea filterși funcționalitatea.

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 }]

Sau am putea face asta!

namesStartingWithB = users.filter((user) => startsWithB(user.name));

console.log(namesStartingWithB);
// [{ "name": "Bill", "age": 20 }]

Reduce

Da, reduce și tu … Nu pot face lucruri grozave fără funcții de ordin superior !! ?

total = 0;

for (let i = 0; i < users.length; i++) {
  total += users[i].age;
}

console.log(total);
// 75

Cum e asta?

totalAge = users.reduce((total, user) => user.age + total, 0);

console.log(totalAge);
// 75

rezumat

  • Șirurile, numerele, bool-urile, matricele și obiectele pot fi stocate ca variabile, matrice și proprietăți sau metode.
  • JavaScript tratează funcțiile în același mod.
  • Aceasta permite funcții care funcționează pe alte funcții: funcții de ordin superior.
  • Harta, filtrarea și reducerea sunt exemple primare – și fac modele comune cum ar fi transformarea, căutarea și sumarea listelor mult mai ușor!

Sunt pe Twitter dacă ai vrea să vorbești. Pana data viitoare!

Ai grijă,

Yazeed Bzadough

yazeedb.com