Κατανόηση των λειτουργιών υψηλότερης τάξης σε JavaScript

Η JavaScript είναι μια ισχυρή γλώσσα που υποστηρίζεται από τα περισσότερα σύγχρονα προγράμματα περιήγησης και είναι μια εξαιρετική επιλογή για αρχάριους.

Όπως πολλές άλλες σύγχρονες γλώσσες προγραμματισμού, η JavaScript υποστηρίζει λειτουργίες που σας επιτρέπουν να απομονώσετε ένα μπλοκ κώδικα και να το επαναχρησιμοποιήσετε κάπου αλλού. Μπορείτε επίσης να χρησιμοποιήσετε την εκχώρηση συναρτήσεων σε μεταβλητές και να τις μεταβιβάσετε ως παραμέτρους, όπως άλλες τιμές.

Τι είναι οι συναρτήσεις ανώτερης τάξης;

Ο απλούστερος ορισμός για μια συνάρτηση υψηλότερης τάξης είναι μια συνάρτηση που εκτελεί λειτουργίες σε άλλες συναρτήσεις αποδεχόμενοι ως παραμέτρους ή επιστρέφοντάς τις. Οι λειτουργίες ανώτερης τάξης χρησιμοποιούνται ευρέως στο πρότυπο λειτουργικού προγραμματισμού. Αν είστε μόλις ξεκινήσαμε με τη JavaScript, οι λειτουργίες υψηλότερης τάξης μπορεί να είναι λίγο δύσκολο να κατανοηθούν.

Εξετάστε το ακόλουθο παράδειγμα:

λειτουργίαμεταμορφώνω(στ) {
αφήνω resultArray = [];
ΕΠΙΣΤΡΟΦΗλειτουργία (πίνακας) {
Για (αφήνω i = 0; i < συστοιχία.μήκος; i++) {
 resultArray.push (fn (πίνακας[i]))
 }
ΕΠΙΣΤΡΟΦΗ πίνακας αποτελεσμάτων
 }
}

Στο μπλοκ κώδικα παραπάνω, το μεταμορφώνω Η συνάρτηση είναι μια συνάρτηση υψηλότερης τάξης που δέχεται το στ λειτουργεί ως παράμετρος και επιστρέφει μια ανώνυμη συνάρτηση που δέχεται πίνακας ως παράμετρος.

Ο σκοπός του μεταμορφώνω η λειτουργία είναι να τροποποιήσει τα στοιχεία του πίνακα. Πρώτον, ο κώδικας ορίζει μια μεταβλητή πίνακας αποτελεσμάτων και το συνδέει σε έναν κενό πίνακα.

ο μεταμορφώνω Η συνάρτηση επιστρέφει μια ανώνυμη συνάρτηση που περιηγείται σε κάθε στοιχείο μέσα πίνακας, μετά περνά το στοιχείο στο στ συνάρτηση για υπολογισμό και ωθεί το αποτέλεσμα σε πίνακας αποτελεσμάτων. Μετά την ολοκλήρωση του βρόχου, η ανώνυμη συνάρτηση επιστρέφει το πίνακας αποτελεσμάτων.

συνθ συνάρτηση 1 = μετασχηματισμός((Χ) => Χ * 2)
κονσόλα.log (συνάρτηση1([ 2, 3, 4, 5, 6 ])) /* [ 4, 6, 8, 10, 12] */

Το παραπάνω μπλοκ κώδικα εκχωρεί την ανώνυμη συνάρτηση που επιστρέφεται από το μεταμορφώνω συνάρτηση στη σταθερή μεταβλητή λειτουργία 1. στ επιστρέφει το προϊόν του Χ που είναι υποκατάστατο για πίνακας[i].

Ο κώδικας μεταβιβάζει επίσης έναν πίνακα, ως παράμετρο σε λειτουργία 1 και στη συνέχεια καταγράφει το αποτέλεσμα στην κονσόλα. Ένας συντομότερος τρόπος γραφής αυτού θα ήταν:

κονσόλα.log (μετασχηματισμός((Χ) => Χ * 2)([ 2, 3, 4, 5, 6 ]))

Η JavaScript έχει μια ενσωματωμένη λειτουργία υψηλότερης τάξης που ουσιαστικά κάνει το ίδιο πράγμα με μεταμορφώνω, που θα καλύψουμε αργότερα.

