Ein großes Lob an Brandon Morelli. Er hat es hier perfekt erklärt , aber Links können sterben, also füge ich nur den folgenden Inhalt ein:
Die Spread-Syntax besteht einfach aus drei Punkten: ...
Sie ermöglicht es einem Iterable, an Stellen zu expandieren, an denen 0+ Argumente erwartet werden. Definitionen sind ohne Kontext schwierig. Lassen Sie uns einige verschiedene Anwendungsfälle untersuchen, um zu verstehen, was dies bedeutet.
Beispiel 1 - Einfügen von Arrays
Sehen Sie sich den folgenden Code an. In diesem Code verwenden wir nicht die Spread-Syntax:
var mid = [3, 4];
var arr = [1, 2, mid, 5, 6];
console.log(arr);
Oben haben wir ein Array mit dem Namen erstellt mid. Wir erstellen dann ein zweites Array, das unser midArray enthält . Schließlich melden wir das Ergebnis ab. Was erwarten Sie arrzu drucken? Klicken Sie oben auf Ausführen, um zu sehen, was passiert. Hier ist die Ausgabe:
[1, 2, [3, 4], 5, 6]
Ist das das Ergebnis, das Sie erwartet haben? Durch das Einfügen des midArrays in das arrArray haben wir ein Array innerhalb eines Arrays erhalten. Das ist in Ordnung, wenn das das Ziel war. Aber was ist, wenn Sie nur ein einziges Array mit den Werten 1 bis 6 möchten? Um dies zu erreichen, können wir die Spread-Syntax verwenden! Denken Sie daran, dass die Spread-Syntax die Erweiterung der Elemente unseres Arrays ermöglicht. Schauen wir uns den folgenden Code an. Alles ist gleich - außer dass wir jetzt die Spread-Syntax verwenden, um das midArray in das arrArray einzufügen :
var mid = [3, 4];
var arr = [1, 2, ...mid, 5, 6];
console.log(arr);
Und wenn Sie den Run-Button drücken, ist hier das Ergebnis:
[1, 2, 3, 4, 5, 6]
Genial! Erinnern Sie sich an die Spread-Syntax-Definition, die Sie gerade oben gelesen haben? Hier kommt es ins Spiel. Wie Sie sehen können , wird das Array erweitert , wenn wir das arrArray erstellen und den Spread-Operator für das midArray verwenden, anstatt nur eingefügt zu werden mid. Diese Erweiterung bedeutet, dass jedes einzelne Element im midArray in das Array eingefügt wird arr. Anstelle von verschachtelten Arrays ist das Ergebnis ein einzelnes Array von Zahlen im Bereich von 1 bis 6.
Beispiel 2 - Mathematik
JavaScript verfügt über ein integriertes Mathematikobjekt, mit dem wir einige unterhaltsame mathematische Berechnungen durchführen können. In diesem Beispiel werden wir uns ansehen Math.max(). Wenn Sie nicht vertraut sind, wird Math.max()die größte von null oder mehr Zahlen zurückgegeben. Hier einige Beispiele:
Math.max();
// -Infinity
Math.max(1, 2, 3);
// 3
Math.max(100, 3, 4);
// 100
Wie Sie sehen können, Math.max()sind mehrere Parameter erforderlich , wenn Sie den Maximalwert mehrerer Zahlen ermitteln möchten . Sie können leider nicht einfach ein einzelnes Array als Eingabe verwenden. Vor der Spread-Syntax ist die Verwendung Math.max()in einem Array am einfachsten.apply()
var arr = [2, 4, 8, 6, 0];
function max(arr) {
return Math.max.apply(null, arr);
}
console.log(max(arr));
Es funktioniert, es ist nur wirklich nervig. Schauen Sie sich nun an, wie wir genau dasselbe mit der Spread-Syntax machen:
var arr = [2, 4, 8, 6, 0];
var max = Math.max(...arr);
console.log(max);
Anstatt eine Funktion erstellen und die Methode apply verwenden zu müssen, um das Ergebnis von zurückzugeben Math.max(), benötigen wir nur zwei Codezeilen! Die Spread-Syntax erweitert unsere Array-Elemente und gibt jedes Element in unserem Array einzeln in die Math.max()Methode ein!
Beispiel 3 - Kopieren eines Arrays
In JavaScript können Sie ein Array nicht einfach kopieren, indem Sie eine neue Variable festlegen, die dem bereits vorhandenen Array entspricht. Betrachten Sie das folgende Codebeispiel:
var arr = ['a', 'b', 'c'];
var arr2 = arr;
console.log(arr2);
Wenn Sie auf Ausführen klicken, wird die folgende Ausgabe angezeigt:
['a', 'b', 'c']
Auf den ersten Blick sieht es so aus, als hätte es funktioniert - es sieht so aus, als hätten wir die Werte von arr in arr2 kopiert. Aber das ist nicht passiert. Sie sehen, wenn Sie mit Objekten in Javascript arbeiten (Arrays sind ein Objekttyp), weisen wir sie als Referenz und nicht als Wert zu. Dies bedeutet, dass arr2 derselben Referenz wie arr zugewiesen wurde. Mit anderen Worten, alles, was wir mit arr2 tun, wirkt sich auch auf das ursprüngliche arr-Array aus (und umgekehrt). Schauen Sie unten nach:
var arr = ['a', 'b', 'c'];
var arr2 = arr;
arr2.push('d');
console.log(arr);
Oben haben wir ein neues Element d in arr2 verschoben. Wenn wir jedoch den Wert von arr abmelden, werden Sie sehen, dass der d-Wert auch zu diesem Array hinzugefügt wurde:
['a', 'b', 'c', 'd']
Kein Grund zur Angst! Wir können den Spread-Operator verwenden! Betrachten Sie den folgenden Code. Es ist fast das gleiche wie oben. Stattdessen haben wir den Spread-Operator in zwei eckigen Klammern verwendet:
var arr = ['a', 'b', 'c'];
var arr2 = [...arr];
console.log(arr2);
Wenn Sie auf "Ausführen" klicken, wird die erwartete Ausgabe angezeigt:
['a', 'b', 'c']
Oben wurden die Array-Werte in arr zu einzelnen Elementen erweitert, die dann arr2 zugewiesen wurden. Wir können jetzt das arr2-Array so oft ändern, wie wir möchten, ohne dass dies Auswirkungen auf das ursprüngliche arr-Array hat:
var arr = ['a', 'b', 'c'];
var arr2 = [...arr];
arr2.push('d');
console.log(arr);
Der Grund dafür ist wiederum, dass der Wert von arr erweitert wird, um die Klammern unserer arr2-Array-Definition zu füllen. Daher setzen wir arr2 so, dass es den einzelnen Werten von arr entspricht, anstatt wie im ersten Beispiel auf arr zu verweisen.
Bonusbeispiel - String zu Array
Als unterhaltsames letztes Beispiel können Sie die Spread-Syntax verwenden, um einen String in ein Array zu konvertieren. Verwenden Sie einfach die Spread-Syntax in eckigen Klammern:
var str = "hello";
var chars = [...str];
console.log(chars);