Detaillierte Erklärung des Unterschieds zwischen dem JavaScript-Spread-Operator und dem Rest-Operator

JavaScript verwendet das Symbol mit den drei Punkten (...) als Restoperator und Spread-Operator, aber es gibt einen Unterschied zwischen diesen beiden Operatoren.

Der Hauptunterschied besteht darin, dass der Restoperator den Rest eines vom Benutzer eingegebenen Werts in ein JavaScript-Array einfügt, während der Spreadoperator das iterierbare Objekt in ein einzelnes Element erweitert.

Der folgende Code verwendet beispielsweise den Restoperator, um Teilwerte in einem Array zu speichern:

// Verwenden Sie rest, um den Rest der vom Benutzer bereitgestellten Werte in ein Array einzuschließen:
Funktion meineBio(Vorname, Nachname, ...andereInfo) { 
 andereInformationen zurückgeben;
}

// Rufen Sie die Funktion myBio auf und übergeben Sie dabei fünf Argumente an ihre Parameter:
myBio("Oluwatobi", "Sofela", "CodeSweetly", "Webentwickler", "Männlich");

// Der obige Aufruf gibt zurück:
["CodeSweetly", "Webentwickler", "Männlich"]

Sehen Sie sich die Laufergebnisse an

Im obigen Code verwenden wir ...otherInfo, um die verbleibenden Teile der an die Funktion myBio() übergebenen Parameter „CodeSweetly“, „We Developer“ und „Male“ in einem Array zu speichern.

Schauen wir uns dann das folgende Beispiel an, das den Spread-Operator verwendet:

 //Definiere eine Funktion mit drei Parametern:
Funktion myBio(Vorname, Nachname, Firma) { 
 return `${firstName} ${lastName} führt ${company} aus`;
}

// Verwenden Sie „spread“, um die Elemente eines Arrays in einzelne Argumente zu erweitern:
meineBio(...["Oluwatobi", "Sofela", "CodeSweetly"]);

// Der obige Aufruf gibt zurück:
„Oluwatobi Sofela leitet CodeSweetly“

Sehen Sie sich die Laufergebnisse an

Im obigen Code verwenden wir den Spread-Operator (...), um den Inhalt des Arrays ["Oluwatobi", "Sofela", "CodeSweetly"] nacheinander zu erweitern und an die Parameter der Funktion myBio() zu übergeben.

Wenn Sie mit dem Restoperator und dem Spreadoperator nicht vertraut sind, machen Sie sich keine Sorgen, wir werden sie später in diesem Artikel vorstellen.

In den folgenden Kapiteln besprechen wir im Detail, wie der Restoperator und der Spread-Operator in JavaScript funktionieren.

Was ist der Restoperator?

Wie oben erwähnt, fügt der Restoperator den Rest eines vom Benutzer eingegebenen bestimmten Werts in ein JavaScript-Array ein. Die Syntax lautet wie folgt:

 ...IhreWerte

Die drei Punkte (...) im obigen Code werden verwendet, um den Restoperator darzustellen.

Der Restoperator wird verwendet, um den Wert darzustellen, den Sie in das Array einfügen möchten. Beachten Sie, dass Sie den Restoperator nur im letzten Argument einer Funktionsdefinition verwenden können.

Wie funktioniert der Restoperator in JavaScript-Funktionen?

In einer JavaScript-Funktion wird der Restoperator vor dem letzten Parameter der Funktion verwendet. Wie im folgenden Code gezeigt:

 //Definieren Sie eine Funktion mit zwei regulären Parametern und einem Restparameter:
Funktion meineBio(Vorname, Nachname, ...andereInfo) { 
  andereInformationen zurückgeben;
}

Hier weist der Restoperator das JavaScript-Programm an, den vom Benutzer dem Parameter „otherInfo“ bereitgestellten Wert einem Array hinzuzufügen. Weisen Sie dann das Array dem Parameter otherInfo zu.

Daher nennen wir die verbleibenden Parameter ...otherInfo.

Es ist wichtig zu beachten, dass die restlichen Parameter in den tatsächlichen Parametern, die beim Aufruf an die Funktion übergeben werden, optional sind.

Ein weiteres Beispiel:

 //Definieren Sie eine Funktion mit zwei regulären Parametern und einem Restparameter:
