DESTRUCTURING, SPREAD OPERATOR & REST OPERATOR

Was ist Destructuring?

Die destrukturierende Zuweisungssyntax ist ein JavaScript-Ausdruck, der es ermöglicht, Werte aus Arrays oder Eigenschaften aus Objekten in unterschiedliche Variablen zu destrukturieren bzw. zu entpacken.

1. Destructing

Das Destructing " ("Zerstören") eines Objekts oder Arrays bedeutet nicht, dass wir es aus dem Programm löschen und nie wieder verwenden können. Es ist eher so, dass wir einen bestimmten Teil davon erhalten. Das Destrukturieren extrahiert einfach die Array-Elemente oder Objekteigenschaften und speichert sie in Variablen. Beim Destrukturieren des Arrays wird der Wert des Index gemäß der Indexierung mit dem Key zurückgegeben.
Aber es gibt noch einen anderen Nutzen der destruktiven Zuweisungen: Das "Spreading" und das "Rest Pattern". Dies gibt uns die Möglichkeit, die verbleibenden unzerstörten Eigenschaften/Indizes in eine neue Variable zu übernehmen.

2.The Spread Operator(...)

Der Spread-Operator wird verwendet, um Array-Elemente oder Objekteigenschaften aufzuteilen. Es führt eine "deep copy" der Array-Elemente oder des Objektes durch, sodass die ursprünglichen Werte nicht beeinflusst werden. Achtung: Die "deep copy" gilt nur für eine Leveltiefe - z.B. nicht bei Objekten innerhalb eines Objekts. Denn dort werden die "nested objects" wieder als Referenz-Typ übertragen. Um eine vollständige "deep copy" (inkl. nested objects) durchzuführen, muss JSON.parse/stringify. "JSON.parse(JSON.stringify(object))" durchgeführt werden. Alternativ können auch Libraries verwendet werden.

Um es zu vereinfachen, veranschaulichen wir das Array einmal für uns als eine Kiste. Der Spread-Operator ermöglicht es uns, den gesamten Inhalt der Kiste zu greifen, ohne die Kiste selbst zu greifen und diesen Inhalt an einer beliebigen Stelle zu platzieren. Der Spread-Operator kann also verwendet werden, um den Inhalt eines Arrays oder mehrerer Arrays in ein anderes Array zu kopieren.

Beispiel

let arr= [1,2,3]
let new= [...arr,4,5,6]
console.log(new) /// [1,2,3,4,5,6]

oder:

Beispiele

const combined= [...first, ...second]
const combined =[...first, "a", ...second, "b"];
const copy = combined.slice() ist das Gleiche wie const copy = [...combined]

3. The Rest Operator (...)

Der Rest Operator ist das Gegenteil vom Spread-Operator. Denn im Gegensatz zum Spread-Operator, der die Elemente in einem Array verteilt, ist es beim Rest-Operator (auch Gather-Operator genannt) so, dass er mehrere Elemente in einem Array gruppiert/sammelt. Der Rest-Operator wird in einer Funktion immer dann verwendet, wenn mehrere Arguments erwartet werden.

Beispiel

function multiply(multiplier, ...theArgs){
return theArgs.map(function(element){
return multiplier * element;
});
}

var arr = multiply (2,1,2,3)
console.log(arr)

Result:

(Erläuterung: 2x1 = 2 , 2x2 = 4, 2x3 = 6)