Greitas įvadas į „JavaScript“ aukštesnio lygio funkcijas

Aukštesnio lygio funkcijos

Funkcija, kuri priima ir (arba) grąžina kitą funkciją, vadinama aukštesnės eilės funkcija .

Tai aukštesnės eilės, nes vietoj eilučių, skaičių ar loginių junginių, jis eina aukščiau, kad galėtų valdyti funkcijas. Gana meta.

Su „JavaScript“ funkcijomis galite

  • Saugokite juos kaip kintamuosius
  • Naudokite juos masyvuose
  • Priskirkite juos kaip objekto savybes (metodus)
  • Pateikite juos kaip argumentus
  • Grąžinkite juos iš kitų funkcijų

Kaip ir kiti duomenys . Čia yra raktas.

Funkcijos veikia su duomenimis

Stygos yra duomenys

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

Skaičiai yra duomenys

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

Booleanai yra duomenys

getClearance = (allowed) => (allowed ? 'Access granted' : 'Access denied'); result1 = getClearance(true); result2 = getClearance(false); console.log(result1); // 'Access granted' console.log(result2); // 'Access denied' 

Objektai yra duomenys

getFirstName = (obj) => obj.firstName; result = getFirstName({ firstName: 'Yazeed' }); console.log(result); // 'Yazeed' 

Masyvai yra duomenys

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

Šie 5 tipai yra pirmos klasės piliečiai visomis pagrindinėmis kalbomis.

Kuo jie tampa aukščiausios klasės? Galite juos perduoti aplink, laikyti kintamuosiuose ir masyvuose, naudoti kaip įvestį skaičiavimams. Galite juos naudoti kaip bet kokius duomenis .

Funkcijos gali būti ir duomenys

Funkcijos kaip argumentai

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

Pažiūrėkite, kaip filternaudojama isEvennuspręsti, kokius skaičius laikyti? isEven, funkcija buvo kitos funkcijos parametras .

Tai paskambina filterkiekvienam skaičiui ir naudoja grąžintą vertę truearba falsenustato, ar skaičius turėtų būti paliktas ar atmestas.

Grąžinimo funkcijos

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

addreikalingi du parametrai, bet ne visi vienu metu. Tai funkcija, kurios prašoma tik x, kuri grąžina funkciją, kurios prašo tik y.

Vėlgi, tai įmanoma tik todėl, kad „JavaScript“ leidžia funkcijoms būti grąžinimo verte, kaip ir eilutės, skaičiai, loginės reikšmės ir kt.

Vis tiek galite tiekti xir ynedelsdami, jei norite, dvigubai iškviesdami

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

Arba xdabar ir yvėliau:

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

Atsukime tą paskutinį pavyzdį. add10yra skambinimo addvienu parametru rezultatas. Pabandykite prisijungti prie konsolės.

add10yra funkcija, kuri ima yir grįžta x + y. Kai ytieksite, paskubėsite apskaičiuoti ir grąžinti savo galutinį rezultatą.

Didesnis pakartotinis panaudojimas

Bene didžiausia HOF nauda yra didesnis pakartotinis naudojimas. Be jų, javascript premjera Array metodai -  map, filterir reduce - būtų neegzistuoja!

Štai vartotojų sąrašas. Atliksime keletą skaičiavimų su jų informacija.

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

Žemėlapis

Neturint aukštesnio lygio funkcijų, mums visada reikės kilpų, kad galėtume imituoti mapfunkcionalumą.

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

Arba mes galėtume tai padaryti!

usernames = users.map(getName); console.log(usernames); // ["Yazeed", "Sam", "Bill"] 

Filtras

Pasaulyje, kuriame nėra HOF, mums vis tiek reikės kilpų, kad galėtume atkurti filterfunkcionalumą.

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

Arba mes galėtume tai padaryti!

namesStartingWithB = users.filter((user) => startsWithB(user.name)); console.log(namesStartingWithB); // [{ "name": "Bill", "age": 20 }] 

Sumažinti

Taip, sumažinkite taip pat ... Negalite padaryti daug įdomių dalykų be aukštesnio lygio funkcijų! ?

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

Kaip šitas?

totalAge = users.reduce((total, user) => user.age + total, 0); console.log(totalAge); // 75 

Santrauka

  • Eilutės, skaičiai, talpos, masyvai ir objektai gali būti saugomi kaip kintamieji, masyvai ir savybės ar metodai.
  • „JavaScript“ su funkcijomis elgiasi taip pat.
  • Tai leidžia atlikti funkcijas, veikiančias su kitomis funkcijomis: aukštesnio lygio funkcijas .
  • Žemėlapiai, filtravimas ir redukavimas yra svarbiausi pavyzdžiai - ir kurkite tokius įprastus modelius kaip sąrašų keitimas, paieška ir apibendrinimas!

Aš „Twitter“, jei norite pasikalbėti. Iki kito karto!

Pasirūpink,

Yazeedas Bzadoughas

yazeedb.com