Πώς να χρησιμοποιήσετε το Array και το Object Destructuring σε JavaScript

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

Γιατί είναι απαραίτητο;

Φανταστείτε ότι θέλουμε να εξαγάγουμε δεδομένα από έναν πίνακα. Προηγουμένως, πώς θα γίνει αυτό;

let introduction = ["Hello", "I" , "am", "Sarah"]; let greeting = introduction[0]; let name = introduction[3]; console.log(greeting);//"Hello" console.log(name);//"Sarah" 

Μπορούμε να δούμε ότι όταν θέλουμε να εξαγάγουμε δεδομένα από έναν πίνακα, πρέπει να κάνουμε το ίδιο πράγμα ξανά και ξανά.

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

Ας αρχίσουμε.

Βασική καταστροφή σειράς

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

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

let introduction = ["Hello", "I" , "am", "Sarah"]; let [greeting, pronoun] = introduction; console.log(greeting);//"Hello" console.log(pronoun);//"I" 

Μπορούμε επίσης να το κάνουμε με το ίδιο αποτέλεσμα.

let [greeting, pronoun] = ["Hello", "I" , "am", "Sarah"]; console.log(greeting);//"Hello" console.log(pronoun);//"I"

Δήλωση μεταβλητών πριν από την ανάθεση

Οι μεταβλητές μπορούν να δηλωθούν πριν εκχωρηθούν ως εξής:

 let greeting, pronoun; [greeting, pronoun] = ["Hello", "I" , "am", "Sarah"]; console.log(greeting);//"Hello" console.log(pronoun);//"I" 

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

Παράλειψη στοιχείων σε μια σειρά

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

let [greeting,,,name] = ["Hello", "I" , "am", "Sarah"]; console.log(greeting);//"Hello" console.log(name);//"Sarah" 

Τι συνέβη μόλις τώρα?

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

Ας κάνουμε ένα άλλο. Ας παραλείψουμε το πρώτο και το τρίτο στοιχείο στη λίστα. Πώς θα το κάναμε αυτό;

let [,pronoun,,name] = ["Hello", "I" , "am", "Sarah"]; console.log(pronoun);//"I" console.log(name);//"Sarah" 

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

let [,,,,] = ["Hello", "I" , "am", "Sarah"]; 

Εκχώρηση του υπόλοιπου πίνακα

Τι γίνεται αν θέλουμε να αντιστοιχίσουμε μέρος του πίνακα σε μεταβλητές και τα υπόλοιπα στοιχεία σε πίνακα σε μια συγκεκριμένη μεταβλητή; Σε αυτήν την περίπτωση, θα το κάναμε:

let [greeting,...intro] = ["Hello", "I" , "am", "Sarah"]; console.log(greeting);//"Hello" console.log(intro);//["I", "am", "Sarah"] 

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

Καταστροφή αποδόσεων με συναρτήσεις

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

function getArray() { return ["Hello", "I" , "am", "Sarah"]; } let [greeting,pronoun] = getArray(); console.log(greeting);//"Hello" console.log(pronoun);//"I" 

Έχουμε τα ίδια αποτελέσματα.

Χρήση προεπιλεγμένων τιμών

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

let [greeting = "hi",name = "Sarah"] = ["hello"]; console.log(greeting);//"Hello" console.log(name);//"Sarah" 

Έτσι nameεπιστρέφει στη "Σάρα" επειδή δεν ορίζεται στον πίνακα.

Ανταλλαγή τιμών με χρήση της αντιστοίχισης καταστροφής

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

let a = 3; let b = 6; [a,b] = [b,a]; console.log(a);//6 console.log(b);//3 

Στη συνέχεια, ας προχωρήσουμε στο Object Destructuring.

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

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

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

let person = {name: "Sarah", country: "Nigeria", job: "Developer"}; let name = person.name; let country = person.country; let job = person.job; console.log(name);//"Sarah" console.log(country);//"Nigeria" console.log(job);//Developer" 

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

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

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

 let person = {name: "Sarah", country: "Nigeria", job: "Developer"}; let {name, country, job} = person; console.log(name);//"Sarah" console.log(country);//"Nigeria" console.log(job);//Developer" 

Θα έχετε τα ίδια αποτελέσματα. Είναι επίσης έγκυρο να αντιστοιχίζονται μεταβλητές σε ένα αντικείμενο που δεν έχει δηλωθεί:

let {name, country, job} = {name: "Sarah", country: "Nigeria", job: "Developer"}; console.log(name);//"Sarah" console.log(country);//"Nigeria" console.log(job);//Developer" 

Οι μεταβλητές δηλώθηκαν πριν εκχωρηθούν

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

