• seguici su feed rss
  • seguici su twitter
  • seguici su linkedin
  • seguici su facebook
  • cerca

SEI GIA' REGISTRATO? EFFETTUA ADESSO IL LOGIN.



ricordami per 365 giorni

HAI DIMENTICATO LA PASSWORD? CLICCA QUI

NON SEI ANCORA REGISTRATO ? CLICCA QUI E REGISTRATI !

Lo spread operator in Javascript

di :: 23 settembre 2022
Lo spread operator in Javascript

Con gli "spread operator", introdotti a partire da ECMAScript  6 (ES6),  è possibile copiare tutto o parte di un esistente array o oggetto, in un'altro array o oggetto, combinare array o oggetti, e passare ad una funzione un array come argomento.

La notazione che identifica lo spread operator sono i tre punti ...

Lo spread operator e gli array

Vediamo subito un esempio pratico di utilizzo negli array.

Abbiamo due varabili array "numbersOne" e "numbersTwo". Creiamo una nuova variabile chiamata "numbersCombined" che combina le due variabili precedenti

<script>
const numbersOne = [1, 2, 3];
const numbersTwo = [4, 5, 6];
const numbersCombined = [...numbersOne, ...numbersTwo];
console.log(numbersCombined);
</script>

Se facciamo un console.log di "numbersCombined", vedremo il nuovo array

[ 1, 2, 3, 4, 5, 6 ]

Lo spread operator è spesso utilizzato nella destrutturazione di array (ed oggetti), come in questo esempio

<script>
const numbers = [1, 2, 3, 4, 5, 6];
const [one, two, ...rest] = numbers;
console.log(rest);
</script>

Destrutturando l'array "numbers", abbiamo ottenuto la variabile "one" con valore 1, la variabile "two" con valore 2, e la variabile "rest" con valore l'array degli elementi residui.

[3, 4, 5, 6]

Vediamo un esempio di utilizzo di spread operator con una funzione

<script>
function pippo(a, b, ...args) {
	console.log(args);
}

pippo(1, 2, 3, 4, 5);
</script>

La funzione pippo riceve come parametri "a", "b",  e ... lo spread operator "args": a vale 1, b vale 2, args è un array contente 3, 4 e 5.

Il risultato del console.log sarà infatti questo

[ 3, 4, 5 ]

In questo ulteriore esempio vediamo come usare lo spread operator per inserire un array in un altro array

<script>
let x = ['A', 'B'];
let y = [...x, 'C', 'D'];
console.log(chars);
</script>

Il risultato sarà questo array

["A", "B", "C", "D"]

Infine vediamo come usare lo spread operator per copiare un array in un nuovo array

<script>
var punteggio = [50, 60, 70];
var copiapunteggio = [...punteggio ];
console.log(copiapunteggio); 
</script>

Il risultato sarà una variabile "copiapunteggio" che contiene lo stesso valore della variabile "punteggio"

[50, 60, 70]

Lo spread operator e gli oggetti

Così come è possibile combinare due array, e possibile combinare due oggetti, come nel seguente esempio

<script>
const myCar = {
  marca: 'Fiat',
  modello: 'Musa',
  colore: 'nero'
}

const updateCar = {
  anno: 2002, 
  colore: 'giallo'
}

const myUpdatedCar = {...myCar , ...updateCar}
console.log(myUpdatedCar);
</script>

Nella console vedremo il nuovo oggetto myUpdatedCar che non è altro che la combinazione dei due oggetti "myCar" e "updateCar"

{marca: "Lancia", modello: "Musa", anno: 2002, colore: "giallo"}

Come puoi vedere, le proprietà dell'oggetto che hanno la stessa chiave (nel nostro esempio il "colore") vengono inserite una sola volta nel nuovo oggetto, con il valore dell'ultima proprietà considerata: ecco perchè nel nostro caso il colore è "giallo".

Vediamo un altro esempio in cui andiamo ad "inserire" un oggetto in un'altro

<script>
const persona = {nome:"paolo", cognome:"rossi"};
const persona2 = {... persona, citta:"vicenza"}
console.log(persona2);
</script>

La variabile "persona2" avrà questo valore

{ nome: "paolo", cognome: "rossi", citta: "vicenza" }

E con questo esempio concludiamo la lezione dededicata allo spread operator.

 
 
 
 
pay per script

Hai bisogno di uno script PHP personalizzato, di una particolare configurazione su Linux, di una gestione dei tuoi server Linux, o di una consulenza per il tuo progetto?

x

ATTENZIONE