Ας ελπίσουμε ότι αρχίζετε να καταλαβαίνετε πώς λειτουργούν οι λειτουργίες ανώτερης τάξης στο JavaScript. Ρίξτε μια ματιά στην παρακάτω λειτουργία και δείτε αν μπορείτε να μαντέψετε τι κάνει.

λειτουργίαfilterAndTransform(fn, arrayToBeFiltered, συνθήκη) {
αφήνω filteredArray = [];
Για (αφήνω i = 0; i < arrayToBeFiltered.length; i++) {
αν (συνθήκη (arrayToBeFiltered[i])) {
αφήνω y = μετασχηματισμός (fn)([ arrayToBeFiltered[i] ])[0]
 filteredArray.push (y)
 } αλλού {
 filteredArray.push (arrayToBeFiltered[i])
 }
 }
ΕΠΙΣΤΡΟΦΗ φιλτραρισμένος πίνακας
}

Αυτό το μπλοκ κώδικα ορίζει μια συνάρτηση που κάνει ό, τι υποψιάζεστε—ελέγχει για τα στοιχεία του πίνακα που πληρούν μια συγκεκριμένη συνθήκη και τα μετατρέπει με το μεταμορφώνω() λειτουργία. Για να χρησιμοποιήσετε αυτήν τη λειτουργία, κάνετε κάτι σαν αυτό:

filterAndTransform((Χ) => Χ * 2, [ 1, 2, 3, 4, 5 ], (x) => x % 20)

σε αντίθεση με το μεταμορφώνω λειτουργία, Η filterAndTransform Η συνάρτηση παίρνει δύο συναρτήσεις ως παραμέτρους: στ και κατάσταση. ο κατάσταση Η συνάρτηση ελέγχει εάν η παράμετρος έχει περάσει, είναι ζυγός αριθμός και επιστρέφει true. Διαφορετικά, επιστρέφει ψευδής.

Αν κατάσταση επιλύεται σε true (η προϋπόθεση πληρούται), μόνο τότε είναι το μεταμορφώνω καλείται η συνάρτηση. Αυτή η λογική θα μπορούσε να είναι χρήσιμη εάν εργάζεστε με έναν πίνακα και θέλετε να μεταμορφώσετε ορισμένα στοιχεία. Εάν εκτελέσετε αυτόν τον κώδικα στην κονσόλα του προγράμματος περιήγησης, θα πρέπει να λάβετε την ακόλουθη απάντηση:

[ 1, 4, 3, 8, 5 ]

Μπορείτε να δείτε ότι η συνάρτηση μετατρέπει μόνο τα στοιχεία που πληρούν μια συγκεκριμένη συνθήκη, αφήνοντας τα στοιχεία που δεν πληρούν τη συνθήκη, ως έχουν.

Η συνάρτηση Array.map() Higher-Order σε JavaScript

Μέθοδοι πίνακα όπως map() είναι συναρτήσεις υψηλότερης τάξης που διευκολύνουν τον χειρισμό πινάκων. Ετσι δουλευει.

αφήνω συστοιχία = [ 1, 2, 3, 4, 5 ];
αφήνω transformedArray = array.map((Χ) => Χ * 2);

Όταν συνδέεστε μετασχηματισμένος πίνακας στην κονσόλα του προγράμματος περιήγησης, θα πρέπει να έχετε το ίδιο αποτέλεσμα, που πήρατε με το μεταμορφώνω λειτουργία που αναφέρθηκε προηγουμένως:

[ 2, 4, 6, 8, 10 ]

array.map() παίρνει δύο παραμέτρους, η πρώτη παράμετρος αναφέρεται στο ίδιο το στοιχείο, ενώ η δεύτερη παράμετρος αναφέρεται στον δείκτη του στοιχείου (θέση στον πίνακα). Με μόλις array.map() μπορείτε να επιτύχετε τα ίδια αποτελέσματα με το filterAndTransform λειτουργία. Δείτε πώς το κάνετε:

αφήνω συστοιχία = [ 1, 2, 3, 4, 5 ];
αφήνω transformedArray = array.map((Χ) => Χ % 20? Χ * 2: Χ);

Στο παραπάνω μπλοκ κώδικα, η συνάρτηση επιστρέφει το γινόμενο του τρέχοντος στοιχείου και 2, εάν το στοιχείο είναι άρτιο. Διαφορετικά, επιστρέφει το στοιχείο ανέγγιχτο.

Με το ενσωματωμένο χάρτης λειτουργία, καταφέρατε να εξαλείψετε την ανάγκη για πολλές γραμμές κώδικα, με αποτέλεσμα να έχετε πολύ καθαρότερο κώδικα και λιγότερες πιθανότητες εμφάνισης σφαλμάτων.