Funktion myBio(Vorname, Nachname, ...andereInfo) { 
 andereInformationen zurückgeben;
}

// Rufen Sie die Funktion myBio auf und übergeben Sie dabei fünf Argumente an ihre Parameter:
myBio("Oluwatobi", "Sofela", "CodeSweetly", "Webentwickler", "Männlich");

// Der obige Aufruf gibt zurück:
["CodeSweetly", "Webentwickler", "Männlich"]

Sehen Sie sich die Laufergebnisse an

Im obigen Code werden beim Aufruf der Funktion myBio() 5 Parameter übergeben, die tatsächlichen Parameter der Funktion myBio() sind jedoch nur 3. Das heißt, die Parameter „Oluwatobi“ und „Sofela“ werden an firstName bzw. lastName übergeben und die anderen Parameter („CodeSweetly“, „Web Developer“ und „Male“) werden an den verbleibenden Parameter otherInfo übergeben. Das von der Funktion myBio() zurückgegebene Ergebnis ist also ["CodeSweetly", "Web Developer", "Male"], was dem Inhalt des verbleibenden Parameters otherInfo entspricht.

Beachten! Sie können „use strict“ nicht in einem Funktionskörper verwenden, der Restparameter enthält

Denken Sie daran, dass Sie die Direktive „use strict“ nicht innerhalb eines Funktionskörpers verwenden können, der Restparameter, Standardparameter oder Parameterdestrukturierung enthält. Andernfalls meldet JavaScript einen Syntaxfehler.

Betrachten Sie den folgenden Code:

 //Definiere eine Funktion mit einem Restparameter:
Funktion printMyName(...Wert) {
 "streng verwenden";
 Rückgabewert;
}

// Die obige Definition gibt zurück:
„Nicht abgefangener Syntaxfehler: Ungültige ‚use strict‘-Direktive in Funktion mit nicht einfacher Parameterliste“

Hinweis: „use strict“ kann nur dann außerhalb eines Funktionskörpers platziert werden, wenn sich das gesamte Skript oder der umschließende Bereich im strikten Modus befindet.

Nachdem wir nun wissen, wie der Restoperator in Funktionen funktioniert, schauen wir uns an, wie er bei der Parameterdestrukturierung funktioniert.

Wie funktioniert der Restoperator bei der Argumentdestrukturierung?

Der Restoperator wird normalerweise vor der letzten Variablen bei der Destrukturierungszuweisung von Parametern verwendet. Hier ist ein Beispiel:

 //Definieren Sie ein Destrukturierungsarray mit zwei regulären Variablen und einer Restvariablen:
const [Vorname, Nachname, ...andereInfo] = [
 „Oluwatobi“, „Sofela“, „CodeSweetly“, „Webentwickler“, „Männlich“
];

// Rufe die Variable otherInfo auf:
console.log(andereInfo); 

// Der obige Aufruf gibt zurück:
["CodeSweetly", "Webentwickler", "Männlich"]

Sehen Sie sich die Laufergebnisse an

Der Restoperator (...) weist das JavaScript-Programm hier an, die restlichen vom Benutzer eingegebenen Werte zu einem Array hinzuzufügen. Weisen Sie dann das Array der Variable „otherInfo“ zu.

Daher nennen wir hier ...otherInfo die verbleibende Variable.

Ein weiteres Beispiel:

 //Definieren Sie ein Destrukturierungsobjekt mit zwei regulären Variablen und einer Restvariablen:
const { Vorname, Nachname, ...andereInfo } = {
 Vorname: "Oluwatobi",
 Nachname: "Sofela", 
 Firmenname: "CodeSweetly",
 Beruf: "Webentwickler",
 Geschlecht: „Männlich“
}

// Rufe die Variable otherInfo auf:
console.log(andereInfo);

// Der obige Aufruf gibt zurück:
{companyName: "CodeSweetly", Beruf: "Webentwickler", Geschlecht: "Männlich"}

Sehen Sie sich die Laufergebnisse an

Beachten Sie, dass im obigen Code der Restoperator der Variable „otherInfo“ ein Eigenschaftenobjekt (kein Array) zuweist. Das heißt, wenn Sie bei der Destrukturierung eines Objekts den Restoperator verwenden, wird ein Eigenschaftenobjekt statt eines Arrays generiert.

