Οι λειτουργίες βέλους JavaScript μπορούν να σας κάνουν καλύτερο προγραμματιστή

Διαφήμιση

Το JavaScript ES6 έφερε συναρπαστικές αλλαγές στον κόσμο της ανάπτυξης ιστού. Οι νέες προσθήκες στη γλώσσα JavaScript έφεραν νέες δυνατότητες.

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

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

Τι είναι οι λειτουργίες βέλους JavaScript;

Οι λειτουργίες βέλους είναι ένας νέος τρόπος για να γράψετε εκφράσεις λειτουργιών που ήταν που περιλαμβάνεται στην έκδοση του JavaScript ES6 Τι είναι ES6 και ποιοι προγραμματιστές Javascript πρέπει να ξέρετεΤο ES6 αναφέρεται στην έκδοση 6 της γλώσσας προγραμματισμού ECMA Script (Javascript). Ας δούμε τώρα μερικές σημαντικές αλλαγές που φέρνει το ES6 στη JavaScript. Διαβάστε περισσότερα

. Είναι παρόμοια με τις εκφράσεις λειτουργιών JavaScript που χρησιμοποιείτε, με κάποιους ελαφρώς διαφορετικούς κανόνες.

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

Αυτές οι λειτουργίες χρησιμοποιούν ένα νέο διακριτικό βέλους:

=>

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

Η σύνταξη για αυτές τις λειτουργίες είναι λίγο καθαρότερη από τις κανονικές λειτουργίες. Υπάρχουν μερικοί νέοι κανόνες που πρέπει να έχετε κατά νου:

• Η λέξη-κλειδί λειτουργίας καταργείται
• Η λέξη-κλειδί επιστροφής είναι προαιρετική
• Τα σγουράκια είναι προαιρετικά

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

Πώς να χρησιμοποιήσετε τις λειτουργίες βέλους

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

Εδώ είναι μια έκφραση λειτουργίας που προσθέτει δύο αριθμούς. χρησιμοποιώντας την παραδοσιακή μέθοδο λειτουργίας:

 ας addnum = συνάρτηση (num1, num2) {επιστροφή num1 + num2; }; addnum (1,2); >>3

Είναι μια αρκετά απλή λειτουργία που παίρνει δύο επιχειρήματα και επιστρέφει το ποσό.

Εδώ η έκφραση άλλαξε σε λειτουργία βέλους:

ας προσθέσουμε = (num1, num2) => {return num1 + num2;}; addnum (1,2); >>3

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

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

ας προσθέσουμε = (num1, num2) => num1 + num2;

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

Υπάρχουν περισσότερες λειτουργίες βέλους. ας σκεφτούμε βαθύτερα ώστε να έχετε μια καλύτερη αίσθηση για το τι μπορούν να κάνουν.

Λειτουργίες βέλους

Οι λειτουργίες βέλους έχουν πολλές διαφορετικές χρήσεις και χαρακτηριστικά.

Κανονικές λειτουργίες

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

ας τετράγωνο = x => x * x τετράγωνο (2)? >>4

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

αφήστε helloFunction = () => Console.log ("Hello reader!"); helloFunction (); >> Γεια σας αναγνώστη!

Απλές λειτουργίες όπως αυτές χρησιμοποιούν πολύ λιγότερο κώδικα. Φανταστείτε πόσο εύκολο είναι ένα πολύπλοκο όπως ένα slideshow JavaScript Πώς να δημιουργήσετε μια SlideShow JavaScript σε 3 εύκολα βήματαΣήμερα θα σας δείξω πώς να φτιάξετε ένα slideshow Javacript από την αρχή - ας πηδήσουμε δεξιά! Διαβάστε περισσότερα γίνεται όταν έχετε έναν απλούστερο τρόπο γραφής των λειτουργιών.

Χρησιμοποιώντας αυτό

Η εννοια του Αυτό τείνει να είναι το πιο δύσκολο μέρος της χρήσης του JavaScript. Λειτουργίες βέλους κάνουν Αυτό ευκολότερη στη χρήση.

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

