Spread Operator

Der Spread Operator (...) ist ein elegantes Feature in modernem JavaScript. Gerade im Umgang mit Arrays entfaltet er sein volles Potenzial: Er ermöglicht es, Inhalte von Arrays unkompliziert zu kopieren, zu kombinieren oder an Funktionen zu übergeben – ohne auf manuelle Iterationen oder Methoden wie concat() zurückgreifen zu müssen.

Außerdem ermöglicht der Spread-Operator, Arrays (und andere iterierbare Objekte) zu “entpacken”, um deren Elemente in verschiedenen Kontexten zu verwenden.

Syntax

Der Spread Operator wird durch drei Punkte ... dargestellt und “entpackt” (spread) die Elemente eines Arrays in einzelne Werte.

            Syntax
        
const newArray = [...existingArray];

Beispiele und Verwendung

Kopieren von Arrays

Der Spread-Operator ist eine einfache Möglichkeit, ein Array zu kopieren, ohne auf Referenzen zu verweisen. Dies ist nützlich, wenn man ein neues Array benötigt, das unabhängig vom ursprünglichen Array ist.

            Beispiel
        
const originalArray = [1, 2, 3];
const newArray = [...originalArray];

console.log(newArray);

newArray.push(4);

console.log(originalArray);
console.log(newArray);
[ 1, 2, 3 ]
[ 1, 2, 3 ]
[ 1, 2, 3, 4 ]

Zusammenfügen von Arrays

Mit dem Spread-Operator kann man Arrays auf einfache Weise zusammenfügen, ohne auf Methoden wie concat() zurückzugreifen.

            Beispiel
        
const arrayOne = [1, 2, 3];
const arrayTwo = [3, 4, 5];
const arrayCombined = [...arrayOne, ...arrayTwo];

console.log(arrayCombined);
[ 1, 2, 3, 3, 4, 5 ]

Hinzufügen von Elementen zu Arrays

Mit Hilfe des Spread Operators lassen sich weitere Elemente zu einem Array hinzufügen.

            Beispiel
        
const arrayOne = [10, 20, 30];
const arrayNew = [5, ...arrayOne, 40, 50];

console.log(arrayNew);
[ 5, 10, 20, 30, 40, 50 ]

Kombination mit dem Rest-Operator

Der Spread Operator hilft auch mehrere Argumente in einer Variable zu verarbeiten.

            Beispiel
        
function multiply(multiplier, ...nums) {
    return nums.map(num => num * multiplier);
}

const result = multiply(2, 10, 20, 30);
console.log(result);
[ 20, 40, 60 ]

navigation Navigation