Πώς να χρησιμοποιήσετε το destructuring σε JavaScript για να γράψετε καθαρότερο, πιο ισχυρό κώδικα

Μερικές φορές πρέπει να καταστρέψεις για να χτίσεις κάτι νέο. - Mistborn: The Hero of Ages

Το ES6 μάς παρουσίασε μια από τις πιο αναμενόμενες δυνατότητες JavaScript: καταστροφές. Ως έννοια, το Destructuring δεν είναι νέο ή πρωτοποριακό και ορισμένες γλώσσες είχαν ήδη Destructuring (??) πολύ πριν. Αλλά ήταν μια πολύ απαραίτητη και ζητούμενη λειτουργία σε JavaScript.

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

Η καταστροφή κάνει, σπάει οτιδήποτε…. τι χρησιμεύει για αυτό;

Πριν απαντήσουμε σε αυτήν την ερώτηση, ας έχουμε έναν επίσημο ορισμό για το Destructuring. MDN για τη διάσωση!

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

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

Πίνακες

Δείγμα 1:

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

Στη γραμμή 1, ορίζουμε 2 μεταβλητές aκαι b. Στην επόμενη γραμμή και οι δύο μεταβλητές βρίσκονται μέσα σε έναν πίνακα στην αριστερή πλευρά, ο οποίος με τη σειρά του εξομοιώνεται με έναν πραγματικό πίνακα στην πλευρά οδήγησης. Στις επόμενες γραμμές εκτυπώνουμε τις τιμές a& bκαι παίρνουμε 7 και 8 αντίστοιχα, τα οποία ήταν τα στοιχεία του πίνακα RHS. Η μαγεία που συμβαίνει στη γραμμή 2 ονομάζεται καταστροφή.

Το LHS καταστρέφει το RHS και οι τιμές που αποκτήθηκαν από την αποσυσκευασία των στοιχείων αντιστοιχίζονται στις μεταβλητές με τη σειρά.

Αλλά γιατί είναι το LHS μέσα σε έναν πίνακα ;;;

Η αντιστοίχιση καταστροφής χρησιμοποιεί παρόμοια σύνταξη, στο LHS σε σύγκριση με το RHS για να καθορίσει ποιες τιμές πρέπει να αποσυσκευαστούν από τη μεταβλητή που προέρχεται.

Δείγμα 2:

Εδώ έχουμε εισαγάγει μια άλλη μεταβλητή leftoutστον κώδικα τώρα. Έχουμε 2 διαφορετικούς τύπους χρήσεων leftoutστον κώδικα.

  • [a,b,leftout]-> Αυτό εκχωρεί το τρίτο στοιχείο του πίνακα to leftόπως αναμένεται.
  • [a,b,…leftout]-> Αυτό δίνει τις πρώτες 2 τιμές toaa ndb αντίστοιχα και το υπόλοιπο του πίνακα αντιστοιχίζεται στη he leftoμεταβλητή t ut.

Η λύση βρίσκεται στον χειριστή. Αυτός ο τελεστής συμπτύσσει όλα τα υπόλοιπα ορίσματα ( υπόλοιπο ) σε έναν πίνακα. Στο τελευταίο σημείο, τα πρώτα 2 στοιχεία πίνακα αντιστοιχίζονται σε a& bαντίστοιχα, και τα υπόλοιπα ορίσματα συμπτύσσονται σε έναν πίνακα (αναδιάρθρωση ίσως ??) και αντιστοιχίζονται στη leftoutμεταβλητή. Μπορούμε να επαληθεύσουμε το ίδιο κοιτάζοντας την έξοδο.

Αντικείμενα

Δείγμα 1:

Η καταστροφή λειτουργεί το ίδιο για αντικείμενα και συστοιχίες. Το αντικείμενο στο LHS έχει ιδιότητες a& bοι οποίες αντιστοιχίζονται αντίστοιχα στις ιδιότητες a& bτου αντικειμένου RHS. Παίρνουμε 1 & 2 αντίστοιχα εκτυπώνοντάς τα.

Ένα πράγμα που πρέπει να παρατηρήσετε ( εάν έχετε ) είναι ότι υπάρχει μια μικρή αλλαγή στη σύνταξη ( τώρα έχετε ).

