5 gängige Szenarien und Beispiele für die Destrukturierungszuweisung in JavaScript

Vorwort

Die Destrukturierungszuweisungssyntax ist ein JavaScript-Ausdruck, mit dem Eigenschaften/Werte aus einem Objekt/Array entnommen und anderen Variablen zugewiesen werden können. Mit dieser Syntax wurde in der ECMAscript 6-Spezifikation eine neue Syntax eingeführt, die das Abrufen von Werten aus Arrays und Objekten erleichtert.

1. Daten extrahieren

Sehen wir uns an, wie Objekte in JavaScript dekonstruiert werden, beginnend mit diesem einfachen Beispiel eines Produktobjekts.

const Produkt = {
    ID: 1,
    Titel: "Nike Air Zoom Pegasus 38",
    Produktbild: "/resources/products/01.jpeg",
    abgebildet: "Weiß/Pure Platinum/Midnight Navy/Wolf Grey",
    Preis: 120,
};
const { id, Preis, Titel } ​​= Produkt;

Anschließend kann auf die entsprechenden Eigenschaften wie folgt zugegriffen werden:

konsole.log(ich würde); // 1
console.log(Preis); // 120
console.log(Titel); // Nike Air Zoom Pegasus 38

Durch Destrukturierung kann der Code klarer und prägnanter werden. Was ist, wenn Sie ein komplexeres Objekt dekonstruieren müssen? Das heißt, ein Objekt innerhalb eines Objekts.

Nehmen wir nun an, Sie müssen die Attribute eines der Produkte aus den Produktlistendaten wie folgt abrufen:

const Produkte = [
    {
        ID: 1,
        Titel: "Nike Air Zoom Pegasus 38",
        Preis: 120,
    },
    {
        ID: 2,
        Titel: "Nike Air Zoom Alphafly NEXT%",
        Preis: 275,
    },
    {
        ID: 3,
        Titel: "Nike Zoom Fly 4",
        Preis: 89,0,
    },
];

Hier ist die Produktliste mehrere Ebenen tief verschachtelt. Wenn Sie auf die Produktinformationen zugreifen müssen, können Sie so viele Ebenen wie möglich dekonstruieren, um die Eigenschaften des Produktobjekts abzurufen.

const [tmp, { id, Titel, Preis }] = Produkte;
konsole.log(ich würde); // 2
console.log(Titel); // Nike Air Zoom Alphafly NEXT%
console.log(Preis); // 275

Der obige Code dient nur zur Demonstration seiner Verwendung. Es wird nicht empfohlen, während der Projektentwicklung auf diese Weise Objektinformationen im Array abzurufen.

Normalerweise müssen Datenlisten nicht unbedingt Arrays sein. In Bezug auf die Erfassungseffizienz sind Map-Objekte effizienter als Arrays. Die oben genannten Daten können wie folgt in ein Kartenobjekt umgewandelt werden:

const Produkte = {
    1: {
        Titel: "Nike Air Zoom Pegasus 38",
        Preis: 120,
    },
    2: {
        Titel: "Nike Air Zoom Alphafly NEXT%",
        Preis: 275,
    },
    3: {
        Titel: "Nike Zoom Fly 4",
        Preis: 89,0,
    },
};
Konstante {
    2: { id, Titel, Preis },
} = Produkte;
konsole.log(ich würde); // 2
console.log(Titel); // Nike Air Zoom Alphafly NEXT%
console.log(Preis); // 275

Da es sich bei Daten in JavaScript sowohl um Variablen als auch um Methoden handeln kann, eignet sich die Destrukturierungszuweisung auch zum Definieren von Funktionsparametern:

const printArticle = ({ Titel, Bemerkung }) => {
    konsole.log(Titel);
    console.log(Bemerkung);
};
Artikel drucken({
    Titel: "JavaScript-Destrukturierungszuweisung",
    Bemerkung: "Einführung in praktische Szenarien der Destrukturierungszuweisung",
});

Bei der Verwendung von Frameworks wie React oder Vue gibt es viele Stellen für Dekonstruktionszuweisungen, beispielsweise die Einführung von Methoden usw.

2. Alias-Wert

