Μια γρήγορη εισαγωγή για λειτουργίες υψηλότερης παραγγελίας σε JavaScript

Λειτουργίες υψηλότερης τάξης

Μια συνάρτηση που αποδέχεται και / ή επιστρέφει μια άλλη συνάρτηση ονομάζεται συνάρτηση υψηλότερης τάξης .

Είναι υψηλότερης τάξης επειδή αντί για συμβολοσειρές, αριθμούς ή booleans, πηγαίνει υψηλότερα για να λειτουργεί σε συναρτήσεις. Αρκετά μετα.

Με λειτουργίες σε 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 επιτρέπει στις λειτουργίες να είναι μια τιμή επιστροφής - όπως οι συμβολοσειρές, οι αριθμοί, τα booleans κ.λπ.

Μπορείτε ακόμα να προμηθεύσετε 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, βιάζεται να υπολογίσει και να επιστρέψει το τελικό αποτέλεσμα.

Μεγαλύτερη επαναχρησιμοποίηση

Πιθανώς το μεγαλύτερο όφελος των HOFs είναι η μεγαλύτερη επαναχρησιμοποίηση. Χωρίς αυτά, οι μέθοδοι πρεμιέρα Array την 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 αντιμετωπίζει τις λειτουργίες με τον ίδιο τρόπο.
• Αυτό επιτρέπει λειτουργίες που λειτουργούν σε άλλες λειτουργίες: λειτουργίες υψηλότερης τάξης .
• Ο χάρτης, το φίλτρο και η μείωση είναι πρωταρχικά παραδείγματα - και κάνουν τα πιο κοινά μοτίβα όπως η μετατροπή, η αναζήτηση και η αθροιστική λίστα πολύ πιο εύκολη!

Είμαι στο Twitter αν θέλετε να μιλήσετε. Μέχρι την επόμενη φορά!

Να προσέχεις,

Yazeed Bzadough

yazeedb.com