Λειτουργίες JavaScript ES6: Τα καλά μέρη

Το ES6 προσφέρει μερικές δροσερές νέες λειτουργικές δυνατότητες που κάνουν τον προγραμματισμό σε JavaScript πολύ πιο ευέλικτο. Ας μιλήσουμε για μερικές από αυτές - συγκεκριμένα, τις προεπιλεγμένες παραμέτρους, τις παραμέτρους ανάπαυσης και τις λειτουργίες βέλους.

Συμβουλή διασκέδασης : μπορείτε να αντιγράψετε και να επικολλήσετε οποιοδήποτε από αυτά τα παραδείγματα / κώδικα στο Babel REPLκαι μπορείτε να δείτε πώς ο κώδικας ES6 μεταφέρεται στο ES5.

Προεπιλεγμένες τιμές παραμέτρων

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

Πώς θα εφαρμοστούν οι προεπιλεγμένες παράμετροι στο ES5

Τα παραπάνω φαίνονται καλά όταν τα εκτελούμε. number2δεν πέρασε και το ελέγξαμε χρησιμοποιώντας τον ||τελεστή για να επιστρέψουμε τον δεύτερο τελεστή εάν ο πρώτος είναι ψευδής. Έτσι, το «10» εκχωρήθηκε ως μια προεπιλεγμένη τιμή αφού number2δεν είναι καθορισμένο.

Υπάρχει όμως μόνο ένα πρόβλημα. Τι γίνεται αν κάποιος περάσει το "0" ως δεύτερο επιχείρημα; ⚠

Η παραπάνω προσέγγιση θα αποτύχει επειδή η προεπιλεγμένη τιμή μας '10' θα αντιστοιχιστεί αντί της τιμής που πέρασε, όπως '0' Γιατί; Επειδή το «0» εκτιμάται ως ψεύτικο!

Ας βελτιώσουμε τον παραπάνω κώδικα, έτσι;

Αχ! Αυτός είναι πάρα πολύ κωδικός. Δεν είναι καθόλου δροσερό. Ας δούμε πώς το κάνει το ES6.

Προεπιλεγμένες παράμετροι στο ES6