Wenn Sie eine Variable mit einem anderen Namen als die Eigenschaft erstellen möchten, können Sie die Alias-Funktion der Objektdestrukturierung verwenden.

const { Bezeichner: AliasBezeichner } = Ausdruck;

„identifier“ ist der Name der Eigenschaft, auf die zugegriffen werden soll, und „aliasIdentifier“ ist der Variablenname. Die spezifische Verwendung ist wie folgt:

const Produkte = {
    1: {
        Titel: "Nike Air Zoom Pegasus 38",
        Preis: 120,
    },
    2: {
        Titel: "Nike Air Zoom Alphafly NEXT%",
        Preis: 275,
    },
    3: {
        Titel: "Nike Zoom Fly 4",
        Preis: 89,0,
    },
};
Konstante {
    2: { Preis: Produktpreis },
} = Produkte;

console.log(Produktpreis); // 275

3. Dynamische Eigenschaften

Sie können variable Attribute mit dynamischen Namen extrahieren (der Attributname ist zur Laufzeit bekannt):

const { [propName]: Bezeichner } = Ausdruck;

Der Ausdruck „propName“ sollte den Eigenschaftsnamen (normalerweise eine Zeichenfolge) ergeben, und der Bezeichner sollte den nach der Destrukturierung erstellten Variablennamen wie folgt angeben:

const Produkte = {
    1: {
        Titel: "Nike Air Zoom Pegasus 38",
        Preis: 120,
    },
    2: {
        Titel: "Nike Air Zoom Alphafly NEXT%",
        Preis: 275,
    },
    3: {
        Titel: "Nike Zoom Fly 4",
        Preis: 89,0,
    },
};
const Produktschlüssel = "1";
const { [Produktschlüssel]: Produkt } = Produkte;
console.log(Produkt); // { Titel: 'Nike Air Zoom Pegasus 38', Preis: 120 }

Im obigen Code kann der Produktwert durch Aktualisieren des Produktschlüsselwerts aktualisiert werden.

4. Ruhe in der Objektdekonstruktion

Fügt der Destrukturierung Rest-Syntax hinzu. Rest-Eigenschaften sammeln die verbleibenden aufzählbaren Eigenschaftsschlüssel, die nicht vom Destrukturierungsmuster erfasst wurden.

const { Bezeichner, ...Rest} = Ausdruck;

Nach der Destrukturierung enthält der Variablenbezeichner den Eigenschaftswert. Eine Restvariable ist ein einfaches Objekt mit den Resteigenschaften.

const Produkt = {
    Titel: "Nike Air Zoom Pegasus 38",
    Preis: 120,
    Menge: 5,
    Kategorie-ID: 1,
    Bewertungen: 9830,
    gesamt: 45,
};
const { Titel, ...andere } = Produkt;
console.log(andere); // { Preis: 120, Menge: 5, Kategorie-ID: 1, Bewertungen: 9830, Gesamt: 45 }

Für Arrays können Sie Rest verwenden, um den ersten und letzten Wert abzurufen:

Konstante Zahlen = [1, 2, 3];
const [Kopf, ...Schwanz] = Zahlen;
konsole.log(kopf); // 1
console.log(tail); // [ 2, 3 ]

5. Standardwerte

Wie bereits erwähnt, können Sie Arrays beim Destrukturieren Standardwerte zuweisen:

const RGBA = [255, 34];
Konstante [R, G, B = 0, A = 1] = RGBA;
console.log(R); // 255
console.log(G); // 34
console.log(B); // 0
konsole.log(A); // 1

Dadurch wird sichergestellt, dass ein Standardwert vorhanden ist, wenn B und A nicht definiert sind.

Zusammenfassen

Destrukturierung ist eine sehr nützliche Funktion, die der ES6-Version von JavaScript hinzugefügt wurde. Durch die Destrukturierung können Sie Eigenschaften oder Daten aus Objekten und Arrays schnell und einfach in separate Variablen extrahieren. Es funktioniert gut mit verschachtelten Objekten und kann mit dem Operator ... Arrays zugewiesen werden.

Damit ist dieser Artikel über 5 gängige Szenarien und Beispiele für JavaScript-Destrukturierungszuweisungen abgeschlossen. Weitere relevante Beispiele für JS-Destrukturierungszuweisungen finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!