Rest και spread σε

Σχετικά με την έννοια Rest και spread

Η JavaScript έχει έναν ενσωματωμένο τελεστή ... που κάνει ευκολότερη την εργασία με αόριστο αριθμό στοιχείων. Ανάλογα με τα συμφραζόμενα, ονομάζεται είτε τελεστής rest είτε τελεστής spread.

Τελεστής rest

Στοιχεία rest

Όταν το ... εμφανίζεται στην αριστερή πλευρά μιας ανάθεσης, αυτές οι τρεις τελείες είναι γνωστές ως τελεστής 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

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

const { street, ...address } = {
  street: 'Platz der Republik 1',
  postalCode: '11011',
  city: 'Berlin',
};

street;
// => 'Platz der Republik 1'

address;
// => {postalCode: '11011', city: 'Berlin'}

Παράμετροι rest

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

function concat(...strings) {
  return strings.join(' ');
}

concat('one');
// => 'one'

concat('one', 'two', 'three');
// => 'one two three'

Spread

Στοιχεία spread

Όταν το ... εμφανίζεται στη δεξιά πλευρά μιας ανάθεσης, είναι γνωστό ως τελεστής 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

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

let address = {
  postalCode: '11011',
  city: 'Berlin',
};

address = { ...address, country: 'Germany' };
// => {
//   postalCode: '11011',
//   city: 'Berlin',
//   country: 'Germany',
// }