function counts(number1 = 5, number2 = 10) { // do anything here}

number1και number2εκχωρούνται προεπιλεγμένες τιμές «5» και «10» αντίστοιχα.

Λοιπόν ναι, αυτό είναι λίγο πολύ. Κοντός και γλυκός. Δεν υπάρχει επιπλέον κωδικός για έλεγχο για παράμετρο που λείπει. Αυτό κάνει το σώμα της λειτουργίας ωραίο και σύντομο. ;

ΣΗΜΕΙΩΣΗ: Όταν μια τιμή undefinedμεταβιβάζεται για μια παράμετρο με προεπιλεγμένο όρισμα, όπως αναμενόταν, η τιμή που πέρασε δεν είναι έγκυρη και η προεπιλεγμένη τιμή παραμέτρου έχει εκχωρηθεί . Αλλά εάν nullπεράσει, θεωρείται έγκυρη και η προεπιλεγμένη παράμετρος δεν χρησιμοποιείται και η τιμή null αντιστοιχεί σε αυτήν την παράμετρο.

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

Οι προηγούμενες παράμετροι μπορούν επίσης να είναι οι προεπιλεγμένες παράμετροι για τις παραμέτρους που ακολουθούν όπως:

function multiply(first, second = first) { // do something here}

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

function add(first = second, second) { return first + second;}console.log(add(undefined, 1)); //throws an error

Παράμετροι ανάπαυσης

Μια παράμετρος ανάπαυσης είναι απλώς μια ονομαζόμενη παράμετρος που προηγείται από τρεις τελείες (…). Αυτή η ονομαζόμενη παράμετρος γίνεται ένας πίνακας που περιέχει τις υπόλοιπες παραμέτρους (δηλαδή εκτός από τις ονομασμένες παραμέτρους) που πέρασαν κατά τη διάρκεια της κλήσης συνάρτησης

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

Ακολουθεί ένα παράδειγμα:

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

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

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

Οι λειτουργίες Arrow, ή οι «λειτουργίες fat arrow» εισάγουν μια νέα σύνταξη για τον ορισμό των λειτουργιών που είναι πολύ συνοπτικές. Μπορούμε να αποφύγουμε την πληκτρολόγηση λέξεων-κλειδιών όπως function, returnακόμη και σγουρά αγκύλες { }και παρενθέσεις ().

Σύνταξη

Η σύνταξη διατίθεται σε διαφορετικές γεύσεις, ανάλογα με τη χρήση μας. Όλες οι παραλλαγές έχουν ένα κοινό σημείο , δηλαδή ξεκινούν με τα επιχειρήματα , ακολουθούμενο από το βέλος ( =>), ακολουθούμενο από τη λειτουργία .

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

let mirror = value => value;
// equivalent to:
let mirror = function(value) { return value;};

Το παραπάνω παράδειγμα παίρνει ένα μόνο όρισμα «τιμή» (πριν από το βέλος) και απλώς επιστρέφει αυτό το όρισμα ( => value;). Όπως μπορείτε να δείτε , υπάρχει μόνο η τιμή επιστροφής, οπότε δεν χρειάζεται λέξη-κλειδί επιστροφής ή σγουρά σουτιέν για να ολοκληρώσετε το σώμα λειτουργίας.

Δεδομένου ότι υπάρχει μόνο ένα επιχείρημα , δεν υπάρχει ανάγκη παρενθέσεων "()".

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

let add = (no1, no2) => no1 + no2;
// equivalent to:
let add = function(no1, no2) { return no1 + no2;};

Εάν δεν υπάρχουν καθόλου επιχειρήματα, πρέπει να συμπεριλάβετε κενές παρενθέσεις όπως παρακάτω:

let getMessage = () => 'Hello World';
// equivalent to:
let getMessage = function() { return 'Hello World';}

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

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

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

let calculate = (no1, no2, operation) => { let result; switch (operation) { case 'add': result = no1 + no2; break; case 'subtract': result = no1 - no2; break; } return result;};

Τώρα τι γίνεται αν θέλουμε μια συνάρτηση που επιστρέφει απλώς ένα αντικείμενο; Ο μεταγλωττιστής θα μπερδευτεί εάν τα σγουρά τιράντες είναι του αντικειμένου ( er}) ή σγουρά τιράντες του σώματος λειτουργίας.()=>{id: numb

Η λύση είναι να τυλίξετε το αντικείμενο σε παρένθεση. Δείτε πώς:

let getTempItem = number => ({ id: number});
// effectively equivalent to:
let getTempItem = function(number) { return { id: number };};

Let’s have a look at the final example. In this we’ll use filter function on a sample array of numbers to return all numbers greater than 5,000:

// with arrow functionlet result = sampleArray.filter(element => element > 5000);
// without arrow functionlet result = sampleArray.filter(function(element) { return element > 5000;});

We can see how much less code is necessary compared to the traditional functions.

A few things about arrow functions to keep in mind though:

  • They can’t be called with new, can’t be used as constructors (and therefore lack prototype as well)
  • Arrow functions have their own scope, but there’s no ‘this’ of their own.
  • No arguments object is available. You can use rest parameters however.

Since JavaScript treats functions as first-class, arrow functions make writing functional code like lambda expressions and currying much easier.

"Οι λειτουργίες βέλους ήταν σαν καύσιμο πυραύλων για τη λειτουργική έκρηξη προγραμματισμού σε JavaScript." - Έρικ Έλιοτ

Λοιπόν, πήγαινε! Ίσως ήρθε η ώρα να αρχίσετε να χρησιμοποιείτε αυτές τις δυνατότητες.

Τα χαρακτηριστικά ES6 όπως αυτά είναι μια ανάσα καθαρού αέρα και οι προγραμματιστές αγαπούν τη χρήση τους.

Εδώ είναι ο σύνδεσμος για την προηγούμενη ανάρτησή μου σχετικά με μεταβλητές δηλώσεις και ανύψωση!

Ελπίζω αυτό να σας παρακινήσει να συνεχίσετε το ES6 εάν δεν το έχετε κάνει ήδη!

Ειρήνη ✌️️