Detaillierte Erklärung der Destrukturierungszuweisung in JavaScript

Konzept

ES6 bietet einen prägnanteren Zuweisungsmodus zum Extrahieren von Werten aus Arrays und Objekten, der als Destrukturierung bezeichnet wird.

Beispiel:

[a, b] = [50, 100];
konsole.log(a);
// erwartete Ausgabe: 50
console.log(b);
// erwartete Ausgabe: 100
[a, b, ...Rest] = [10, 20, 30, 40, 50];
Konsole.log(Rest);
// erwartete Ausgabe: [30, 40, 50]

Array-Destrukturierung

Die Destrukturierung von Arrays ist sehr einfach und präzise. Verwenden Sie ein Array-Literal auf der linken Seite des Zuweisungsausdrucks. Jeder Variablenname im Array-Literal wird demselben Indexelement im Destrukturierungsarray zugeordnet.

Was bedeutet das? Es bedeutet, dass wie im folgenden Beispiel die Elemente im linken Array die Werte der entsprechenden Indizes des dekonstruierten Arrays auf der rechten Seite erhalten.

sei [a, b, c] = [1, 2, 3];
// ein = 1
// b = 2
// c = 3

Werte separat deklarieren und zuweisen

Sie können Werte separat destrukturieren und zuweisen, indem Sie Variablen deklarieren

Beispiel : Variablen deklarieren und ihnen Werte zuweisen

// Variablen deklarieren let a, b;
// Dann weise die Werte [a, b] = [1, 2] jeweils zu;
konsole.log(a); // 1
console.log(b); // 2

Destrukturierung von Standardwerten

Wenn der durch die Dekonstruktion extrahierte Wert nicht definiert ist, können Sie einen Standardwert festlegen:

sei a, b;
// Standardwerte festlegen [a = 5, b = 7] = [1];
konsole.log(a); // 1
console.log(b); // 7

Im obigen Beispiel legen wir Standardwerte sowohl für a als auch für b fest.

In diesem Fall wird, wenn der Wert von a oder b nicht definiert ist, der Standardwert der Einstellung der entsprechenden Variablen zugewiesen (5 wird a zugewiesen und 7 wird b zugewiesen).

Austauschen von Variablenwerten

In der Vergangenheit haben wir zwei Variablen ausgetauscht mit

//Austausch ab
c = ein;
a = b;
b = c;

Oder XOR-Methode

Bei der Destrukturierungszuweisung können wir jedoch zwei Variablenwerte in einem Destrukturierungsausdruck vertauschen.

sei a = 1;
sei b = 3;
//Tausche die Werte von a und b [a, b] = [b, a];
konsole.log(a); // 3
console.log(b); // 1

Dekonstruieren von von Funktionen zurückgegebenen Arrays

Wir können eine Funktion, die ein Array zurückgibt, direkt dekonstruieren

Funktion c() {
  Rückkehr [10, 20];
}
sei a, b;
[a, b] = c();
konsole.log(a); // 10
console.log(b); // 20

Im obigen Beispiel kann der Rückgabewert [10, 20] von c() in einer einzigen Codezeile destrukturiert werden.

Rückgabewert ignorieren (oder ein Element überspringen)

Sie können unerwünschte Rückgabewerte selektiv überspringen

Funktion c() {
  Rückkehr [1, 2, 3];
}
sei [a, , b] = c();
konsole.log(a); // 1
console.log(b); // 3

Den Rest eines Arrays einer Variablen zuweisen

Wenn Sie die Array-Destrukturierung verwenden, können Sie den Rest des zugewiesenen Arrays einer Variablen zuweisen.

sei [a, ...b] = [1, 2, 3];
konsole.log(a); // 1
console.log(b); // [2, 3]

In diesem Fall wird b auch zu einem Array und die Elemente im Array sind alle verbleibenden Elemente.

Beachten:

Achten Sie hier darauf, dass Sie am Ende kein Komma setzen können. Wenn Sie ein zusätzliches Komma setzen, wird ein Fehler gemeldet.

sei [a, ...b,] = [1, 2, 3];
// Syntaxfehler: Dem Restelement darf kein abschließendes Komma fehlen

Destrukturierung verschachtelter Arrays

Wie Objekte können auch Arrays verschachtelt werden.

Beispiel:

const Farbe = ['#FF00FF', [255, 0, 255], 'rgb(255, 0, 255)'];
//Verwende verschachtelte Destrukturierung, um Rot, Grün und Blau zuzuweisen
// Verwenden Sie verschachtelte Destrukturierung, um Rot, Grün und Blau zuzuweisen
const [hex, [rot, grün, blau]] = Farbe;
console.log(hex, rot, grün, blau); // #FF00FF 255 0 255

Destrukturierung von Zeichenfolgen

Wenn bei der Array-Dekonstruktion das Ziel der Dekonstruktion ein durchquerbares Objekt ist, kann eine Dekonstruktionszuweisung durchgeführt werden. Ein durchquerbares Objekt sind Daten, die die Iterator-Schnittstelle implementieren.

lass [a, b, c, d, e] = 'hallo';
/*
a = "h"
b = "e"
c = "l"
d = "l"
e = "o"
*/

Destrukturierung von Objekten

Grundlegende Objektdekonstruktion

sei x = { y: 22, z: true };
let { y, z } = x; // Abkürzung für let {y:y,z:z} = x; console.log(y); // 22
console.log(z); // wahr