Wenn Sie jedoch beim Destrukturieren eines Arrays oder einer Funktion den Restoperator verwenden, wird ein Array-Literal generiert.

Möglicherweise ist Ihnen aufgefallen, dass es einige Unterschiede zwischen JavaScript-Argumenten und Restparametern gibt. Sehen wir uns diese Unterschiede einmal genauer an.

Was sind die Unterschiede zwischen JavaScript-Argumenten und Restparametern?

Nachfolgend liste ich einige der Unterschiede zwischen JavaScript-Argumenten und Restparametern auf:

Unterschied 1: Das Argumentobjekt ist ein arrayähnliches Objekt, aber kein echtes Array!
Bedenken Sie, dass das JavaScript-Argumentobjekt kein echtes Array ist. Es handelt sich um ein arrayähnliches Objekt ohne die Eigenschaften eines Arrays.

Der Restparameter ist ein echtes Array und Sie können alle Methoden, die Sie für Arrays haben, darauf verwenden. Sie können beispielsweise die Methoden sort(), map(), forEach() oder pop() auf ein Restargument anwenden. Sie können diese Methoden nicht auf Argumentobjekte anwenden.

Unterschied 2: Das Argumentobjekt kann nicht in Pfeilfunktionen verwendet werden. Das Argumentobjekt ist in Pfeilfunktionen nicht verfügbar, während die restlichen Parameter in allen Funktionen verfügbar sind, einschließlich Pfeilfunktionen.

Unterschied 3: Rest-Parameter bevorzugen. Bevorzugen Sie Rest-Parameter gegenüber dem Argument-Objekt, insbesondere beim Schreiben von ES6-kompatiblem Code.

Nachdem wir nun gesehen haben, wie der Restoperator funktioniert, wollen wir uns mit dem Spread-Operator befassen und sehen, worin er sich vom Restoperator unterscheidet.

Was ist der Spread-Operator und wie funktioniert er in JavaScript?

Der Spread-Operator (...) expandiert ein iterierbares Objekt in einzelne Elemente.

Der Spread-Operator kann auf Array-Literale, Funktionsaufrufe und initialisierte Eigenschaftsobjekte angewendet werden. Er expandiert die Werte eines iterierbaren Objekts nacheinander in einzelne Elemente. Tatsächlich ist es das Gegenteil des Restoperators.

Beachten Sie, dass der Spread-Operator nur funktioniert, wenn er innerhalb eines Array-Literals, eines Funktionsaufrufs oder eines initialisierten Eigenschaftsobjekts verwendet wird.

Schauen wir uns einige praktische Beispiele an.

Beispiel 1: Funktionsweise des Spread-Operators in Array-Literalen

 const myName = ["Sofela", "ist", "mein"];
const aboutMe = ["Oluwatobi", ...meinName, "name."];

console.log(über mich);

// Der obige Aufruf gibt zurück:
[ "Oluwatobi", "Sofela", "ist", "mein", "Name." ]

Sehen Sie sich die Laufergebnisse an

Im obigen Code kopiert der Spread-Operator (...) das Array myName in aboutMe.

Beachten:

• Änderungen an „myName“ werden in „aboutMe“ nicht berücksichtigt. Weil alle Werte im Array myName Primitive sind. Der Spread-Operator kopiert einfach den Inhalt des myName-Arrays und fügt ihn in aboutMe ein, ohne dabei Verweise auf die ursprünglichen Array-Elemente zu erstellen.
• Der Spread-Operator erstellt nur eine oberflächliche Kopie. Wenn das Array „myName“ einen nicht-primitiven Wert enthält, erstellt JavaScript eine Referenz zwischen „myName“ und „aboutMe“. Weitere Informationen dazu, wie der Spread-Operator mit primitiven und nicht-primitiven Werten umgeht, finden Sie hier.
• Angenommen, wir hätten den Spread-Operator nicht zum Kopieren des Inhalts des Arrays myName verwendet und beispielsweise diese Codezeile geschrieben: const aboutMe = [ "Oluwatobi", myName, "name." ] In diesem Fall würde JavaScript myName eine Referenz zuweisen, sodass alle am Array myName vorgenommenen Änderungen im Array aboutMe widergespiegelt würden.

