Objekt -Zerstörungen, Ruheparameter und Spread Syntax | In JavaScript erklärt

Objekt -Destrukting, Ruheparameter und Spread -Syntax werden als erweiterte JavaScript -Themen angesehen. Wir werden sie in einfache verständliche Schritte zerlegen und sie mit Beispielen erklären. Alle drei Merkmale wurden in JavaScript mit der Veröffentlichung von ECMAV6 JavaScript (ES6 JS) eingeführt

Objekt zerstören

Es ist der Prozess, die „Werte“ aus den Schlüsselwertpaaren aus einem Objekt zu nehmen und sie in einzelne Variablen mit einer einzelnen Codezeile zu platzieren. Diese einzelne Codezeile weist den Variablen nicht nur Werte zu, sondern erstellt auch diese Variablen auch. Wir können sagen, dass wir mehrere Variablen in einer einzelnen Codezeile mit Objektzerstörungen deklarieren und initialisieren.

Syntax der Objektzerstörungen:
Nach der Variablendeklaration (const, let, var) platzieren Sie die Kennungen der Variablen in den lockigen Klammern und setzen Sie diese ganze Gleichung dem Objekt, das wir zerstören möchten, gleich. Denken Sie daran, dass der Name der Variablen mit dem „Schlüssel“ der Schlüsselwertpaare des Objekts übereinstimmen sollte.

const identifier1, identifier2, identifier3 = ObjectName;

Hinweis: Es gibt keinen zerstörenden „Operator“. Die obige Erklärung wird jedoch als „Destructuring Assignment Operator“ bezeichnet

Beispiel:

Um das Destructuring von Objekten zu demonstrieren, werden wir zunächst ein Objekt in JavaScript erstellen, indem wir die folgenden Codezeilen verwenden:

Telefon =
Name: 'iPhone',
Modell: '13 Pro ',
Unternehmen: "Apple",
Popularität: 10

Nachdem wir unser Objekt haben, können wir es mit der folgenden Codezeile in verschiedene Variablen zerstören:

const Name, Modell = Telefon;

Hinweis: Wir zerstören nur das Objekt und speichern zwei Werte mit dem Schlüssel "Namen" und "Modell". Deshalb müssen wir den Namen der Kennung genauso wie die Schlüssel der Schlüsselwertpaare geben.

Sie können sogar auf die Werte zugreifen, indem Sie Variablen wie:

Konsole.log ("Der Name des Handys lautet:" + Name);
Konsole.log ("Das Modell des Mobiltelefons ist:"+ Modell);

Der vollständige Codeausschnitt dieses Beispiels lautet als

Telefon =
Name: "iPhone",
Modell: "13 Pro",
Unternehmen: "Apple",
Popularität: 10,
;
const Name, Modell = Telefon;
Konsole.log ("Der Name des Handys lautet:"+Name);
Konsole.log ("Das Modell des Mobiltelefons ist:"+ Modell);

Sie erhalten die folgende Ausgabe, wenn Sie diesen Code ausführen:

Das ist es für Objekte, die in JavaScript ES6 zerstört werden

Ruheparameter

Die Restparameter werden verwendet, wenn wir uns nicht sicher sind, wie viele Parameter eine Funktion erfolgen sollten. Wir fordern den Compiler mit dem Triple-Punkt-Operator vor dem Namen des Parameters auf, um klarzustellen, dass dies ein REST-Parameter und kein normaler Parameter ist.

Die Werte innerhalb des Restparameters werden als Array unter derselben Kennung wie der Parameter selbst gespeichert.

Syntax
Wie oben erwähnt, verwenden wir vor der Kennung in den Parametern einer Funktion einen Triple-Punkt-Operator, um es zu einem REST-Parameter zu machen

Funktion xyz (… Paramidentifier) ​​
// Körper der Funktion

Einschränkung zur Definition von Ruheparametern:

• Nur ein Ruheparam in einer Funktion.
• Muss der letzte Parameter der Funktion sein

Beispiel für Ruheparameter

