Συντακτική ζάχαρη και διαβήτης JavaScript

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

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

Με συντακτική ζάχαρη - όπως με τα ακρωνύμια - μπορείτε να GTFAMLH! (πάμε πολύ μακριά και κάνε τη ζωή πιο δύσκολη)

Ήμουν φρέσκος έξω από το κολέγιο, κάνοντας διασκεδαστικές εφαρμογές σε hackathons με τους φίλους μου και σε μια νέα συναρπαστική διαδρομή. Ένιωσα ασταμάτητη . Κατάλαβα όλα τα παραδείγματα της Codecademy, έδωσα στη μνήμη κάθε ερώτηση συνέντευξης διεπαφής. Παρακολούθησα «Τι… JavaScript;» τόσες πολλές φορές που αν μια μαϊμού κραυγή έβγαζε τυχαίες γραμμές κώδικα σε μια κονσόλα, ήξερα τι θα αξιολογούσε.

Ήρθε η ώρα να μπω στο GitHub και να μοιραστώ το δώρο μου με τον κόσμο . Άνοιξα το πρώτο έργο που μπορούσα να βρω και άρχισα να διαβάζω. Φαινόταν κάπως έτσι:

function init(userConfig) { const DEFAULT_CONFIG = { removeSpaces: false, allowHighlighting: true, priority: "high", } const config = { ...DEFAULT_CONFIG, ...userConfig }; }

Στιγμές αργότερα…

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

  1. Ανακαλύψτε μια γραμμή κώδικα που τότε ήταν απλώς ιερογλυφικά JavaScript.
  2. Χωρίς να ξέρεις πώς να κάνεις τις σωστές ερωτήσεις και να δημιουργήσεις πιθανώς τις χειρότερες αναζητήσεις Google που είναι γνωστές στην ανθρωπότητα.
  3. Ενοχλεί τους τυχαίους προγραμματιστές έως ότου κάποιος μπορούσε να «Εξηγήσει σαν είμαι 5», αλλά στο τέλος, ακόμα και μπερδεμένος γιατί κάποιος θα έγραφε κάτι τέτοιο. Ο σαδισμός, πιθανώς .

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

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

6. Εύρεση του υπολοίπου και προσθήκη ενός εξαιρετικού εργαλείου στην εργαλειοθήκη JavaScript. ;

5. Ξεπλύνετε και επαναλάβετε περίπου 20 φορές.

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

Ternary χειριστής

Ο Ternary Operator είναι ένας από τους αγαπημένους μου για να ξεκινήσω όταν μιλάω για ζάχαρη σε JavaScript, καθώς είναι πολύ εύκολο να πάει πολύ μακριά. Συνήθως παίρνει τη μορφή x ? a : b. Ακολουθεί ένα πιο ρεαλιστικό παράδειγμα:

const amILazy = true; const dinnerForTonight = amILazy ? "spaghetti" : "chicken";

Πρόβλημα: Έχω μια μεταβλητή που εξαρτάται από κάποια κατάσταση που είναι αληθής ή ψευδής.

Λύση Διατροφής: Αυτός είναι βασικά ένας πολύ σύντομος τρόπος για να το κάνετε if/else!

const amILazy = true; let dinnerForTonight = null; if(amILazy) { dinnerForTonight = "spaghetti"; } else { dinnerForTonight = "chicken"; }

Πότε να μην το χρησιμοποιήσετε: Τα Ternaries είναι ένας πολύ απλός τρόπος για να εκφράσετε μονοπάτια διακλάδωσης. Κατά την υποκειμενική μου γνώμη, το χειρότερο πράγμα γι 'αυτούς είναι ότι είναι άφθονα φωλιά. Έτσι, εάν είστε οπαδός της ασφάλειας στην εργασία, θα μπορούσατε ενδεχομένως να γράψετε αυτό το melter εγκεφάλου.

const canYouFireMe = someCondition1 ? (someCondition2 ? false : true) : false

Κλασικό παράδειγμα διαβήτη JavaScript. Λιγότερος κωδικός δεν σημαίνει πιο συνοπτικό κώδικα.

Εξάπλωση αντικειμένου

Αχ, το παράδειγμα από την αρχή που έσπασε την καρδιά μου. Στο Javascript, όταν το βλέπετε ..., ανάλογα με το περιεχόμενο θα είναι Object / Array Spread ή Object / Array Rest. Θα καλύψουμε λίγο το Rest, οπότε ας το βάλουμε στον πίσω καυστήρα

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