Beispiel 2: So konvertieren Sie einen String mit dem Spread-Operator in ein Array

 const myName = "Oluwatobi Sofela";

console.log([...meinName]);

// Der obige Aufruf gibt zurück:
[ "O", "l", "u", "w", "a", "t", "o", "b", "i", " ", "S", "o", "f", "e", "l", "a" ]

Sehen Sie sich die Laufergebnisse an

Im obigen Code verwenden wir den Spread-Operator ( [...]), um in einem Array-Literal den Wert der Zeichenfolge myName in ein Array zu erweitern. Somit wird der Inhalt der Zeichenfolge „Oluwatobi Sofela“ in das Array [ „O“, „l“, „u“, „w“, „a“, „t“, „o“, „b“, „i“, „ “, „S“, „o“, „f“, „e“, „l“, „a“ ] erweitert.

Beispiel 3: Funktionsweise des Spread-Operators in einem Funktionsaufruf

 Konstante Zahlen = [1, 3, 5, 7];

Funktion addNumbers(a, b, c, d) {
 gib a + b + c + d zurück;
}

Konsole.log(addNumbers(...numbers));

// Der obige Aufruf gibt zurück:
16

Sehen Sie sich die Laufergebnisse an

Im obigen Code verwenden wir den Spread-Operator, um den Inhalt des Zahlen-Arrays zu erweitern und ihn an den Parameter der Funktion addNumbers() zu übergeben. Wenn das Zahlen-Array mehr als 4 Elemente hat, übergibt JavaScript nur die ersten 4 Elemente als Parameter an die Funktion addNumbers() und ignoriert den Rest.

Hier sind einige weitere Beispiele:

 Konstante Zahlen = [1, 3, 5, 7, 10, 200, 90, 59];

Funktion addNumbers(a, b, c, d) {
 gib a + b + c + d zurück;
}

Konsole.log(addNumbers(...numbers));

// Der obige Aufruf gibt zurück:
16

Sehen Sie sich die Laufergebnisse an

 const myName = "Oluwatobi Sofela";

Funktion Zaubername(a, b, c) {
 gib a + b + c zurück;
}

console.log(spellName(...myName)); // gibt zurück: "Olu"

console.log(spellName(...myName[3])); // gibt zurück: "wundefinedundefined"

console.log(spellName([...myName])); // gibt zurück: "O,l,u,w,a,t,o,b,i, ,S,o,f,e,l,aundefinedundefined"

console.log(spellName({...myName})); // gibt zurück: "[Objekt Objekt]undefinedundefined"

Sehen Sie sich die Laufergebnisse an

Beispiel 4: Funktionsweise des Spread-Operators in Objektliteralen

 const myNames = ["Oluwatobi", "Sofela"];
const bio = { ...meineNamen, läuft: "codesweetly.com" };

konsole.log(bio);

// Der obige Aufruf gibt zurück:
{ 0: "Oluwatobi", 1: "Sofela", läuft: "codesweetly.com" }

Sehen Sie sich die Laufergebnisse an

Im obigen Code verwenden wir den Spread-Operator innerhalb des Bio-Objekts, um die Werte des Arrays myNames in einzelne Attribute zu erweitern.

Was wir über den Spread-Operator wissen müssen

Hier sind drei grundlegende Informationen, die Sie bei der Verwendung des Spread-Operators beachten sollten.

1. Der Spread-Operator kann den Wert eines Objektliterals nicht erweitern

Da Attributobjekte nicht iterierbare Objekte sind, kann der Spread-Operator nicht zum Erweitern ihrer Werte verwendet werden. Sie können den Spread-Operator jedoch verwenden, um die Eigenschaften eines Objekts in ein anderes Objekt zu klonen.

Betrachten Sie das folgende Beispiel:

 const meinName = { Vorname: "Oluwatobi", Nachname: "Sofela" };
const bio = { ...meinName, website: "codesweetly.com" };

konsole.log(bio);

// Der obige Aufruf gibt zurück:
{ Vorname: "Oluwatobi", Nachname: "Sofela", Website: "codesweetly.com" };

Sehen Sie sich die Laufergebnisse an

