In deze zelfstudie leert u met behulp van voorbeelden over de JavaScript-spreadoperator.
De spread-operator is een nieuwe toevoeging aan de functies die beschikbaar zijn in de JavaScript ES6- versie.
Verspreid operator
De spread-operator … wordt gebruikt om een iterabele of een array uit te breiden of te verspreiden. Bijvoorbeeld,
const arrValue = ('My', 'name', 'is', 'Jack'); console.log(arrValue); // ("My", "name", "is", "Jack") console.log(… arrValue); // My name is Jack
In dit geval is de code:
console.log(… arrValue)
is gelijk aan:
console.log('My', 'name', 'is', 'Jack');
Array kopiëren met de Spread Operator
U kunt ook de spread-syntaxis gebruiken … om de items naar een enkele array te kopiëren. Bijvoorbeeld,
const arr1 = ('one', 'two'); const arr2 = (… arr1, 'three', 'four', 'five'); console.log(arr2); // Output: // ("one", "two", "three", "four", "five")
Clone Array met Spread Operator
In JavaScript worden objecten toegewezen door middel van verwijzing en niet door waarden. Bijvoorbeeld,
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)
Hier verwijzen beide variabelen arr1 en arr2 naar dezelfde array. Vandaar dat de verandering in één variabele resulteert in de verandering in beide variabelen.
Als u echter arrays wilt kopiëren zodat ze niet naar dezelfde array verwijzen, kunt u de spread-operator gebruiken. Op deze manier wordt de verandering in de ene array niet weerspiegeld in de andere. Bijvoorbeeld,
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)
Verspreid operator met object
U kunt de spreidoperator ook gebruiken met letterlijke objecten. Bijvoorbeeld,
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)
Hier worden beide obj1en obj2eigenschappen toegevoegd aan het obj3gebruik van de spread-operator.
Rust Parameter
Wanneer de spread-operator als parameter wordt gebruikt, staat deze bekend als de rest-parameter.
U kunt ook meerdere argumenten in een functieaanroep accepteren met de parameter rest. Bijvoorbeeld,
let func = function(… args) ( console.log(args); ) func(3); // (3) func(4, 5, 6); // (4, 5, 6)
Hier,
- Wanneer een enkel argument wordt doorgegeven aan de
func()functie, heeft de parameter rest slechts één parameter. - Als er drie argumenten zijn doorgegeven, neemt de parameter rest alle drie de parameters over.
Opmerking : als u de parameter rest gebruikt, worden de argumenten als matrixelementen doorgegeven.
U kunt ook meerdere argumenten aan een functie doorgeven met de spreidoperator. Bijvoorbeeld,
function sum(x, y ,z) ( console.log(x + y + z); ) const num1 = (1, 3, 4, 5); sum(… num1); // 8
Als u meerdere argumenten doorgeeft met de spreidoperator, neemt de functie de vereiste argumenten en negeert de rest.
Opmerking : de Spread-operator is geïntroduceerd in ES6 . Sommige browsers ondersteunen het gebruik van spread-syntaxis mogelijk niet. Bezoek JavaScript Spread Operator-ondersteuning voor meer informatie.
