In diesem Tutorial lernen Sie anhand von Beispielen den JavaScript-Spread-Operator kennen.
Der Spread-Operator ist eine neue Ergänzung zu den Funktionen der JavaScript ES6- Version.
Spread Operator
Der Spread-Operator … wird verwendet, um ein iterables oder ein Array zu erweitern oder zu verbreiten. Beispielsweise,
const arrValue = ('My', 'name', 'is', 'Jack'); console.log(arrValue); // ("My", "name", "is", "Jack") console.log(… arrValue); // My name is Jack
In diesem Fall lautet der Code:
console.log(… arrValue)
ist äquivalent zu:
console.log('My', 'name', 'is', 'Jack');
Array mit Spread Operator kopieren
Sie können auch die Spread-Syntax verwenden, … um die Elemente in ein einzelnes Array zu kopieren. Beispielsweise,
const arr1 = ('one', 'two'); const arr2 = (… arr1, 'three', 'four', 'five'); console.log(arr2); // Output: // ("one", "two", "three", "four", "five")
Klonen Sie das Array mit dem Spread-Operator
In JavaScript werden Objekte durch Referenz und nicht durch Werte zugewiesen. Beispielsweise,
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 beziehen sich beide Variablen arr1 und arr2 auf dasselbe Array. Daher führt die Änderung einer Variablen zur Änderung beider Variablen.
Wenn Sie jedoch Arrays kopieren möchten, damit sie nicht auf dasselbe Array verweisen, können Sie den Spread-Operator verwenden. Auf diese Weise spiegelt sich die Änderung in einem Array nicht im anderen wider. Beispielsweise,
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)
Spread Operator mit Objekt
Sie können den Spread-Operator auch mit Objektliteralen verwenden. Beispielsweise,
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 werden beide obj1und obj2Eigenschaften obj3mithilfe des Spread-Operators hinzugefügt .
Ruheparameter
Wenn der Spread-Operator als Parameter verwendet wird, wird er als Rest-Parameter bezeichnet.
Sie können mit dem Parameter rest auch mehrere Argumente in einem Funktionsaufruf akzeptieren. Beispielsweise,
let func = function(… args) ( console.log(args); ) func(3); // (3) func(4, 5, 6); // (4, 5, 6)
Hier,
- Wenn ein einzelnes Argument an die
func()Funktion übergeben wird, akzeptiert der Rest-Parameter nur einen Parameter. - Wenn drei Argumente übergeben werden, übernimmt der Rest-Parameter alle drei Parameter.
Hinweis : Wenn Sie den Parameter rest verwenden, werden die Argumente als Array-Elemente übergeben.
Sie können mit dem Spread-Operator auch mehrere Argumente an eine Funktion übergeben. Beispielsweise,
function sum(x, y ,z) ( console.log(x + y + z); ) const num1 = (1, 3, 4, 5); sum(… num1); // 8
Wenn Sie mit dem Spread-Operator mehrere Argumente übergeben, übernimmt die Funktion die erforderlichen Argumente und ignoriert den Rest.
Hinweis : Der Spread-Operator wurde in ES6 eingeführt . Einige Browser unterstützen möglicherweise nicht die Verwendung der Spread-Syntax. Weitere Informationen finden Sie im JavaScript Spread Operator-Support.
