Articolo originale: ... in JavaScript – the Three Dots Operator in JS
L'operatore con tre punti in JavaScript è una delle più importanti novità dell'ES6.
Questo operatore (...) ti aiuterà a ottenere molte cose che altrimenti richiederebbero tante righe di codice, una sintassi difficile e tanto altro.
In questo breve articolo, impererai cos'è e cosa fa questo operatore. Vedremo alcuni esempi per mostrare i possibili casi di utilizzo e ci occuperemo di come usarlo per svolgere delle operazioni. In questo modo, saprai cosa ha da offrire a uno sviluppatore JavaScript.
L'operatore ha due diversi significati in JavaScript. La sintassi è davvero simile ma il contesto di utilizzo ne specifica il tipo. Nei due diversi utilizzi, l'operatore ... prende il nome di operatore spread e operatore rest.
Come usare l'operatore spread in JavaScript
In JavaScript, si utilizza l'operatore spread per espandere un iterabile all'interno di uno specifico ricevitore.
Questo contenitore potrebbe essere qualsiasi cosa: un oggetto, un array e così via. Il ricevitore potrebbe essere qualsiasi cosa su cui iterare, un array, una stringa, un oggetto ecc.
Sintassi operatore spread:
const nuovoArray = ['primoElemento', ...vecchioArray];
Guardiamo alcuni esempi su come usare l'operatore spread.
Come copiare un array con l'operatore spread
Per copiare gli elementi di un particolare array in un altro, senza modificare l'originale, sfruttiamo l'operatore spread.
Ecco un esempio:
let nomiStudenti = ["Daniel", "Jane", "Joe"];
let nomi = [...nomiStudenti];
console.log(nomi); // ["Daniel","Jane","Joe"]
Questo ci risparmia il tempo che avremmo impiegato per scrivere un loop:
let nomiStudenti = ["Daniel", "Jane", "Joe"];
let nomi = [];
nomiStudenti.map((nome) => {
nomi.push(nome);
});
console.log(nomi); // ["Daniel","Jane","Joe"]
Come copiare un oggetto con l'operatore spread
Nello stesso modo in cui abbiamo fatto per gli array, possiamo utilizzare l'operatore spread per copiare oggetto in un altro.
let utente = { nome: "John Doe", età: 10 };
let copiaUtente = { ...utente };
console.log(copiaUtente); // { nome: "John Doe", età: 10 }
Object.assign() è un modo più vecchio di ottenere lo stesso risultato:
let utente = { nome: "John Doe", età: 10 };
let copiaUtente = Object.assign({}, utente);
console.log(copiaUtente); // { nome: "John Doe", età: 10 }
Come concatenare o unire gli array usando l'operatore spread
Quando abbiamo due o più array da unire in un nuovo array, possiamo utilizzare facilmente l'operatore spread. Copiamo gli elementi da un array:
let nomiMaschili = ["Daniel", "Peter", "Joe"];
let nomiFemminili = ["Sandra", "Lucy", "Jane"];
let tuttiNomi = [...nomiMaschili, ...nomiFemminili];
console.log(tuttiNomi); // ["Daniel","Peter","Joe","Sandra","Lucy","Jane"]
È importante sapere che non conta il numero degli array, possiamo utilizzare sempre lo stesso approccio. Inoltre possiamo anche aggiungere singoli elementi nell'array.
let nomiMaschili = ["Daniel", "Peter", "Joe"];
let nomiFemminili = ["Sandra", "Lucy", "Jane"];
let altriNomi = ["Bill", "Jill"];
let piùNomi = [...altriNomi, ...nomiMaschili, ...nomiFemminili];
let nomi = [...piùNomi, "Ben", "Fred"];
Questo ci evita l'uso della sintassi complessa di un metodo come concat():
let nomiMaschili = ["Daniel", "Peter", "Joe"];
let nomiFemminili = ["Sandra", "Lucy", "Jane"];
let altriNomi = ["Bill", "Jill"];
let tuttiNomi = nomiMaschili.concat(nomiFemminili);
let piùNomi = nomiMaschili.concat(nomiFemminili, altriNomi);
Come concatenare o unire oggetti con l'operatore spread
Possiamo unire oggetti nello stesso modo in cui abbiamo fatto con gli array:
let userName = { nome: "John Doe" };
let userSex = { sesso: "Maschio" };
let user = { ...userName, ...userSex };
console.log(user); // { nome: "John Doe", sesso: "Maschio" }
Nota: in una situazione in cui una chiave ha un'altra proprietà, l'ultima sovrascriverà la precedente:
let userName = { nome: "John Doe" };
let userSex = { sesso: "Femmina", nome: "Jane Doe" };
let user = { ...userName, ...userSex }; // { nome: "Jane Doe", sesso: "Femmina" }
Come recuperare un elemento univoco con il metodo Set()
Una situazione in cui l'operatore spread risulta essere molto utile è quando cerchiamo di recuperare un valore univoco da un array per inserirlo in un altro.
Ad esempio, supponendo di avere un array contenente frutta, vogliamo evitare di avere delle ripetizioni al suo interno. Possiamo creare un nuovo array contente solo frutta non ripetuta. Usando il metodo Set() aiutato dall'operatore spread, possiamo ottenere questo risultato facilmente:
let frutta = ["Mango", "Mela", "Mango", "Banana", "Mango"];
let fruttaNoRip = [...new Set(frutta)];
console.log(fruttaNoRip); // ["Mango","Apple","Banana"]
Come passare gli elementi di un array in chiamate di funzioni con l'operatore spread
Consideriamo una funzione che accetta un numero e questi numeri come elementi di un array:
let punteggi = [12, 33, 6]
const somma = (a, b, c) => {
console.log(a + b + c);
};
Puoi usare l'operatore spread per passare gli elementi dell'array come argomenti alla funzione:
let punteggi = [12, 33, 6]
const somma = (a, b, c) => {
console.log(a + b + c);
};
somma(...punteggi); // 51
Un vecchio metodo per svolgere questa operazione è usare il metodo apply():
let punteggi = [12, 33, 6]
const somma = (a, b, c) => {
console.log(a + b + c);
};
somma.apply(null, punteggi); // 51
Come dividere stringhe in caratteri usando l'operatore spread
Consideriamo di avere una stringa. Possiamo sfruttare l'operatore spread per dividere la stringa in caratteri:
let stringa = "freeCodeCamp";
const dividiStringa = [...stringa];
console.log(dividiStringa); // ["f","r","e","e","C","o","d","e","C","a","m","p"]
È molto simile al metodo split():
let stringa = "freeCodeCamp";
const dividiStringa = stringa.split('');
console.log(dividiStringa); // ["f","r","e","e","C","o","d","e","C","a","m","p"]
Come usare l'operatore rest in JavaScritpt
L'operatore rest ti permette di unire qualsiasi numero di argomenti all'interno di un array e farci quello che vuoi. Sfrutta un array per rappresentare un infinito numero di argomenti.
Sintassi dell'operatore rest
const funzione = (primoElemento, ...resto) => {};
Consideriamo una lista di numeri. Vogliamo usare il primo numero come moltiplicatore per tutti i successivi numeri e poi aggiungere i numeri moltiplicati in un array:
const moltiplicaArg = (moltiplicatore, ...altriArg) => {
return altriArg.map((numero) => {
return numero * moltiplicatore;
});
};
let arrayMoltiplicato = moltiplicaArg(6, 5, 7, 9);
console.log(arrayMoltiplicato); // [30,42,54]
Ecco una buona rappresentazione dell'operatore rest e dei suoi valori:
const moltiplicaArg = (moltiplicatore, ...altriArg) => {
console.log(moltiplicatore); // 6
console.log(altriArg); // [5,7,9]
};
moltiplicaArg(6, 5, 7, 9);
Nota: il parametro rest deve essere l'ultimo parametro formale.
const moltiplicaArg = (moltiplicatore, ...altriArg, ultimoNumero) => {
console.log(ultimoNumero); // Uncaught SyntaxError: Rest parameter must be last formal parameter
};
moltiplicaArg(6, 5, 7, 9);
Differenze tra gli operatori spread e rest in JavaScript
A questo punto potresti essere confuso per quanto i due metodi siano simili. Le denominazioni scelte dal team di JS sono ottime perché riassumono esattamente lo scopo di ognuno.
Usiamo l'operatore spread quando vogliamo distribuire i valori di un array o di un iterabile in un altro array o oggetto.
Mentre usiamo l'operatore rest per raccogliere tutti gli elementi restanti passati a una funzione come array.
const funzione = (nome1, ...resto) => { // operatore rest
console.log(nome1);
console.log(resto);
};
let nomi = ["John", "Jane", "John", "Joe", "Joel"];
funzione(...nomi); // operatore spread
In conclusione
In questo articolo, hai imparato cosa si intende con "operatore tre punti" in JavaScript. Hai anche visto i vari casi in cui puoi utilizzarlo, insieme ai significati che assume in contesti diversi.
Divertiti!