En hurtig introduktion til Higher Order-funktioner i JavaScript
Funktioner med højere ordre
En funktion, der accepterer og / eller returnerer en anden funktion kaldes en højere ordensfunktion .
Det er højere orden, fordi det går højere for at betjene funktioner i stedet for strenge, tal eller booleanske . Smuk meta.
Med funktioner i JavaScript kan du
- Gem dem som variabler
- Brug dem i arrays
- Tildel dem som objektegenskaber (metoder)
- Giv dem som argumenter
- Returner dem fra andre funktioner
Som ethvert andet stykke data . Det er nøglen her.
Funktioner fungerer på data
Strings Are Data
sayHi = (name) => `Hi, ${name}!`; result = sayHi('User'); console.log(result); // 'Hi, User!'
Tal er data
double = (x) => x * 2; result = double(4); console.log(result); // 8
Booleanere er data
getClearance = (allowed) => (allowed ? 'Access granted' : 'Access denied'); result1 = getClearance(true); result2 = getClearance(false); console.log(result1); // 'Access granted' console.log(result2); // 'Access denied'
Objekter er data
getFirstName = (obj) => obj.firstName; result = getFirstName({ firstName: 'Yazeed' }); console.log(result); // 'Yazeed'
Arrays er data
len = (array) => array.length; result = len([1, 2, 3]); console.log(result); // 3
Disse 5 typer er førsteklasses borgere på alle almindelige sprog.
Hvad gør dem til førsteklasses? Du kan sende dem rundt, gemme dem i variabler og arrays, bruge dem som input til beregninger. Du kan bruge dem som ethvert stykke data .
Funktioner kan være data for
Fungerer som argumenter
isEven = (num) => num % 2 === 0; result = [1, 2, 3, 4].filter(isEven); console.log(result); // [2, 4]
Se hvordan filter
anvendelser isEven
til at beslutte, hvilke tal der skal holdes? isEven
, en funktion , var en parameter til en anden funktion .
Det kaldes filter
for hvert nummer og bruger den returnerede værdi true
eller false
til at afgøre, om et nummer skal opbevares eller kasseres.
Tilbagevendende funktioner
add = (x) => (y) => x + y;
add
kræver to parametre, men ikke alle på én gang. Det er en funktion, der beder om bare x
, der returnerer en funktion, der beder om bare y
.
Igen er dette kun muligt, fordi JavaScript tillader funktioner at være en returværdi - ligesom strenge, tal, booleanske osv.
Du kan stadig levere x
og y
straks, hvis du ønsker det, en dobbelt påkaldelse
result = add(10)(20);
console.log(result); // 30
Eller x
nu og y
senere:
add10 = add(10); result = add10(20); console.log(result); // 30
Lad os spole det sidste eksempel tilbage. add10
er resultatet af opkald add
med en parameter. Prøv at logge det i konsollen.
add10
er en funktion, der tager a y
og returnerer x + y
. Når du har leveret y
, skynder det dig at beregne og returnere dit slutresultat.
Større genanvendelighed
Den største fordel ved HOF'er er sandsynligvis større genanvendelighed. Uden dem, JavaScript premiere Array metoder - map
, filter
og reduce
- ville ikke eksistere!
Here’s a list of users. We’re going to do some calculations with their information.
users = [ { name: 'Yazeed', age: 25 }, { name: 'Sam', age: 30 }, { name: 'Bill', age: 20 } ];
Map
Without higher-order functions, we’d always need loops to mimic map
's functionality.
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"]
Or we could do this!
usernames = users.map(getName); console.log(usernames); // ["Yazeed", "Sam", "Bill"]
Filter
In a HOF-less world, we’d still need loops to recreate filter
's functionality too.
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 }]
Or we could do this!
namesStartingWithB = users.filter((user) => startsWithB(user.name)); console.log(namesStartingWithB); // [{ "name": "Bill", "age": 20 }]
Reduce
Yup, reduce too… Can’t do much cool stuff without higher-order functions!! ?
total = 0; for (let i = 0; i < users.length; i++) { total += users[i].age; } console.log(total); // 75
How’s this?
totalAge = users.reduce((total, user) => user.age + total, 0); console.log(totalAge); // 75
Summary
- Strings, numbers, bools, arrays, and objects can be stored as variables, arrays, and properties or methods.
- JavaScript treats functions the same way.
- This allows for functions that operate on other functions: higher-order functions.
- Map, filter, and reduce are prime examples — and make common patterns like transforming, searching, and summing lists much easier!
Jeg er på Twitter, hvis du gerne vil tale. Indtil næste gang!
Pas på,
Yazeed Bzadough
yazeedb.com