Im obigen Code verwenden wir den Spread-Operator, um den Inhalt des myName-Objekts in das Bio-Objekt zu klonen.

Beachten:

• Der Spread-Operator kann nur die Werte iterierbarer Objekte verteilen.
• Ein Objekt ist nur dann iterierbar, wenn es eine Eigenschaft mit einem @@Iterator-Schlüssel enthält.
• Array, TypedArray, String, Map und Set sind allesamt integrierte iterierbare Typen, da sie alle standardmäßig über das Attribut @@iterator verfügen.
• Das Eigenschaftenobjekt ist ein nicht iterierbarer Array-Typ, da es standardmäßig kein @@iterator-Attribut hat.
• Sie können einem Eigenschaftsobjekt @@iterator hinzufügen, um es zu einem iterierbaren Objekt zu machen.

2. Der Spread-Operator klont nicht dieselben Eigenschaften

Angenommen, wir verwenden den Spread-Operator, um die Eigenschaften von Objekt A in Objekt B zu klonen. Wenn Objekt B dieselben Eigenschaften wie Objekt A enthält, überschreiben die Eigenschaften von Objekt B die Eigenschaften von Objekt A. Mit anderen Worten: Bei diesem Vorgang werden die Eigenschaften von Objekt A, die mit denen von Objekt B übereinstimmen, nicht geklont.

Betrachten Sie das folgende Beispiel:

 const meinName = { Vorname: "Tobi", Nachname: "Sofela" };
const bio = { ...meinName, Vorname: "Oluwatobi", Website: "codesweetly.com" };

konsole.log(bio);

// Der obige Aufruf gibt zurück:
{ Vorname: "Oluwatobi", Nachname: "Sofela", Website: "codesweetly.com" };

Sehen Sie sich die Laufergebnisse an

Beachten Sie, dass der Spread-Operator den Wert der firstName-Eigenschaft des myName-Objekts nicht in das Bio-Objekt kopiert, da das Bio-Objekt bereits eine firstName-Eigenschaft enthält.

3. Beachten Sie, wie der Spread-Operator mit Objekten funktioniert, die Nicht-Primitive enthalten

Wenn Sie den Spread-Operator auf ein Objekt (oder Array) anwenden, das nur primitive Werte enthält, erstellt JavaScript keine Referenzen zwischen dem ursprünglichen und dem kopierten Objekt.

Betrachten Sie den folgenden Code:

 const myName = ["Sofela", "ist", "mein"];
const aboutMe = ["Oluwatobi", ...meinName, "name."];

console.log(über mich);

// Der obige Aufruf gibt zurück:
["Oluwatobi", "Sofela", "ist", "mein", "Name."]

Sehen Sie sich die Laufergebnisse an

Beachten Sie, dass jedes Element in myName ein primitiver Wert ist. Wenn wir also den Spread-Operator verwenden, um myName in aboutMe zu klonen, erstellt JavaScript keine Referenzen zwischen den beiden Arrays. Daher werden Änderungen am Array „myName“ nicht im Array „aboutMe“ widergespiegelt und umgekehrt.

Fügen wir dem Array myName ein Element hinzu:

 meinName.push("real");

Überprüfen wir nun die Werte von myName und aboutMe:

console.log(meinName); // ["Sofela", "ist", "mein", "echt"]

console.log(aboutMe); // ["Oluwatobi", "Sofela", "ist", "mein", "Name."]

Beachten Sie, dass unsere Änderungen am Array „myName“ nicht im Array „aboutMe“ widergespiegelt werden, da der Spread-Operator keine Referenzen zwischen dem ursprünglichen und dem kopierten Array erstellt.

Was passiert, wenn das Array myName nicht-primitive Elemente enthält?

Angenommen, myName enthält nicht-primitive Elemente. In diesem Fall erstellt der Spread-Operator eine Referenz zwischen den nicht-primitiven Elementen im ursprünglichen Array und den geklonten Elementen.

Schauen Sie sich das folgende Beispiel an:

 const myName = [["Sofela", "ist", "mein"]];
const aboutMe = ["Oluwatobi", ...meinName, "name."];

console.log(über mich);

// Der obige Aufruf gibt zurück:
[ "Oluwatobi", ["Sofela", "ist", "mein"], "Name." ]

