Σε αυτό το σεμινάριο, θα μάθετε σχετικά με την ανάθεση καταστροφής JavaScript με τη βοήθεια παραδειγμάτων.
Καταστροφή JavaScript
Η καταστρεπτική εκχώρηση που εισήχθη στο ES6 διευκολύνει την εκχώρηση τιμών συστοιχιών και ιδιοτήτων αντικειμένου σε διακριτές μεταβλητές. Για παράδειγμα,
Πριν από το ES6:
// assigning object attributes to variables const person = ( name: 'Sara', age: 25, gender: 'female' ) let name = person.name; let age = person.age; let gender = person.gender; console.log(name); // Sara console.log(age); // 25 console.log(gender); // female
Από το ES6:
// assigning object attributes to variables const person = ( name: 'Sara', age: 25, gender: 'female' ) // destructuring assignment let ( name, age, gender ) = person; console.log(name); // Sara console.log(age); // 25 console.log(gender); // female
Σημείωση : Η σειρά του ονόματος δεν έχει σημασία στην καταστροφή αντικειμένων.
Για παράδειγμα, μπορείτε να γράψετε το παραπάνω πρόγραμμα ως:
let ( age, gender, name ) = person; console.log(name); // Sara
Σημείωση : Κατά την καταστροφή αντικειμένων, πρέπει να χρησιμοποιήσετε το ίδιο όνομα για τη μεταβλητή με το αντίστοιχο κλειδί αντικειμένου.
Για παράδειγμα,
let (name1, age, gender) = person; console.log(name1); // undefined
Εάν θέλετε να εκχωρήσετε διαφορετικά ονόματα μεταβλητών για το κλειδί αντικειμένου, μπορείτε να χρησιμοποιήσετε:
const person = ( name: 'Sara', age: 25, gender: 'female' ) // destructuring assignment // using different variable names let ( name: name1, age: age1, gender:gender1 ) = person; console.log(name1); // Sara console.log(age1); // 25 console.log(gender1); // female
Καταστροφή της σειράς
Μπορείτε επίσης να εκτελέσετε καταστροφές πίνακα με παρόμοιο τρόπο. Για παράδειγμα,
const arrValue = ('one', 'two', 'three'); // destructuring assignment in arrays const (x, y, z) = arrValue; console.log(x); // one console.log(y); // two console.log(z); // three
Εκχώρηση προεπιλεγμένων τιμών
Μπορείτε να αντιστοιχίσετε τις προεπιλεγμένες τιμές για μεταβλητές κατά τη χρήση του destructuring. Για παράδειγμα,
let arrValue = (10); // assigning default value 5 and 7 let (x = 5, y = 7) = arrValue; console.log(x); // 10 console.log(y); // 7
Στο παραπάνω πρόγραμμα, το arrValue έχει μόνο ένα στοιχείο. Ως εκ τούτου,
- η μεταβλητή x θα είναι 10
- η μεταβλητή y παίρνει την προεπιλεγμένη τιμή 7
Κατά την καταστροφή αντικειμένων, μπορείτε να μεταβιβάσετε τις προεπιλεγμένες τιμές με παρόμοιο τρόπο. Για παράδειγμα,
const person = ( name: 'Jack', ) // assign default value 26 to age if undefined const ( name, age = 26) = person; console.log(name); // Jack console.log(age); // 26
Ανταλλαγή μεταβλητών
Σε αυτό το παράδειγμα, δύο μεταβλητές ανταλλάσσονται χρησιμοποιώντας τη σύνταξη αντιστοίχισης καταστροφής.
// program to swap variables let x = 4; let y = 7; // swapping variables (x, y) = (y, x); console.log(x); // 7 console.log(y); // 4
Παράλειψη στοιχείων
Μπορείτε να παραλείψετε ανεπιθύμητα στοιχεία σε έναν πίνακα χωρίς να τα αντιστοιχίσετε σε τοπικές μεταβλητές. Για παράδειγμα,
const arrValue = ('one', 'two', 'three'); // destructuring assignment in arrays const (x, , z) = arrValue; console.log(x); // one console.log(z); // three
Στο παραπάνω πρόγραμμα, το δεύτερο στοιχείο παραλείπεται χρησιμοποιώντας το διαχωριστικό κόμμα ,.
Εκχώρηση στοιχείων που απομένουν σε μία μεμονωμένη μεταβλητή
Μπορείτε να αντιστοιχίσετε τα υπόλοιπα στοιχεία ενός πίνακα σε μια μεταβλητή χρησιμοποιώντας τη σύνταξη spread … . Για παράδειγμα,
const arrValue = ('one', 'two', 'three', 'four'); // destructuring assignment in arrays // assigning remaining elements to y const (x,… y) = arrValue; console.log(x); // one console.log(y); // ("two", "three", "four")
Εδώ, oneεκχωρείται στη μεταβλητή x. Και τα υπόλοιπα στοιχεία του πίνακα αντιστοιχίζονται σε μεταβλητή y.
Μπορείτε επίσης να αντιστοιχίσετε τις υπόλοιπες ιδιότητες του αντικειμένου σε μία μόνο μεταβλητή. Για παράδειγμα,
const person = ( name: 'Sara', age: 25, gender: 'female' ) // destructuring assignment // assigning remaining properties to rest let ( name,… rest ) = person; console.log(name); // Sara console.log(rest); // (age: 25, gender: "female")
Σημείωση : Η μεταβλητή με τη σύνταξη spread δεν μπορεί να έχει τελικό κόμμα ,. Θα πρέπει να χρησιμοποιήσετε αυτό το στοιχείο ανάπαυσης (μεταβλητή με σύνταξη spread) ως την τελευταία μεταβλητή.
Για παράδειγμα,
const arrValue = ('one', 'two', 'three', 'four'); // throws an error const (… x, y) = arrValue; console.log(x); // eror
Αντιστοίχιση Nested Destructuring
Μπορείτε να εκτελέσετε ένθετη καταστροφή για στοιχεία πίνακα. Για παράδειγμα,
// nested array elements const arrValue = ('one', ('two', 'three')); // nested destructuring assignment in arrays const (x, (y, z)) = arrValue; console.log(x); // one console.log(y); // two console.log(z); // three
Εδώ, στη μεταβλητή y και z εκχωρούνται ένθετα στοιχεία twoκαι three.
Για να εκτελέσετε την ένθετη αντιστοίχιση καταστροφής, πρέπει να περικλείσετε τις μεταβλητές σε μια δομή πίνακα (περικλείοντας εσωτερικά ()).
Μπορείτε επίσης να εκτελέσετε ένθετη καταστροφή για ιδιότητες αντικειμένου. Για παράδειγμα,
const person = ( name: 'Jack', age: 26, hobbies: ( read: true, playGame: true ) ) // nested destructuring const (name, hobbies: (read, playGame)) = person; console.log(name); // Jack console.log(read); // true console.log(playGame); // true
Για να εκτελέσετε την ένθεση εντοπισμού καταστροφής για αντικείμενα, πρέπει να περικλείσετε τις μεταβλητές σε μια δομή αντικειμένων (περικλείοντας μέσα ()).
Σημείωση : Η δυνατότητα ανάθεσης καταστροφής εισήχθη στο ES6 . Ορισμένα προγράμματα περιήγησης ενδέχεται να μην υποστηρίζουν τη χρήση της καταστροφής. Επισκεφτείτε την υποστήριξη Javascript Destructuring για να μάθετε περισσότερα.