let person = {name: "Sarah", country: "Nigeria", job: "Developer"}; let name, country, job; {name, country, job} = person; console.log(name);// Error : "Unexpected tokenSarah", country: "Nigeria", job: "Developer"}; let name, country, job; ({name, country, job} = person); console.log(name);//"Sarah" console.log(job);//"Developer" 

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

Σημειώστε ότι οι μεταβλητές στο αντικείμενο στην αριστερή πλευρά θα πρέπει να έχουν το ίδιο όνομα με ένα κλειδί ιδιότητας στο αντικείμενο person. Εάν τα ονόματα είναι διαφορετικά, θα λάβουμε undefined:

let person = {name: "Sarah", country: "Nigeria", job: "Developer"}; let {name, friends, job} = person; console.log(name);//"Sarah" console.log(friends);//undefined 

Αλλά αν θέλουμε να χρησιμοποιήσουμε ένα νέο όνομα μεταβλητής, λοιπόν, μπορούμε.

Χρήση νέου μεταβλητού ονόματος

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

let person = {name: "Sarah", country: "Nigeria", job: "Developer"}; let {name: foo, job: bar} = person; console.log(foo);//"Sarah" console.log(bar);//"Developer" 

Έτσι οι τιμές που εξάγονται μεταφέρονται στις νέες μεταβλητές fooκαι bar.

Χρήση προεπιλεγμένων τιμών

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

let person = {name: "Sarah", country: "Nigeria", job: "Developer"}; let {name = "myName", friend = "Annie"} = person; console.log(name);//"Sarah" console.log(friend);//"Annie" 

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

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

let person = {name: "Sarah", country: "Nigeria", job: "Developer"}; let {name:foo = "myName", friend: bar = "Annie"} = person; console.log(foo);//"Sarah" console.log(bar);//"Annie" 

Έτσι   nameεξήχθη personκαι αποδόθηκε σε μια διαφορετική μεταβλητή. friendΑπό την άλλη πλευρά, ήταν undefinedτο person, έτσι ώστε η νέα μεταβλητή bar  ορίστηκε η προκαθορισμένη τιμή.

Υπολογισμένο όνομα ιδιοκτησίας

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

let prop = "name"; let {[prop] : foo} = {name: "Sarah", country: "Nigeria", job: "Developer"}; console.log(foo);//"Sarah" 

Συνδυασμός συστοιχιών με αντικείμενα

Οι πίνακες μπορούν επίσης να χρησιμοποιηθούν με αντικείμενα στην καταστροφή αντικειμένων:

let person = {name: "Sarah", country: "Nigeria", friends: ["Annie", "Becky"]}; let {name:foo, friends: bar} = person; console.log(foo);//"Sarah" console.log(bar);//["Annie", "Becky"] 

Φωλιά στην καταστροφή αντικειμένων

Τα αντικείμενα μπορούν επίσης να τοποθετηθούν κατά την καταστροφή:

let person = { name: "Sarah", place: { country: "Nigeria", city: "Lagos" }, friends : ["Annie", "Becky"] }; let {name:foo, place: { country : bar, city : x} } = person; console.log(foo);//"Sarah" console.log(bar);//"Nigeria" 

Ξεκουραστείτε στο Object Destructuring

The rest syntax can also be used to pick up property keys that are not already picked up by the destructuring pattern. Those keys and their values are copied into a new object:

let person = {name: "Sarah", country: "Nigeria", job: "Developer" friends: ["Annie", "Becky"]}; let {name, friends, ...others} = person; console.log(name);//"Sarah" console.log(friends);//["Annie", "Becky"] console.log(others);// {country: "Nigeria", job: "Developer"} 

Here, the remaining properties whose keys where not part of the variable names listed were assigned to the variable others. The rest syntax here is ...others. others can be renamed to whatever variable you want.

One last thing – let's see how Object Destructing can be used in functions.

Object Destructuring and Functions

Object Destructuring can be used to assign parameters to functions:

function person({name: x, job: y} = {}) { console.log(x); } person({name: "Michelle"});//"Michelle" person();//undefined person(friend);//Error : friend is not defined 

Notice the {} on the right hand side of the parameters object. It makes it possible for us to call the function without passing any arguments. That is why we got undefined. If we remove it, we'll get an error message.

Μπορούμε επίσης να εκχωρήσουμε προεπιλεγμένες τιμές στις παραμέτρους:

function person({name: x = "Sarah", job: y = "Developer"} = {}) { console.log(x); } person({name});//"Sarah" 

Μπορούμε να κάνουμε πολλά πράγματα με το Array και το Object Destructuring, όπως έχουμε δει στα παραπάνω παραδείγματα.

Ευχαριστούμε που το διαβάσατε. :)