Dem neuen Variablennamen einen Wert zuweisen

Sie können den Namen einer Variablen ändern, wenn Sie die Objektdestrukturierung verwenden

sei o = { p: 22, q: true };
lass { p: foo, q: bar } = o;
konsole.log(foo); // 22
console.log(bar); // wahr

Wie im obigen Code gezeigt, ruft var {p: foo} = o den Eigenschaftsnamen p des Objekts o ab und weist ihn einer Variablen namens foo zu.

Destrukturierung von Standardwerten

Wenn der dekonstruierte Objektwert nicht definiert ist, können wir einen Standardwert festlegen

sei { a = 10, b = 5 } = { a: 3 };
konsole.log(a); // 3
console.log(b); // 5

Zuweisen eines Wertes zu einem neuen Objektnamen unter Angabe eines Standardwertes

Wie bereits erwähnt, weisen wir einem neuen Objektnamen einen Wert zu. Hier können wir einen Standardwert für den neuen Objektnamen angeben. Wenn er nicht destrukturiert ist, wird der Standardwert automatisch verwendet.

sei { a: aa = 10, b: bb = 5 } = { a: 3 };
konsole.log(aa); // 3
konsole.log(bb); // 5

Gemeinsame Verwendung der Destrukturierung von Arrays und Objekten

Arrays und Objekte können zusammen in Strukturen verwendet werden

const props = [
  { ID: 1, Name: 'Fizz' },
  { ID: 2, Name: 'Buzz' },
  { id: 3, name: 'FizzBuzz' },
];
const [, , { name }] = Requisiten;
console.log(Name); // "FizzBuzz"

Unvollständige Dekonstruktion

let obj = {p: [{y: 'Welt'}] };
let {p: [{ y }, x ] } = obj; //x nicht dekonstruieren
// x = undefiniert
// y = "Welt"

Einem Objekt einen Restwert zuweisen

sei {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40};
// ein = 10
// b = 20
// Rest = {c: 30, d: 40}

Destrukturierung verschachtelter Objekte (Destrukturierung kann ignoriert werden)

let obj = {p: ['hallo', {y: 'Welt'}] };
sei {p: [x, { y }] } = obj;
// x = "hallo"
// y = "Welt"
let obj = {p: ['hallo', {y: 'Welt'}] };
let {p: [x, { }] } = obj; // y ignorieren
// x = "hallo"

Vorsichtsmaßnahmen

Seien Sie vorsichtig bei der Destrukturierung deklarierter Variablen

Fehlerdemonstration:

sei x;
{x} = {x: 1};

Die JavaScript-Engine interpretiert {x} als Codeblock, was zu einem Syntaxfehler führt. Wir sollten es vermeiden, geschweifte Klammern am Zeilenanfang zu schreiben, um zu verhindern, dass JavaScript sie als Codeblock interpretiert.

Richtige Schreibweise:

lass x;
({x} = {x: 1});

Die korrekte Schreibweise besteht darin, die gesamte Destrukturierungszuweisungsanweisung in Klammern zu setzen. Anschließend wird sie korrekt ausgeführt.

Destrukturierende Zuweisung von Funktionsparametern

Funktionsparameter können auch durch Destrukturierung zugewiesen werden

Funktion addieren([x, y]) {
	gib x + y zurück;
}
hinzufügen([1, 2]);

Im obigen Code ist der Parameter der Add-Funktion oberflächlich betrachtet ein Array, aber bei der Übergabe des Parameters wird der Array-Parameter in die Variablen x und y zerlegt. Für die Funktion ist dies dasselbe wie die direkte Übergabe von x und y.

Verwendung der Dekonstruktion

Es gibt viele Verwendungsmöglichkeiten für die Destrukturierungszuweisung

Vertauschen der Werte von Variablen

sei x = 1;
sei y = 2;
[x, y] = [y, x];

Der obige Code vertauscht die Werte von x und y. Das ist nicht nur prägnant, sondern auch gut lesbar und hat eine klare Semantik.

Zurückgeben mehrerer Werte aus einer Funktion

Eine Funktion kann nur einen Wert zurückgeben. Wenn wir mehrere Werte zurückgeben möchten, können wir diese Werte nur in einem Array oder Objekt zurückgeben. Wenn wir eine Destrukturierungszuweisung haben, ist es so einfach, wie etwas aus einer Tasche zu nehmen, um diese Werte aus einem Objekt oder Array zu erhalten.

//Gibt ein Array zurück Funktion example() {
  Rückkehr [1, 2, 3];
}
lass [a, b, c] = Beispiel();
//Gib eine Objektfunktion zurück example() {
  zurückkehren {
    foo: 1,
    Takt: 2
  };
}
let { foo, bar } = Beispiel();

Extrahieren von JSON-Daten

Die Destrukturierungszuweisung ist besonders nützlich zum Extrahieren von Daten aus JSON-Objekten.

Beispiel:

lass jsonData = {
  Ich würde: 42,
  Status: "OK",
  Daten: [867, 5309]
};
let { id, status, daten: nummer } = jsonData;
console.log(ID, Status, Nummer);
// 42, "OK", [867, 5309]

Mit dem obigen Code können wir den Wert in den JSON-Daten schnell abrufen

Zusammenfassen

Dieser Artikel endet hier. Ich hoffe, er kann Ihnen helfen. Ich hoffe auch, dass Sie mehr Inhalt auf 123WORDPRESS.COM lesen können!