Entfernen von Objekteigenschaften mit Destrukturierung - Ultimate Courses™

In diesem Beitrag lernen Sie, wie Sie in JavaScript mithilfe von Destrukturierung und der ...rest -Syntax Eigenschaften aus einem Objekt entfernen.

Dieser neue Weg, Objekteigenschaften zu entfernen (indem man sie aus einem neuen Objekt ausschließt), gibt uns eine sauberere Art, JavaScript zu schreiben, mit weniger Code und besserer Lesbarkeit – außerdem ist es eine unveränderliche Operation.

Vor der Destrukturierung würden wir typischerweise das delete-Schlüsselwort verwenden, um Eigenschaften aus einem Objekt zu entfernen. Das Problem mit delete ist, dass es sich dabei um eine veränderbare Operation handelt, die das Objekt physikalisch verändert und aufgrund der Art und Weise, wie JavaScript mit Objektreferenzen umgeht, möglicherweise unerwünschte Seiteneffekte verursacht.

Durch die Verwendung von Objektdestrukturierung, kombiniert mit dem Rest-Operator ...rest, haben wir einen sauberen Einzeiler-Ansatz.

Was ist Objektdestrukturierung?

Die Objektdestrukturierung ermöglicht es uns, Variablen aus den Eigenschaftsnamen von Objekten zu erstellen, und die Variable enthält dann den Wert des Eigenschaftsnamens – zum Beispiel:

const data = { a: 1, b: 2, c: 3 };const { a, b, c } = data;console.log(a, b, c); // 1, 2, 3

Durch die Verwendung von const { a, b, c } = data deklarieren wir 3 neue Variablen (ab und c).

Wenn ab und c als Eigenschaftsnamen auf data existieren, dann werden Variablen angelegt, die die Werte der Objekteigenschaften enthalten. Existieren die Eigenschaftsnamen nicht, erhalten Sie undefined.

…Rest in der Objektdestrukturierung

Erst kamen Rest-Parameter, dann Rest-Eigenschaften!

Eingeführt in ECMAScript 2015 und jetzt in Stufe 4 – sie sind da und werden heute verwendet.

Wie also hilft uns ...rest, eine Eigenschaft per Destrukturierung aus einem Objekt zu entfernen?

🎉 Kostenlos herunterladen!

Bereit, über ForEach hinauszugehen? Machen Sie sich vertraut mit fortgeschrittenen Methoden – Reduce, Find, Filter, Every, Some und Map.

Verstehen Sie vollständig, wie man JavaScript-Datenstrukturen mit unveränderlichen Operationen verwaltet
31 Seiten mit tiefgehender Syntax, Beispiele aus der Praxis, Tipps und Tricks
Schreiben Sie sauberere und besser strukturierte Programmierlogik innerhalb von 3 Stunden

Als Extra-Bonus schicken wir Ihnen außerdem ein paar zusätzliche Goodies über ein paar zusätzliche E-Mails.

Lassen Sie uns unser früheres Beispiel nehmen und die ...rest-Syntax verwenden, um zu sehen, was passiert:

const data = { a: 1, b: 2, c: 3 };const { a, ...rest } = data;console.log(a); // 1console.log(rest); // { b: 2, c: 3 }

Wenn Sie hier ...rest verwenden (und Sie können rest nennen, was Sie wollen), erhalten wir alles, was übrig bleibt, den ähm „Rest“ der Eigenschaften, wenn Sie so wollen.

So, haben wir nicht gerade gelernt, wie man eine Eigenschaft aus einem Objekt entfernt? Ich sehe kein a: 1 innerhalb von rest – es wurde entfernt!

Technisch gesehen wurde es eher ausgeschlossen als physisch aus dem Objekt „entfernt“ – und es folgt einem unveränderlichen Muster für das Schreiben von JavaScript und die Verwaltung des Zustands (der Zustand ist unser data).

So würden wir das ohne Objekt-Destrukturierung oder die Rest-Syntax machen, es ist viel mühsamer und erlaubt uns nicht, alle verbleibenden Eigenschaften dynamisch zu erhalten:

const data = { a: 1, b: 2, c: 3 };const a = data.a;const rest = { b: data.b, c: data.c };console.log(a); // 1console.log(rest); // { b: 2, c: 3 }

Eigenschaft dynamisch nach Schlüssel entfernen

Angenommen, wir haben einen Schlüssel, den vielleicht ein Benutzer angegeben hat und den er löschen möchte. Hierfür verwenden wir b. Wie entfernen wir dieses spezielle Element? Alle bisherigen Beispiele waren hart kodierte Werte.

Angenommen, wir haben irgendwo 'b' als Wert, dann können wir diesen dynamisch in unsere Destrukturierungssyntax mit der eckigen Klammern-Syntax übergeben, genau wie bei einer Objektsuche (stattdessen wird hier eine neue Variable basierend auf dem dynamisch übergebenen Wert erstellt):

const data = { a: 1, b: 2, c: 3 };const removeProp = 'b';const { : remove } = data;console.log(remove); // 2

Da wir dynamisch eine neue Variable erstellen, müssen wir ihr mit : remove einen neuen Namen zuweisen. Wie sollen wir sie sonst referenzieren? Wir können nicht auf verweisen, also müssen wir uns das merken.

Allerdings können wir an dieser Stelle wieder die Rest-Syntax einführen, um die Eigenschaft aus dem Objekt zu entfernen:

const data = { a: 1, b: 2, c: 3 };const removeProp = 'b';const { : remove, ...rest } = data;console.log(remove); // 2console.log(rest); // { a: 1, c: 3 }

Da haben Sie es, wir haben erfolgreich eine Eigenschaft dynamisch in JavaScript mit Hilfe von Objektdestrukturierung und der Rest-Syntax gelöscht!

Schauen Sie sich das Live-Beispiel in StackBlitz an, probieren Sie es aus und machen Sie sich damit vertraut:

Zusammenfassung

Wir haben einen langen Weg hinter uns! Diese Technik hilft uns, veränderbare Operationen und das delete-Schlüsselwort zu vermeiden und gibt uns ein unveränderliches Muster zum Entfernen von Eigenschaften aus Objekten in JavaScript.

Wir haben die Objektdestrukturierung verwendet und uns angesehen, wie wir sie mit der Rest-Syntax kombinieren können, um uns eine saubere Lösung zum Entfernen von Objekteigenschaften zu geben.

🏆 Schauen Sie sich meine JavaScript-Kurse an, um die Grundlagen der Sprache, fortgeschrittene Muster, funktionale und objektorientierte Programmierparadigmen und alles, was mit dem DOM zu tun hat, vollständig zu lernen. Eine unverzichtbare Kursreihe für jeden ernsthaften JavaScript-Entwickler.

Viel Spaß beim Programmieren!

P.S. Dieser Blogbeitrag wurde durch eine nette Diskussion auf Twitter ausgelöst, die ich mit Mauricio Correa hatte! Er ist ein großartiger Kerl und Entwickler aus Brasilien.

🎉 Download it free!

Sind Sie bereit, über ForEach hinauszugehen? Machen Sie sich vertraut mit fortgeschrittenen Methoden – Reduce, Find, Filter, Every, Some und Map.

Verstehen Sie vollständig, wie man JavaScript-Datenstrukturen mit unveränderlichen Operationen verwaltet
31 Seiten mit tiefgehender Syntax, Beispiele aus der Praxis, Tipps und Tricks
Schreiben Sie sauberere und besser strukturierte Programmierlogik innerhalb von 3 Stunden