In questo tutorial imparerai a conoscere l'operatore di diffusione JavaScript con l'aiuto di esempi.
L'operatore spread è una nuova aggiunta alle funzionalità disponibili nella versione JavaScript ES6 .
Operatore Spread
L'operatore spread … viene utilizzato per espandere o diffondere un iterabile o un array. Per esempio,
const arrValue = ('My', 'name', 'is', 'Jack'); console.log(arrValue); // ("My", "name", "is", "Jack") console.log(… arrValue); // My name is Jack
In questo caso, il codice:
console.log(… arrValue)
è equivalente a:
console.log('My', 'name', 'is', 'Jack');
Copy Array Using Spread Operator
È inoltre possibile utilizzare la sintassi di diffusione … per copiare gli elementi in un singolo array. Per esempio,
const arr1 = ('one', 'two'); const arr2 = (… arr1, 'three', 'four', 'five'); console.log(arr2); // Output: // ("one", "two", "three", "four", "five")
Clone array utilizzando l'operatore di diffusione
In JavaScript, gli oggetti vengono assegnati per riferimento e non per valori. Per esempio,
let arr1 = ( 1, 2, 3); let arr2 = arr1; console.log(arr1); // (1, 2, 3) console.log(arr2); // (1, 2, 3) // append an item to the array arr1.push(4); console.log(arr1); // (1, 2, 3, 4) console.log(arr2); // (1, 2, 3, 4)
In questo caso, entrambe le variabili arr1 e arr2 si riferiscono allo stesso array. Quindi il cambiamento in una variabile risulta nel cambiamento in entrambe le variabili.
Tuttavia, se si desidera copiare array in modo che non facciano riferimento allo stesso array, è possibile utilizzare l'operatore spread. In questo modo, il cambiamento in un array non si riflette nell'altro. Per esempio,
let arr1 = ( 1, 2, 3); // copy using spread syntax let arr2 = (… arr1); console.log(arr1); // (1, 2, 3) console.log(arr2); // (1, 2, 3) // append an item to the array arr1.push(4); console.log(arr1); // (1, 2, 3, 4) console.log(arr2); // (1, 2, 3)
Operatore di diffusione con oggetto
È inoltre possibile utilizzare l'operatore di diffusione con i letterali oggetto. Per esempio,
const obj1 = ( x : 1, y : 2 ); const obj2 = ( z : 3 ); // add members obj1 and obj2 to obj3 const obj3 = (… obj1,… obj2); console.log(obj3); // (x: 1, y: 2, z: 3)
Qui, entrambe le proprietà obj1e obj2vengono aggiunte obj3utilizzando l'operatore di diffusione.
Parametro di riposo
Quando l'operatore spread viene utilizzato come parametro, è noto come parametro rest.
È inoltre possibile accettare più argomenti in una chiamata di funzione utilizzando il parametro rest. Per esempio,
let func = function(… args) ( console.log(args); ) func(3); // (3) func(4, 5, 6); // (4, 5, 6)
Qui,
- Quando un singolo argomento viene passato alla
func()funzione, il parametro rest accetta solo un parametro. - Quando vengono passati tre argomenti, il parametro rest accetta tutti e tre i parametri.
Nota : l'utilizzo del parametro rest passerà gli argomenti come elementi dell'array.
È inoltre possibile passare più argomenti a una funzione utilizzando l'operatore spread. Per esempio,
function sum(x, y ,z) ( console.log(x + y + z); ) const num1 = (1, 3, 4, 5); sum(… num1); // 8
Se si passano più argomenti utilizzando l'operatore spread, la funzione accetta gli argomenti richiesti e ignora il resto.
Nota : l'operatore Spread è stato introdotto in ES6 . Alcuni browser potrebbero non supportare l'uso della sintassi diffusa. Visita il supporto di JavaScript Spread Operator per saperne di più.