const DEFAULT_CONFIG = { preserveWhitespace: true, noBreaks: false, foo: "bar", }; const USER_CONFIG = { noBreaks: true, } const config = { ...DEFAULT_CONFIG, ...USER_CONFIG }; // console.log(config) => { // preserveWhitespace: true, // noBreaks: true, // foo: "bar", // }

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

Διατροφική λύση: Θα μπορούσατε να χρησιμοποιήσετε Object.assign()για να επιτύχετε παρόμοιο αποτέλεσμα. Παίρνει οποιονδήποτε αριθμό αντικειμένων ως ορίσματα, δίνει προτεραιότητα στα πιο δεξιά αντικείμενα όταν πρόκειται για κλειδιά και καταλήγει να μεταλλάσσει το πρώτο αντικείμενο που έχει δοθεί. Ένα συνηθισμένο σφάλμα δεν μεταδίδεται σε ένα κενό αντικείμενο ως το πρώτο όρισμα και κατά λάθος μετάλλαξη ενός επιχειρήματος που δεν θέλατε.

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

const DEFAULT_CONFIG = { preserveWhitespace: true, noBreaks: false, foo: "bar", }; const USER_CONFIG = { noBreaks: true, } // if we didn't pass in an empty object here, config // would point to DEFAULT_CONFIG, and default config would be // mutated const config = Object.assign({}, DEFAULT_CONFIG, USER_CONFIG);

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

; Μπόνους; Το Ar ray spread λειτουργεί πολύ παρόμοια! Αλλά επειδή δεν υπάρχουν πλήκτρα σε συστοιχίες, απλώς το προσθέτει στη νέα συστοιχία όπως μια Array.Prototype.concatκλήση.

const arr1 = ['a', 'b', 'c']; const arr2 = ['c', 'd', 'e']; const arr3 = [...arr1, ...arr2]; // console.log(arr3) => ['a', 'b', 'c', 'c', 'd', 'e']

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

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

const { preserveWhiteSpace, noBreaks } = config; // Now we have two new variables to play around with! if (preservedWhitespace && noBreaks) { doSomething(); };

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

Λύση διατροφής: Μπορείτε πάντα να το κάνετε με τον παλιομοδίτικο τρόπο! Αυτό θα μοιάζει κάπως έτσι.

const preserveWhitespace = config.preserveWhitepsace; const noBreaks = config.noBreaks; // Repeat forever until you have all the variables you need if (preservedWhitespace && noBreaks) { doSomething(); };

When not to use it: You can actually destructure an object out of an object, and continue to destructure deeper and deeper! Destructuring isn’t the only way to get a key out of an Object. If you find yourself only using destructuring for keys two or three layers deep, chances are you are doing more harm than good to the project.

? Bonus ? Arrays also have destructuring, but they work based off index.

const arr1 = ['a', 'b'] const [x, y] = arr1 // console.log(y) => 'b'

Object Rest

Object Rest goes hand in hand with Object Destructuring, and is very easy to confuse with Object Spread. Once again we use the ... operator, however the context is different. This time, it shows up while destructuring and is intended to gather leftover keys into one object. ?

const { preserveWhiteSpace, noBreaks, ...restOfKeys } = config; // restOfKeys, is an object containing all the keys from config // besides preserveWhiteSpace and noBreaks // console.log(restOfKeys) => { foo: "bar" }

Problem: You want an object that has a subset of keys from another object.

Diet Solution: You could use our old pal Object.assign and delete any of the keys that you don’t need! ?

When not to use it: Using it to create a new object with omitted keys is a common use case. Just be aware that the keys you are omitting in the destructure are still floating around and potentially taking up memory. If you’re not careful, this could cause a bug. ?

const restOfKeys = Object.assign({}, config); delete restOfKeys.preserveWhiteSpace delete restOfKeys.noBreaks

? Bonus ? Guess what? Arrays can do something similar and it works exactly the same!

const array = ['a', 'b', 'c', 'c', 'd', 'e']; const [x, y, ...z] = array; // console.log(z) = ['c', 'c', 'd', 'e']

Wrapping up

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

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

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

  • Ternary χειριστής
  • Σύνταξη Spread
  • Εργασία καταστροφής
  • Παράμετροι ανάπαυσης