Η JavaScript έχει έναν ενσωματωμένο τελεστή ... που κάνει ευκολότερη την εργασία με αόριστο αριθμό στοιχείων. Ανάλογα με τα συμφραζόμενα, ονομάζεται είτε τελεστής rest είτε τελεστής spread.
Όταν το ... εμφανίζεται στην αριστερή πλευρά μιας ανάθεσης, αυτές οι τρεις τελείες είναι γνωστές ως ο τελεστής rest. Οι τρεις τελείες μαζί με ένα όνομα μεταβλητής ονομάζονται στοιχείο rest. Συλλέγει μηδέν ή περισσότερες τιμές και τις αποθηκεύει σε έναν μόνο πίνακα.
const [a, b, ...everythingElse] = [0, 1, 1, 2, 3, 5, 8];
a;
// => 0
b;
// => 1
everythingElse;
// => [1, 2, 3, 5, 8]
Σημείωσε ότι στη JavaScript, σε αντίθεση με ορισμένες άλλες γλώσσες, ένα στοιχείο rest δεν μπορεί να έχει κόμμα στο τέλος. Πρέπει να είναι το τελευταίο στοιχείο σε μια ανάθεση αποδόμησης. Το παρακάτω παράδειγμα πετάει ένα SyntaxError:
const [...items, last] = [2, 4, 8, 16]
Όπως και με τους πίνακες, ο τελεστής rest μπορεί επίσης να χρησιμοποιηθεί για να συλλέξει μία ή περισσότερες ιδιότητες αντικειμένου και να τις αποθηκεύσει σε ένα μόνο αντικείμενο.
const { street, ...address } = {
street: 'Platz der Republik 1',
postalCode: '11011',
city: 'Berlin',
};
street;
// => 'Platz der Republik 1'
address;
// => {postalCode: '11011', city: 'Berlin'}
Όταν το ... εμφανίζεται σε έναν ορισμό συνάρτησης δίπλα στο τελευταίο όρισμά της, αυτή η παράμετρος ονομάζεται παράμετρος rest. Επιτρέπει στη συνάρτηση να δεχτεί αόριστο αριθμό ορισμάτων ως πίνακα.
function concat(...strings) {
return strings.join(' ');
}
concat('one');
// => 'one'
concat('one', 'two', 'three');
// => 'one two three'
Όταν το ... εμφανίζεται στη δεξιά πλευρά μιας ανάθεσης, είναι γνωστό ως ο τελεστής spread. Επεκτείνει έναν πίνακα σε μια λίστα στοιχείων. Σε αντίθεση με το στοιχείο rest, μπορεί να εμφανιστεί οπουδήποτε μέσα σε μια έκφραση κυριολεκτικού πίνακα και μπορεί να υπάρχει περισσότερο από ένα.
const oneToFive = [1, 2, 3, 4, 5];
const oneToTen = [...oneToFive, 6, 7, 8, 9, 10];
oneToTen;
// => [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
const woow = ['A', ...oneToFive, 'B', 'C', 'D', 'E', ...oneToFive, 42];
woow;
// => ["A", 1, 2, 3, 4, 5, "B", "C", "D", "E", 1, 2, 3, 4, 5, 42]
Όπως και με τους πίνακες, ο τελεστής spread μπορεί επίσης να χρησιμοποιηθεί για να αντιγράψει ιδιότητες από ένα αντικείμενο σε ένα άλλο.
let address = {
postalCode: '11011',
city: 'Berlin',
};
address = { ...address, country: 'Germany' };
// => {
// postalCode: '11011',
// city: 'Berlin',
// country: 'Germany',
// }
Ο φίλος σου ο Linus είναι μηχανοδηγός και οδηγεί εμπορευματικά τρένα ανάμεσα σε πόλεις. Αν και είναι καταπληκτικός στο χειρισμό των τρένων, δεν τα καταφέρνει εξίσου καλά με τα logistics ή τους υπολογιστές. Θα ήθελε να ζητήσει τη βοήθειά σου στον προγραμματισμό για να οργανώσει τις λεπτομέρειες των τρένων και να διορθώσει λάθη στα δεδομένα των διαδρομών.
Για εξάσκηση, χρησιμοποίησε τον τελεστή rest ή spread για να λύσεις καθεμία από τις παρακάτω εργασίες.
Ο φίλος σου παρακολουθεί το αναγνωριστικό κάθε βαγονιού (ID), αλλά ποτέ δεν είναι σίγουρος πόσα βαγόνια θα χρειαστεί να επεξεργαστεί το σύστημα σε κάθε δεδομένη στιγμή.
Θα ήταν πολύ πιο εύκολο για το υπόλοιπο πρόγραμμα logistics να έχει αυτά τα δεδομένα συσκευασμένα σε έναν ενοποιημένο array.
Υλοποίησε μια συνάρτηση getListOfWagons που δέχεται έναν αυθαίρετο αριθμό αναγνωριστικών βαγονιών, τα οποία είναι τα ID κάθε βαγονιού.
Κάθε ID θα είναι ένας θετικός ακέραιος.
Στη συνέχεια, η συνάρτηση θα πρέπει να επιστρέφει τα αναγνωριστικά που δόθηκαν ως έναν μοναδικό array.
getListOfWagons(1, 7, 12, 3, 14, 8, 5);
// => [1, 7, 12, 3, 14, 8, 5]
Σε αυτό το σημείο, αρχίζεις να καταλαβαίνεις τα δεδομένα και το πώς χρησιμοποιούνται στο πρόγραμμα logistics. Το σύστημα ID αναθέτει πάντα στη μηχανή ID 1, ενώ στα υπόλοιπα βαγόνια του τρένου αναθέτει ένα τυχαία επιλεγμένο ID μεγαλύτερο από 1.
Ο φίλος σου έπρεπε να συνδέσει δύο νέα βαγόνια στο τρένο και ξέχασε να ενημερώσει το σύστημα!
Τώρα, τα δύο πρώτα βαγόνια στον array του τρένου πρέπει να μετακινηθούν στο τέλος, αλλιώς όλα θα είναι σε λάθος σειρά.
Ο Linus θα σου ήταν πολύ ευγνώμων που διόρθωσες τα λάθη του.
Υλοποίησε μια συνάρτηση fixListOfWagons που δέχεται έναν πίνακα με το ID κάθε βαγονιού.
Κάνει return έναν array όπου τα 2 πρώτα στοιχεία έχουν μετακινηθεί στο τέλος του array, ώστε η μηχανή να βρίσκεται μπροστά.
eachWagonsID = [2, 5, 1, 7, 4, 12, 6, 3, 13];
fixListOfWagons(eachWagonsID);
// => [1, 7, 4, 12, 6, 3, 13, 2, 5]
Ωχ. Φαίνεται ότι μερικά βαγόνια έχουν χαθεί.
Ευτυχώς, ο φίλος σου μόλις βρήκε έναν άλλο array που φαίνεται να περιέχει τα ID των βαγονιών που λείπουν, και θα ήθελε να τα προσθέσεις στον βασικό array με τα ID των βαγονιών.
Το μόνο που θυμάται είναι ότι οι τιμές που λείπουν πρέπει να τοποθετηθούν αμέσως μετά την καθορισμένη μηχανή.
Δεδομένων αυτών των νέων πληροφοριών, γράψε μια συνάρτηση με όνομα correctListOfWagons που δέχεται ως ορίσματα δύο πίνακες με τα ID κάθε βαγονιού.
Τα ID των βαγονιών του δεύτερου array πρέπει να προστεθούν στον πρώτο array αμέσως μετά τη μηχανή (ID 1).
eachWagonsID = [1, 5, 20, 7, 4, 8];
missingWagons = [3, 17, 6, 15];
correctListOfWagons(eachWagonsID, missingWagons);
// => [1, 3, 17, 6, 15, 5, 20, 7, 4, 8]
Τώρα που όλα τα δεδομένα των βαγονιών είναι σωστά, ο φίλος σου θα ήθελε να ενημερώσεις τις πληροφορίες δρομολόγησης του συστήματος.
Οι αρχικές πληροφορίες δρομολόγησης έχουν κατασκευαστεί ως object, και ο φίλος σου θα ήθελε να τις ενημερώσεις με τις προσθήκες που δίνονται.
Κάθε διαδρομή απαιτεί ελαφρώς διαφορετικές πληροφορίες, οπότε ο φίλος σου θα προτιμούσε πραγματικά μια γενική λύση.
Υλοποίησε μια συνάρτηση extendRouteInformation που δέχεται δύο objects.
Το πρώτο object περιέχει ανάμεσα σε ποιες πόλεις κινείται η διαδρομή του τρένου.
Το δεύτερο object περιέχει άλλες λεπτομέρειες δρομολόγησης, όπως την ταχύτητα ή το μήκος του τρένου.
Η συνάρτηση θα πρέπει να επιστρέφει ένα ενοποιημένο object με όλες τις πληροφορίες δρομολόγησης.
Η μεταβλητή moreRouteInformation μπορεί να περιέχει διαφορετικές ιδιότητες.
route = { from: 'Berlin', to: 'Hamburg' };
moreRouteInformation = { length: '100', speed: '50' };
extendRouteInformation(route, moreRouteInformation);
// => {from: "Berlin", to: "Hamburg", length: "100", speed: "50"}
Ο φίλος σου παρατήρησε ότι δε χρειάζεται την ώρα άφιξης στις πληροφορίες δρομολόγησης. Γι' αυτό, ο φίλος σου θα ήθελε να διαχωρίσεις την ώρα άφιξης από τις πληροφορίες δρομολόγησης.
Υλοποίησε μια συνάρτηση separateTimeOfArrival που δέχεται ένα αντικείμενο με τις πληροφορίες δρομολόγησης.
Η συνάρτηση θα πρέπει να επιστρέφει έναν πίνακα όπου το πρώτο στοιχείο του πίνακα είναι η ώρα άφιξης και το δεύτερο στοιχείο είναι ένα αντικείμενο με τις πληροφορίες δρομολόγησης χωρίς την ώρα άφιξης.
routeInformation = {
from: 'Berlin',
to: 'Hamburg',
length: '100',
timeOfArrival: '10:10',
};
separateTimeOfArrival(routeInformation);
// => ["10:10", {from: "Berlin", to: "Hamburg", length: "100"}]
Γράψου στο Exercism για να μάθεις και να κατακτήσεις JavaScript με 37 έννοιες159 ασκήσεις και πραγματική καθοδήγηση από ανθρώπους, όλα δωρεάν.