Um die Verwendung von Ruheparametern mit JavaScript zu demonstrieren, erstellen wir eine einfache Funktion, die die damit verbundenen Zahlen als Argumente mit den folgenden Codezeilen zusammenfasst:

Funktionsumme (a, b)
Return a+b;

Wie Sie sehen können, kann diese Funktion nur 2 Zahlen summieren, aber wir möchten eine Funktion, die eine unbestimmte Menge an Zahlen aufnehmen und für uns zusammenfasst. Daher ändern wir die Funktion, damit sie so aussieht:

Funktionsumme (… Zahlen)
Ergebnis = 0;
für (Wert der Zahlen)
Ergebnis = Ergebnis + Wert;

Rückgabeergebnis;

Wie Sie sehen können, nehmen wir nur 1 Parameter ein, was der Restparameter ist, mit dem diese Funktion eine unbestimmte Menge an Zahlen aufnehmen kann, und dann verwenden wir die für die Schleife, um die im Array platzierten Werte zu durchqueren und sie hinzuzufügen und sie hinzuzufügen. ineinander. Alles, was zu tun ist, ist, diese Funktion aufzurufen und den Rückgabewert mit den folgenden Codezeilen auszudrucken:

Konsole.log (sum (6, 3, 83, 55, 13, 45));
Konsole.log (sum (1, 2, 3));

Sie sehen die folgende Ausgabe auf dem Bildschirm, wenn Sie diesen Code ausführen:

Das ist es für die Verwendung von Ruheparametern in JavaScript. Wir können uns nun zu unserem nächsten Thema übergeben.

Syntax verbreiten

Es wird verwendet, um die Elemente eines iterbaren Objekts (entweder eines Arrays oder einer Zeichenfolge) an die Argumente oder die Liste der Argumente wie bei einer einzigen Codezeile weiterzugeben, ohne das iterable Objekt manuell zu durchführen zu müssen.

Syntax
Die Syntax der Spread-Syntax ist ziemlich einfach Streit.

(… ArgumentVariable);

Beispiel

Um die Verwendung von Spread -Syntax in JavaScript zu demonstrieren, benötigen wir eine Funktion, die wir mit den folgenden Codezeilen erstellen können:

Funktion addnumbers (a, b, c, d, e)
return a+b+c+d+e;

Nachdem wir unsere Funktion haben, brauchen wir ein Array, das unsere Zahlen enthält, um hinzugefügt zu werden,

Zahlen = [5, 3, 1, 6, 2];

Das Letzte, was noch zu tun ist, ist, dieses Array mit der Spread -Syntax in die Funktion mit der folgenden Codezeile weiterzugeben:

Konsole.log (addnumbers (… number));

Sie sollten das folgende Ergebnis auf Ihrer Konsole sehen:

Wie Sie sehen können, wurden die Elemente des Arrays erfolgreich an die Funktion als Argumente mit der Verwendung von Spread -Syntax übergeben.

REST -Parameter gegen Spread -Syntax

Oft werden Benutzer zwischen den verwirrt Ruheparameter und das Syntax verbreiten zum Übergeben von Argumenten. Diese Verwirrung wird aufgrund der Tatsache erzeugt, dass die Operator Für diese beiden Merkmale ist gleich (Dot-Operator). Um diese Verwirrung anzugehen, können wir das sagen:

• Wenn der DOT-Operator in der Funktionsdefinition verwendet wird, um einen Parameter zu definieren REST -Parameteroperator.
• Auf der anderen Seite wird dieser Bediener beim Übergeben von Argumenten an eine Funktion verwendet, er wird als die genannt Operator ausbreiten.

Abschluss

JavaScript verfügt über verschiedene Funktionen, insbesondere die ECMA V6 -Veröffentlichung von JavaScript, bombardierte die Programmiergemeinschaft mit vielen nützlichen Funktionen. Einige dieser Merkmale sind: Objektzerstörungen, die Restparameter und die Spread -Syntax. In diesem Beitrag haben wir die Erklärung und Verwendung dieser drei Merkmale zusammen mit ihren Beispielen durchgemacht.