Introduzione
JavaScript ha un operatore ... integrato che rende più facile lavorare con un numero indefinito di elementi. A seconda del contesto, viene chiamato operatore rest oppure operatore spread.
L'operatore rest
Gli elementi rest
Quando ... compare sul lato sinistro di un'assegnazione, quei tre punti sono noti come operatore rest. I tre punti insieme a un nome di variabile formano quello che si chiama elemento rest. Raccoglie zero o più valori e li memorizza in un unico array.
const [a, b, ...everythingElse] = [0, 1, 1, 2, 3, 5, 8];
a;
// => 0
b;
// => 1
everythingElse;
// => [1, 2, 3, 5, 8]
Nota che in JavaScript, a differenza di altri linguaggi, un elemento rest non può avere una virgola finale. Deve essere l'ultimo elemento in un'assegnazione con destrutturazione. L'esempio seguente genera un SyntaxError:
const [...items, last] = [2, 4, 8, 16]
Le proprietà rest
Come per gli array, l'operatore rest può essere usato anche per raccogliere una o più proprietà di un oggetto e memorizzarle in un unico oggetto.
const { street, ...address } = {
street: 'Platz der Republik 1',
postalCode: '11011',
city: 'Berlin',
};
street;
// => 'Platz der Republik 1'
address;
// => {postalCode: '11011', city: 'Berlin'}
I parametri rest
Quando ... compare nella definizione di una funzione accanto al suo ultimo argomento, quel parametro si chiama parametro rest. Permette alla funzione di accettare un numero indefinito di argomenti sotto forma di array.
function concat(...strings) {
return strings.join(' ');
}
concat('one');
// => 'one'
concat('one', 'two', 'three');
// => 'one two three'
Lo spread
Gli elementi spread
Quando ... compare sul lato destro di un'assegnazione, è noto come operatore spread. Espande un array in un elenco di elementi. A differenza dell'elemento rest, può comparire in qualsiasi posizione in un'espressione letterale di array, e possono essercene più di uno.
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]
Le proprietà spread
Come per gli array, l'operatore spread può essere usato anche per copiare le proprietà da un oggetto a un altro.
let address = {
postalCode: '11011',
city: 'Berlin',
};
address = { ...address, country: 'Germany' };
// => {
// postalCode: '11011',
// city: 'Berlin',
// country: 'Germany',
// }
Istruzioni
Il tuo amico Linus è un macchinista che guida treni merci tra le città.
Anche se è bravissimo a guidare i treni, non se la cava altrettanto bene con la logistica o i computer.
Vorrebbe il tuo aiuto da programmatore per organizzare i dettagli dei treni e correggere gli errori nei dati delle tratte.
Per esercitarti, usa l'operatore rest o spread per risolvere ciascuno dei compiti qui sotto.
1. Crea una lista con tutti i vagoni
Il tuo amico tiene traccia dell'identificatore (ID) di ogni vagone, ma non sa mai quanti vagoni il sistema dovrà elaborare in un dato momento.
Per il resto del programma di logistica sarebbe molto più semplice avere questi dati raccolti in un unico array.
Implementa una funzione getListOfWagons che accetta un numero arbitrario di ID di vagoni, cioè gli ID di ciascun vagone.
Ogni ID sarà un numero intero positivo.
La funzione deve poi restituire gli ID ricevuti come un unico array.
getListOfWagons(1, 7, 12, 3, 14, 8, 5);
// => [1, 7, 12, 3, 14, 8, 5]
2. Sposta i primi due elementi alla fine dell'array
A questo punto, inizi a prendere confidenza con i dati e con il modo in cui vengono usati nel programma di logistica.
Il sistema di ID assegna sempre alla locomotiva l'ID 1, mentre agli altri vagoni del treno viene assegnato un ID scelto a caso maggiore di 1.
Il tuo amico ha dovuto agganciare due nuovi vagoni al treno e si è dimenticato di aggiornare il sistema!
Ora i primi due vagoni dell'array del treno devono essere spostati alla fine, altrimenti tutto sarà fuori ordine.
Linus ti sarebbe davvero grato se correggessi i suoi errori.
Implementa una funzione fixListOfWagons che accetta un array con l'id di ciascun vagone.
La funzione returna un array in cui i primi 2 elementi vengono riposizionati alla fine dell'array, così che la locomotiva possa stare in testa.
eachWagonsID = [2, 5, 1, 7, 4, 12, 6, 3, 13];
fixListOfWagons(eachWagonsID);
// => [1, 7, 4, 12, 6, 3, 13, 2, 5]
3. Aggiungi i valori mancanti
Oh-oh. Sembra che alcuni vagoni siano spariti.
Per fortuna, il tuo amico ha appena trovato un altro array che sembra contenere gli ID dei vagoni mancanti, e vorrebbe che li aggiungessi all'array principale degli ID dei vagoni.
L'unica cosa che ricorda è che i valori mancanti vanno inseriti subito dopo la locomotiva designata.
Date queste nuove informazioni, scrivi una funzione chiamata correctListOfWagons che prende come argomenti due array contenenti gli ID di ciascun vagone.
Gli ID dei vagoni del secondo array vanno aggiunti al primo array, subito dopo la locomotiva (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]
Ora che tutti i dati dei vagoni sono corretti, il tuo amico vorrebbe che aggiornassi le informazioni di instradamento del sistema.
Le informazioni di instradamento iniziali sono state costruite come un object, ed il tuo amico vorrebbe che le aggiornassi con le aggiunte fornite.
Ogni tratta richiede informazioni leggermente diverse, quindi il tuo amico preferirebbe davvero una soluzione generica.
Implementa una funzione extendRouteInformation che accetta due objects.
Il primo object contiene le città tra cui si muove la tratta del treno.
Il secondo object contiene altri dettagli dell'instradamento, come la velocità o la lunghezza del treno.
La funzione deve restituire un object consolidato con tutte le informazioni di instradamento.
La variabile moreRouteInformation può contenere proprietà diverse.
route = { from: 'Berlin', to: 'Hamburg' };
moreRouteInformation = { length: '100', speed: '50' };
extendRouteInformation(route, moreRouteInformation);
// => {from: "Berlin", to: "Hamburg", length: "100", speed: "50"}
Il tuo amico si è accorto che non ha bisogno dell'orario di arrivo nelle informazioni di instradamento.
Perciò vorrebbe che separassi l'orario di arrivo dalle informazioni di instradamento.
Implementa una funzione separateTimeOfArrival che accetta un oggetto con le informazioni di instradamento.
La funzione deve restituire un array in cui il primo elemento è l'orario di arrivo ed il secondo è un oggetto con le informazioni di instradamento senza l'orario di arrivo.
routeInformation = {
from: 'Berlin',
to: 'Hamburg',
length: '100',
timeOfArrival: '10:10',
};
separateTimeOfArrival(routeInformation);
// => ["10:10", {from: "Berlin", to: "Hamburg", length: "100"}]
Esercizio di apprendimento