Sehen Sie sich die Laufergebnisse an

Beachten Sie, dass das Array myName hier ein nicht-primitives Element enthält.

Wenn also der Spread-Operator verwendet wird, um den Inhalt von myName in aboutMe zu klonen, erstellt JavaScript eine Referenz zwischen den beiden Arrays. Auf diese Weise werden alle am Array „myName“ vorgenommenen Änderungen im Array „aboutMe“ widergespiegelt und umgekehrt.

Als Beispiel fügen wir auch dem Array myName ein Element hinzu:

 meinName[0].push("real");

Überprüfen wir nun die Werte von myName und aboutMe:

 console.log(meinName); // [["Sofela", "ist", "mein", "echt"]]

console.log(aboutMe); // ["Oluwatobi", ["Sofela", "ist", "mein", "richtiger"], "Name."]

Sehen Sie sich die Laufergebnisse an

Beachten Sie, dass Änderungen am Array „myName“ im Array „aboutMe“ widergespiegelt werden, da der Spread-Operator eine Referenz zwischen dem ursprünglichen Array und dem kopierten Array erstellt.

Ein weiteres Beispiel:

 const meinName = { Vorname: "Oluwatobi", Nachname: "Sofela" };
const bio = { ...meinName };

meinName.vorname = "Tobi";

console.log(meinName); // { Vorname: "Tobi", Nachname: "Sofela" }

console.log(bio); // { Vorname: "Oluwatobi", Nachname: "Sofela" }

Sehen Sie sich die Laufergebnisse an

Im obigen Code wird der aktualisierte Inhalt von myName nicht im Bio-Objekt widergespiegelt, da wir den Spread-Operator auf einem Objekt verwenden, das nur primitive Werte enthält.

Beachten Sie, dass Entwickler myName hier häufig als oberflächliches Objekt bezeichnen, da es nur primitive Elemente enthält.

Ein weiteres Beispiel:

 const meinName = { 
 vollständigerName: { Vorname: "Oluwatobi", Nachname: "Sofela" }
};

const bio = { ...meinName };

meinName.vollständigerName.vorname = "Tobi";

console.log(meinName); // { vollständigerName: { Vorname: "Tobi", Nachname: "Sofela" } }

console.log(bio); // { vollständigerName: { Vorname: "Tobi", Nachname: "Sofela" } }

Sehen Sie sich die Laufergebnisse an

Im obigen Code wird der aktualisierte Inhalt von myName im Bio-Objekt widergespiegelt, da wir den Spread-Operator auf einem Objekt verwenden, das nicht-primitive Werte enthält.

Beachten:

• Wir nennen myName hier ein tiefes Objekt, weil es nicht-primitive Elemente enthält.
• Wenn beim Klonen eines Objekts in ein anderes eine Referenz erstellt wird, wird eine oberflächliche Kopie ausgeführt. Beispielsweise erstellt …myName eine oberflächliche Kopie des myName-Objekts, da alle Änderungen, die Sie an einem Objekt vornehmen, auch im anderen widergespiegelt werden.
• Beim Klonen eines Objekts in ein anderes Objekt wird eine tiefe Kopie ausgeführt, wenn keine Referenz erstellt wird. Beispielsweise kann ich das myName-Objekt mithilfe von const bio = JSON.parse(JSON.stringify(myName)) tief in das Bio-Objekt kopieren. Auf diese Weise klont JavaScript myName in bio, ohne Referenzen zu erstellen.
• Wir können die Referenz zwischen „myName“ und „bio“ trennen, indem wir das untergeordnete Objekt „fullName“ entweder in „myName“ oder „bio“ durch ein neues Objekt ersetzen. Verwenden Sie beispielsweise myName.fullName = { firstName: "Tobi", lastName: "Sofela" }, um den Zeiger zwischen myName und bio zu unterbrechen.

Abschluss

In diesem Artikel wird der Unterschied zwischen Restoperator und Spreadoperator erläutert und ihre Funktionsweise in JavaScript anhand von Beispielen erklärt.

Damit ist dieser Artikel über die Unterschiede zwischen dem JavaScript-Spread-Operator und dem Rest-Operator abgeschlossen. Weitere Informationen zum JavaScript-Spread-Operator und dem Rest-Operator finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!