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

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

Μάθετε πώς να ενισχύσετε τον κώδικά σας και να αξιοποιήσετε στο έπακρο αυτές τις γλώσσες με μερικές χρήσιμες συντομεύσεις.

1. Τριμερής Χειριστής

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

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

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

instagram viewer 
συνθ ηλικία = 20;
συνθ ηλικίαΤύπος = ηλικία >= 18? "Ενήλικας": "Παιδί";
κονσόλα.log (ageType); // Έξοδος: "Adult"

Αυτό το παράδειγμα χρησιμοποιεί τον τριαδικό τελεστή για να ελέγξει εάν η μεταβλητή ηλικία είναι μεγαλύτερο ή ίσο με 18. Εάν είναι, ο κωδικός εκχωρεί την τιμή Ενήλικας στη μεταβλητή Τύπος ηλικίας, διαφορετικά εκχωρεί την τιμή "Παιδί".

2. Πρότυπο Literals

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

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

συνθ όνομα = "Αλίκη";
συνθ χαιρετισμός = `Γεια, ${name}!`;
κονσόλα.log (χαιρετισμός); // Έξοδος: "Hello, Alice!"

Το παράδειγμα περιλαμβάνει το όνομα μεταβλητή στο πρότυπο κυριολεκτική χρήση ${}. Αυτό σας επιτρέπει να δημιουργήσετε εύκολα δυναμικές συμβολοσειρές.

3. Nullish Coalescing Operator

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

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

συνθ όνομα χρήστη = μηδενικό;
συνθ displayName = όνομα χρήστη; "Επισκέπτης";
κονσόλα.log (displayName); // Έξοδος: "Επισκέπτης"

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

4. Αξιολόγηση βραχυκυκλώματος

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

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

συνθ όνομα = "Γιάννης";
συνθ χαιρετισμός = όνομα && `Γεια, ${name}`;
κονσόλα.log (χαιρετισμός); // Έξοδος: "Hello, John"

Αυτό το παράδειγμα θα αξιολογήσει μόνο την έκφραση "Γεια, ${name}". αν η μεταβλητή όνομα έχει μια αληθινή αξία. Διαφορετικά, βραχυκυκλώνεται και εκχωρεί την τιμή του όνομα η ίδια στη μεταβλητή χαιρετισμός.

5. Συντομογραφία Εκχώρησης Ιδιότητας Αντικειμένου

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

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

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

συνθ Όνομα = "Γιάννης";
συνθ επώνυμο = "Ελαφίνα";
συνθ άτομο = { firstName, lastName };
κονσόλα.log (πρόσωπο); // Έξοδος: { firstName: "John", lastName: "Doe" }

Αυτό το παράδειγμα εκχωρεί τις ιδιότητες όνομα και επίθετο χρησιμοποιώντας συντομογραφία.

6. Προαιρετική Αλυσίδα

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

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

συνθ χρήστης = { όνομα: "Αλίκη", διεύθυνση: { πόλη: "Νέα Υόρκη", Χώρα: "ΗΠΑ" }};
συνθ χώρα = χρήστης.διεύθυνση;.χώρα;
κονσόλα.log (χώρα); // Έξοδος: "ΗΠΑ"

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

7. Καταστροφή αντικειμένων

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

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

συνθ χρήστης = { όνομα: "Γιάννης", ηλικία: 30 };
συνθ { όνομα, ηλικία } = χρήστης;
κονσόλα.log (όνομα, ηλικία). // Έξοδος: "John" 30

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

8. Διαχειριστής Spread

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

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

συνθ αριθμοί = [1, 2, 3];
συνθ newNumbers = [...αριθμοί, 4, 5];
κονσόλα.log (newNumbers); // Έξοδος: [1, 2, 3, 4, 5]

Στο παραπάνω παράδειγμα, ο τελεστής spread επεκτείνει το αριθμοί συστοιχία σε μεμονωμένα στοιχεία, τα οποία στη συνέχεια συνδυάζονται με 4 και 5 για να δημιουργήσετε έναν νέο πίνακα, νέοι αριθμοί.

9. Συντομογραφία βρόχου αντικειμένου

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

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

συνθ χρήστης = { όνομα: "Γιάννης", ηλικία: 30 };
Για (συνθ [κλειδί, τιμή] τουΑντικείμενο.entries (χρήστης)) { 
κονσόλα.κούτσουρο(`${κλειδί}: ${value}`);
}
// Έξοδος:
// όνομα: Γιάννης
// ηλικία: 30

Στο παραπάνω παράδειγμα, Object.entries (χρήστης) επιστρέφει έναν πίνακα ζευγών κλειδιών-τιμών, τα οποία κάθε επανάληψη στη συνέχεια καταστρέφει στις μεταβλητές κλειδί και αξία.

10. Array.indexOf Shortthand Χρήση του Bitwise Operator

Μπορείτε να αντικαταστήσετε τις κλήσεις στο Array.indexOf μέθοδος με συντομογραφία χρησιμοποιώντας τον τελεστή bitwise ~ για να ελέγξετε εάν ένα στοιχείο υπάρχει σε έναν πίνακα. Η στενογραφία επιστρέφει το ευρετήριο του στοιχείου εάν βρεθεί ή -1 αν δεν βρεθεί.

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

συνθ αριθμοί = [1, 2, 3];
συνθ ευρετήριο = ~numbers.indexOf(2);
κονσόλα.log (ευρετήριο); // Έξοδος: -2

Στο παραπάνω παράδειγμα, ~numbers.indexOf (2) επιστρέφει -2 επειδή 2 βρίσκεται στο δείκτη 1, και ο τελεστής bitwise αναιρεί το ευρετήριο.

11. Casting Values ​​to Boolean With!!

Προς την μετατρέψτε ρητά μια τιμή σε ένα boolean, μπορείτε να χρησιμοποιήσετε τον τελεστή διπλής άρνησης (!!). Μετατρέπει αποτελεσματικά μια τιμή αλήθειας σε αληθής και μια ψευδής τιμή σε ψευδής.

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

συνθ τιμή 1 = "Γειά σου";
συνθ τιμή2 = "";
κονσόλα.log(!!value1); // Έξοδος: true
κονσόλα.log(!!value2); // Έξοδος: ψευδής

Στο παραπάνω παράδειγμα, !!τιμή1 επιστρέφει αληθής γιατί η χορδή Γειά σου είναι αλήθεια, ενώ !!τιμή2 επιστρέφει ψευδής επειδή η κενή συμβολοσειρά είναι ψευδής.

Ξεκλείδωμα αποτελεσματικότητας και αναγνωσιμότητας κώδικα

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

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