Στην Καταστροφή αντικειμένων, ολόκληρο το LHS & RHS τυλίγεται μέσα ( )

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

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

Δείγμα 2:

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

Σε τι χρησιμεύει η καταστροφή;

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

Μεταβλητή ανάθεση

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

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

Το ίδιο ισχύει και για το αντικείμενο.

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

Μερικές φορές μπορεί να συμβεί ότι ορίζουμε nαριθμό μεταβλητών για να πάρουμε τιμές από την καταστροφή, αλλά ο πίνακας / αντικείμενο μπορεί να έχει μόνο n-xστοιχεία. Σε αυτήν την περίπτωση xθα εκχωρηθούν μεταβλητές undefined.

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

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

Ανταλλαγή

Η ανταλλαγή είναι η διαδικασία ανταλλαγής τιμών μεταξύ 2 ή περισσότερων μεταβλητών. Ένας τυπικός τρόπος εκτέλεσης ανταλλαγής είναι είτε η χρήση προσωρινής μεταβλητής είτε η χρήση XOR. Στο JavaScript το ίδιο μπορεί να γίνει χρησιμοποιώντας το destructuring.

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

Χρησιμοποιώντας την καταστροφή αλλάζουμε τη θέση των στοιχείων και το Voilà! Η ανταλλαγή ολοκληρώθηκε.

Παράβλεψη τιμών

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

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

Έμμεση εκχώρηση μιας λειτουργίας επιστροφής

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

Ανάθεση σε νέες μεταβλητές

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

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

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

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

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

Έτσι δημιουργήσαμε ένα αντικείμενο που ονομάζεται obj το οποίο περιέχει την ίδια δομή με το αντικείμενο δεδομένων και οι τιμές που θέλουμε να αποσυσκευάσουμε παρέχονται ως μεταβλητές (mylatitude, mylongitude, mycity). Αυτά με τη σειρά τους εξομοιώνονται με τη συστοιχία δεδομένων (όπως και η σύνταξη καταστροφής πριν). Όταν εκτυπώνονται οι μεταβλητές λαμβάνουμε τις αντίστοιχες τιμές.

Καταστροφή με βρόχο

Στο παραπάνω απόσπασμα κώδικα, έχουμε μια σειρά ατόμων αντικειμένων των οποίων οι ιδιότητες με τη σειρά τους περιέχουν ένα αντικείμενο (άτομα> αντικείμενο> οικογένεια). Τώρα θέλουμε να αποσυμπιέσουμε μερικές από τις τιμές από το αντικείμενο χρησιμοποιώντας το..of loop.

Στον βρόχο έχουμε εκχωρήσει μια μεταβλητή αντικειμένου, με την ίδια δομή όπως στον πίνακα ατόμων, αγνοώντας τις τιμές που δεν χρειαζόμαστε. Έχουμε εκχωρήσει μεταβλητές n & m αντίστοιχα στο όνομα και τις ιδιότητες της μητέρας, επειδή αυτές είναι οι τιμές που θέλουμε να αποσυσκευάσουμε. Μέσα στο βρόχο εκτυπώνουμε τις μεταβλητές και παίρνουμε τις απαιτούμενες τιμές.

Η μεγάλη εικόνα.

Πρέπει να χρησιμοποιήσετε το πρόγραμμα καταστροφής στον κώδικά σας ή να το εξασκήσετε για να το κάνετε πραγματικά. Φαίνεται απλό στα παραδείγματα γιατί τα παραδείγματα είναι απλά για να σας κάνουν να κατανοήσετε τα βασικά. Με πολύπλοκες / πολλαπλές λειτουργίες (μείωση ()!), Η αποδόμηση μπορεί να προκαλέσει σύγχυση γρήγορα, κάτι που δεν θέλουμε!

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

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

Για κατασκευή

Για εξαγωγή (ακόμα ένα κάθε φορά)

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

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

Παγίδες

Υπάρχει μόνο ένα που μπορώ να σκεφτώ και το συζητήσαμε:

  • Μια δήλωση δεν πρέπει να ξεκινά με ένα σγουρό παρένθεση {

συμπέρασμα

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