Η σύγχρονη JavaScript έχει πολλά νέα χαρακτηριστικά που διευκολύνουν τη σύνταξη κώδικα με απλό και δομημένο τρόπο. Ένα από τα εύχρηστα σύγχρονα χαρακτηριστικά που διατίθενται στο ES6+ είναι η καταστροφή συστοιχιών και αντικειμένων.
Τα πλαίσια JavaScript όπως το React.js και το Angular ενθαρρύνουν τη χρήση αυτής της τεχνικής. Επομένως, είναι σημαντικό να κατανοήσουμε τι είναι η αποδιάρθρωση και πώς να τη χρησιμοποιήσετε κατά τη σύνταξη κώδικα.
Τι είναι η καταστροφή αντικειμένων και συστοιχιών στο JavaScript;
Η καταστροφή στο JavaScript αναφέρεται στη διαδικασία αποσυσκευασίας τιμών από έναν πίνακα ή ένα αντικείμενο. Παρέχει έναν πιο συνοπτικό τρόπο λήψης τιμών από πίνακες ή αντικείμενα χωρίς βαριά ανύψωση όταν ενδιαφέρεστε για μεμονωμένα στοιχεία πίνακα ή τιμές σε ένα αντικείμενο.
Είναι επίσης χρήσιμο κατά την επεξεργασία τιμών που επιστρέφουν από μια σύνθετη συνάρτηση ή έκφραση. Αυτή η έννοια είναι ένα από τα
βέλτιστες πρακτικές που πρέπει να ακολουθείτε κατά τη σύνταξη κώδικα React.Πώς να καταστρέψετε πίνακες
Ακολουθεί ένα δείγμα κώδικα για να αποκτήσετε μια αίσθηση της αποδομής του πίνακα:
συνθ arr = [1, 2];
συνθ [a, b] = arr;
κονσόλα.log (α) // εκτυπώνει 1 στην κονσόλα
κονσόλα.log (β) // εκτυπώνει 2 στην κονσόλα
Αυτός ο κωδικός χρησιμοποιεί αποδομή για να εκχωρήσει τις τιμές από αρ—1 και 2—στις μεταβλητές ένα και σι, αντίστοιχα. Αυτή είναι η θεμελιώδης ιδέα πίσω από την καταστροφή. Έχετε έναν πίνακα ή ένα αντικείμενο στη δεξιά πλευρά και αποσυσκευάζετε στοιχεία και τα εκχωρείτε σε μεμονωμένες μεταβλητές στην αριστερή πλευρά.
Κάτω από την κουκούλα, η JavaScript αντιγράφει τιμές από αρ και τις εκχωρεί στις μεταβλητές στην αριστερή πλευρά ως εξής:
συνθ arr = [1,2];
συνθ a = arr[0];
συνθ b = arr[1];
Όπως μπορείτε να δείτε, η αποδιάρθρωση είναι ένας πιο συνοπτικός τρόπος για να γίνει αυτό, σε αντίθεση με τη χρήση του αντικειμένου ή της σημείωσης αγκύλης. Ωστόσο, αυτή η σύνταξη πιθανότατα θα είναι χρήσιμη όταν εργάζεστε με σύνθετους πίνακες ή συναρτήσεις που επιστρέφουν πίνακες ή συμβολοσειρές.
Ελέγξτε το δείγμα κώδικα παρακάτω:
συνθ [ημέρα, μήνας, ημερομηνία, έτος, ώρα, ζώνη ώρας] = Ημερομηνία().διαίρεση(' ')
// Ημερομηνία κλήσης() επιστρέφει την τρέχουσα ημερομηνία με τη μορφή:
// Δευτ. 20 Φεβ 2023 13:07:29 GMT+0000
κονσόλα.log (ημέρα) // εκτυπώνει Δευτ
κονσόλα.log (μήνας) // εκτυπώνει Φεβ
κονσόλα.log (ημερομηνία) // εκτυπώνει 20
Σε αυτό το δείγμα κώδικα, δημιουργούμε μια νέα συμβολοσειρά με την τρέχουσα ημερομηνία καλώντας Ημερομηνία(). Στη συνέχεια, χρησιμοποιούμε διαίρεση(), ένα Μέθοδος συμβολοσειράς JavaScript, για να διαχωρίσετε στοιχεία στη συμβολοσειρά χρησιμοποιώντας το διάστημα ως διαχωριστικό. διαίρεση(' ') επιστρέφει έναν πίνακα και χρησιμοποιούμε destructuring για να εκχωρήσουμε τις τιμές σε μεμονωμένες μεταβλητές.
Να θυμάστε ότι εάν ο πίνακας σας περιέχει περισσότερα στοιχεία από αυτά που αποσυσκευάζετε, η JavaScript θα αγνοήσει τα επιπλέον στοιχεία.
συνθ arr = [1, 2, 3, 4];
συνθ [a, b] = arr;
κονσόλα.log (α) // εκτυπώσεις 1
κονσόλα.log (β) // εκτυπώσεις 2
// Οι τιμές 3 και 4 δεν εκχωρούνται σε καμία μεταβλητή. αγνοούνται
Σε αυτήν την περίπτωση, εάν θέλετε να αποθηκεύσετε τα υπόλοιπα στοιχεία σε μια μεταβλητή, χρησιμοποιήστε μια παράμετρο ανάπαυσης όπως αυτή:
συνθ arr = [1, 2, 3, 4];
συνθ [a, b, ...rest] = arr;
κονσόλα.log (υπόλοιπο) // εκτυπώνει [3,4]
Μερικές φορές, μπορεί να μην σας ενδιαφέρει ένα συγκεκριμένο αντικείμενο. Το μοτίβο αποδομής της JavaScript σάς επιτρέπει επίσης να παραλείψετε ορισμένα στοιχεία χρησιμοποιώντας ένα κενό κόμμα.
συνθ arr = [1, 2, 3, 4];
συνθ [a,, c] = arr;
κονσόλα.log (c) // εκτυπώσεις 3
Ο παραπάνω κώδικας χρησιμοποιεί τον κενό χώρο για να αγνοήσει την τιμή 2 στη συστοιχία αρ. Αντί να εκχωρήσετε αξία 2 σε μεταβλητή ντο, μεταβαίνει στο επόμενο στοιχείο του πίνακα. Επίσης, αγνοεί την τέταρτη τιμή επειδή δεν καθορίζει μια μεταβλητή για να την αποθηκεύσει.
Αντίθετα, εάν χρειάζεστε λιγότερα αντικείμενα από αυτά που αποσυσκευάζετε, η διαδικασία θα εκχωρήσει το απροσδιόριστος τιμή σε αυτές τις επιπλέον μεταβλητές.
συνθ arr = [1];
συνθ [a, b] = arr;
κονσόλα.log (α) // εκτυπώσεις 1
κονσόλα.log (β) // εκτυπώνει απροσδιόριστο
Για να αποτρέψετε τον μη καθορισμό των μεταβλητών, μπορείτε να ορίσετε προεπιλεγμένες τιμές εάν δεν είστε σίγουροι για το μήκος του πίνακα ως εξής (η εκχώρηση προεπιλεγμένων τιμών δεν είναι απαίτηση):
συνθ arr = [1];
συνθ [a = '10', β = 'δεν παρέχεται'] = arr;
κονσόλα.log (α) // εκτυπώσεις 1
κονσόλα.log (β) // εκτυπώνει "δεν παρέχεται"
Αυτή η αποδιάρθρωση εκχωρεί την τιμή 1 σε μεταβλητή ένα, αντικαθιστώντας την προεπιλεγμένη τιμή του. Μεταβλητός σι διατηρεί την προεπιλογή επειδή δεν παρέχεται τιμή.
Πώς να καταστρέψετε αντικείμενα
Η καταστροφή αντικειμένων δεν είναι τόσο διαφορετική από τους πίνακες. Η μόνη διαφορά είναι ότι οι πίνακες είναι επαναλαμβανόμενοι και τα αντικείμενα όχι, με αποτέλεσμα να κάνουμε τα πράγματα λίγο διαφορετικό.
Όταν εργάζεστε με αντικείμενα, οι μεταβλητές στην αριστερή πλευρά του τελεστή εκχώρησης αρχικοποιούνται επίσης σαν αντικείμενα:
συνθ άτομο = {όνομα: 'Alvin', ηλικία: 10, ύψος: 1};
συνθ {όνομα, ηλικία, ύψος} = άτομο;
κονσόλα.log (όνομα) // εκτυπώνει "Alvin"
κονσόλα.log (ύψος) // εκτυπώσεις 1
Από τον κώδικα, χρησιμοποιούμε ονόματα ιδιοτήτων από το πρόσωπο αντικείμενο. Ωστόσο, δεν χρειάζεται να χρησιμοποιήσετε τα ακριβή ονόματα ιδιοτήτων στο αντικείμενο. Μπορείτε να καταστρέψετε και να αποθηκεύσετε τις τιμές σε διαφορετικά ονόματα μεταβλητών ως εξής:
συνθ άτομο = {όνομα: 'Alvin', ηλικία: 10, ύψος: 1};
συνθ {όνομα: όνομα, ηλικία: χρόνια, ύψος: τρέχον Ύψος} = άτομο;
κονσόλα.log (όνομα) // εκτυπώνει "Alvin"
κονσόλα.log (currentHeight) // εκτυπώσεις 1
Ξεκινάτε καθορίζοντας την τιμή ιδιότητας που θέλετε να καταστρέψετε και, στη συνέχεια, καθορίστε το όνομα της μεταβλητής που θα χρησιμοποιήσετε για να αποθηκεύσετε την τιμή μετά από άνω και κάτω τελεία. Και όπως οι πίνακες, θα γίνει η καταστροφή ενός ονόματος ιδιοκτησίας που δεν υπάρχει απροσδιόριστος.
Για να το χειριστείτε αυτό, μπορείτε παρομοίως να καθορίσετε προεπιλεγμένες τιμές σε περίπτωση που το όνομα ιδιότητας που θέλετε να αντιστοιχίσετε σε μια μεταβλητή δεν είναι διαθέσιμο:
συνθ άτομο = {όνομα: 'Alvin', ηλικία: 10, ύψος: 1};
συνθ {όνομα, ηλικία, ύψος, τοποθεσία='Παγκόσμιος'} = άτομο;
κονσόλα.log (όνομα) // εκτυπώνει "Alvin"
κονσόλα.log (τοποθεσία) // εκτυπώνει "Παγκοσμίως"
Η σειρά των μεταβλητών στην αριστερή πλευρά δεν έχει σημασία για ένα αντικείμενο, καθώς τα αντικείμενα αποθηκεύουν τιμές σε ζεύγη κλειδιών-τιμών. Ως εκ τούτου, ο ακόλουθος κώδικας θα δώσει τα ίδια αποτελέσματα:
συνθ άτομο = {όνομα: 'Alvin', ηλικία: 10, ύψος: 1};
συνθ {ηλικία, ύψος, όνομα} = άτομο;
κονσόλα.log (όνομα) // εκτυπώνει "Alvin"
κονσόλα.log (ύψος) // εκτυπώσεις 1
Τέλος, παρόμοια με τους πίνακες, μπορείτε επίσης να χρησιμοποιήσετε την παράμετρο υπόλοιπο για να αποδομήσετε πολλές τιμές σε μία μεταβλητή όπως:
συνθ άτομο = {όνομα: 'Alvin', ηλικία: 10, ύψος: 1};
συνθ {όνομα,... ανάπαυση} = άτομο;
κονσόλα.log (όνομα) // εκτυπώνει "Alvin"
κονσόλα.log (υπόλοιπο) // εκτυπώσεις { ηλικία: 10, ύψος: 1 }
Απλώς σημειώστε ότι η παράμετρος υπόλοιπο πρέπει να είναι πάντα τελευταία. Διαφορετικά, η JavaScript θα δημιουργήσει μια εξαίρεση.
Βελτιώστε την ποιότητα του κώδικα σας με την καταστροφή JavaScript
Τα σύγχρονα χαρακτηριστικά της Javascript, όπως η καταστροφή, σας επιτρέπουν να γράφετε πολύ ευανάγνωστο κώδικα. Χρησιμοποιώντας την αποδομή, μπορείτε γρήγορα να αποσυμπιέσετε τιμές από πίνακες και αντικείμενα. Η καταστροφή μπορεί επίσης να αποδειχθεί χρήσιμη σε άλλες καταστάσεις, όπως η εναλλαγή τιμών δύο μεταβλητών. Ας ελπίσουμε ότι τώρα καταλαβαίνετε τι σημαίνει καταστροφή στο JavaScript και μπορείτε να το χρησιμοποιήσετε ενώ γράφετε κώδικα.