Η συνάρτηση Array.filter() σε JavaScript

Όταν επικαλείστε το φίλτρο μέθοδο σε έναν πίνακα, βεβαιωθείτε ότι η τιμή επιστροφής της συνάρτησης που μεταβιβάζετε στη μέθοδο είναι είτε true είτε false. ο φίλτρο μέθοδος επιστρέφει έναν πίνακα που περιέχει στοιχεία που πληρούν τη συνθήκη που έχει περάσει. Δείτε πώς το χρησιμοποιείτε.

λειτουργίαcheckFirstLetter(λέξη) {
αφήνω φωνήεντα = "αειου"
αν (φωνήεντα.περιλαμβάνει(λέξη[0].to LowerCase())) {
ΕΠΙΣΤΡΟΦΗ λέξη;
 } αλλού {
ΕΠΙΣΤΡΟΦΗ;
 }
}
αφήνω λέξεις = [ "Γειά σου", "από", "ο", "παιδιά", "του", "πλανήτης", "Γη" ];
αφήνω αποτέλεσμα = words.filter((Χ) => checkFirstLetter (x))

Το μπλοκ κώδικα παραπάνω διασχίζει το λόγια πίνακας και φιλτράρει οποιαδήποτε λέξη της οποίας το πρώτο γράμμα είναι φωνήεν. Όταν εκτελείτε τον κωδικό και καταγράφετε το αποτέλεσμα μεταβλητή, θα πρέπει να λάβετε τα ακόλουθα αποτελέσματα:

[ 'του', 'Γη' ];

Η συνάρτηση Array.reduce() σε JavaScript

ο περιορίζω() Η συνάρτηση υψηλότερης τάξης λαμβάνει δύο παραμέτρους. Η πρώτη παράμετρος είναι η συνάρτηση μείωσης. Αυτή η συνάρτηση μείωσης είναι υπεύθυνη για το συνδυασμό δύο τιμών και την επιστροφή αυτής της τιμής. Η δεύτερη παράμετρος είναι προαιρετική.

Καθορίζει την αρχική τιμή που πρέπει να περάσει στη συνάρτηση. Εάν θέλετε να επιστρέψετε ένα άθροισμα όλων των στοιχείων σε έναν πίνακα, μπορείτε να κάνετε τα εξής:

αφήνω a = [ 1, 2, 3, 4, 5];
αφήνω άθροισμα = 0;
Για (αφήνω i = 0; i < α.μήκος; i++) {
 sum = άθροισμα + a[i];
}
κονσόλα.log (άθροισμα);

Εάν εκτελέσετε τον κωδικό, άθροισμα πρέπει να είναι 15. Μπορείτε επίσης να ακολουθήσετε διαφορετική προσέγγιση με το περιορίζω λειτουργία.

αφήνω a = [ 1, 2, 3, 4, 5 ];
άθροισμα = α.μείωση((c, n) => c + n);
κονσόλα.log (άθροισμα);

Το παραπάνω μπλοκ κώδικα είναι πολύ πιο καθαρό σε σύγκριση με το προηγούμενο παράδειγμα. Σε αυτό το παράδειγμα, η συνάρτηση μείωσης λαμβάνει δύο παραμέτρους: ντο και n. ντο αναφέρεται στο τρέχον στοιχείο ενώ n αναφέρεται στο επόμενο στοιχείο του πίνακα.

Όταν εκτελείται ο κώδικας, η συνάρτηση μειωτήρα περνάει από τον πίνακα, φροντίζοντας να προσθέσετε την τρέχουσα τιμή στο αποτέλεσμα από το προηγούμενο βήμα.

Η δύναμη των συναρτήσεων ανώτερης τάξης

Οι λειτουργίες στο JavaScript είναι ισχυρές, αλλά οι συναρτήσεις υψηλότερης τάξης οδηγούν τα πράγματα στο επόμενο επίπεδο. Χρησιμοποιούνται ευρέως στον λειτουργικό προγραμματισμό, επιτρέποντάς σας να φιλτράρετε, να μειώσετε και να χαρτογραφήσετε πίνακες με ευκολία.

Οι λειτουργίες υψηλότερης τάξης μπορούν να σας βοηθήσουν να γράψετε πιο αρθρωτό και επαναχρησιμοποιήσιμο κώδικα κατά τη δημιουργία εφαρμογών.