Εδώ είναι ένα δημοφιλές παράδειγμα που δείχνει τον τρόπο αντιμετώπισης που πρέπει να χρησιμοποιήσετε με τις κανονικές λειτουργίες.

() {var that = this; // Πρέπει να ορίσετε 'αυτό' σε μια νέα μεταβλητή that.age = 0; setInterval (συνάρτηση growUp () {that.age ++; }, 1000); }

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

() {this.age = 0; setInterval (() => {this.age ++; // Τώρα μπορείτε να χρησιμοποιήσετε 'αυτό' χωρίς μια νέα μεταβλητή που δηλώθηκε}, 1000). }

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

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

ας πίτσα = { toppings: 5, removeToppings: () => {this.toppings--; } } // Ένα αντικείμενο πίτσας με 5 επικαλύψεις. > πίτσα. >> {toppings: 5, removeToppings: f} pizza.removeToppings (); // Η μέθοδος δεν θα κάνει τίποτα για το αντικείμενο> πίτσα. >> {toppings: 5, removeToppings: f} // Έχει 5 επικαλύψεις.

Εργασία με πίνακες

Χρησιμοποιώντας τις λειτουργίες βέλους μπορείτε να απλοποιήσετε τον κώδικα που χρησιμοποιείται για να εργαστείτε με μεθόδους πίνακα. Πίνακες και οι μέθοδοι συστοιχιών είναι πολύ σημαντικά μέρη του JavaScript 5 Μέθοδοι πινάκων JavaScript Πρέπει να αποκτήσετε μάθημα σήμεραΘέλετε να κατανοήσετε τους πίνακες JavaScript, αλλά δεν μπορείτε να τα αντιμετωπίσετε; Ελέγξτε τα παραδείγματα του πλέγματος JavaScript για καθοδήγηση. Διαβάστε περισσότερα έτσι θα τα χρησιμοποιήσετε πολύ.

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

ας myArray = [1,2,3,4]; myArray.map (λειτουργία (στοιχείο) { στοιχείο επιστροφής + 1; }); >> [2,3,4,5]

Αυτή είναι μια αρκετά απλή λειτουργία που προσθέτει μία σε κάθε τιμή στον πίνακα. Μπορείτε να γράψετε την ίδια λειτουργία με λιγότερο κώδικα χρησιμοποιώντας μια λειτουργία βέλους.

ας myArray = [1,2,3,4]; myArray.map (στοιχείο => { στοιχείο επιστροφής + 1; }); >> [2,3,4,5]

Είναι πολύ πιο εύκολο να διαβάσετε τώρα.

Δημιουργία λυχνιών αντικειμένων

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

ας createObject = λειτουργία createName (πρώτη, τελευταία) {επιστροφή {πρώτη: πρώτη, τελευταία: τελευταία}; };

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

αφήστε createArrowObject = (πρώτο, τελευταίο) => ({πρώτο: πρώτο, τελευταίο: τελευταίο});

Λειτουργίες βέλους JavaScript και πέρα

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

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

Θέλετε να μάθετε περισσότερα σχετικά με το JavaScript; Μας Το JavaScript εξαπατά το φύλλο Το Ultimate JavaScript Cheat SheetΛάβετε μια γρήγορη ενημέρωση για τα στοιχεία JavaScript με αυτό το εξαπατημένο φύλλο. Διαβάστε περισσότερα παρέχει πολύτιμες πληροφορίες και μάθετε περισσότερα σχετικά πώς λειτουργεί το JavaScript Τι είναι το JavaScript και πώς λειτουργεί;Αν μαθαίνετε την ανάπτυξη ιστού, πρέπει να ξέρετε τι πρέπει να γνωρίζετε σχετικά με το JavaScript και πώς λειτουργεί με το HTML και το CSS. Διαβάστε περισσότερα μπορεί να σας κάνει έναν καλύτερο προγραμματιστή.