6 Möglichkeiten zur eleganten Handhabung von Objekten in JavaScript

Vorwort

Wie andere Programmiersprachen hat JavaScript eigene Datentypen wie Zahlen, Zeichenfolgen, Arrays, Objekte usw. Objekte sind ein sehr wichtiger Datentyp in JavaScript. Sie verfügen über viele nützliche Methoden, mit denen Objekte in der täglichen Projektentwicklung problemlos gehandhabt werden können.

In diesem Artikel werden 6 Methoden vorgestellt, die in Projekten eingesetzt werden können. Nutzen Sie die Gelegenheit, Ihr Verständnis für deren Verwendung zu vertiefen.

1. Objekt.freeze()

Object.freeze() verhindert, dass die Daten in einem Objekt geändert werden. Das heißt, sie friert ein Objekt ein, sodass dem Objekt keine Eigenschaften hinzugefügt, aktualisiert oder daraus gelöscht werden können.

const Autor = {
    Name: "Quintion",
    Stadt: "Shenzhen",
    Alter: 18,
    Validierung: wahr,
};

Objekt.freeze(Autor);

Autor.name = "QuintionTang";
Autor.Provinz = "Guangdong";
lösche author.age;
console.log(Autor); // { Name: 'Quintion', Stadt: 'Shenzhen', Alter: 18, Validierung: true }

Wie im obigen Code gezeigt, wird der name aktualisiert, das Attribut „ province hinzugefügt und das Attribut „ age gelöscht, am endgültigen Objekt gibt es jedoch keine Änderungen.

2. Objekt.seal()

Object.seal() ist der Methode Object.freeze() etwas ähnlich. Verhindert das Hinzufügen neuer Eigenschaften zu einem Objekt und das Entfernen von Eigenschaften, ermöglicht jedoch das Ändern und Aktualisieren vorhandener Eigenschaften.

const Autor = {
    Name: "Quintion",
    Stadt: "Shenzhen",
    Alter: 18,
    Validierung: wahr,
};

Objekt.seal(Autor);

Autor.name = "QuintionTang";
Autor.Provinz = "Guangdong";
lösche author.age;
console.log(Autor); // { Name: ‚QuintionTang‘, Stadt: ‚Shenzhen‘, Alter: 18, Validierung: true }

Wie Sie dem obigen Code entnehmen können, ist das Hinzufügen neuer Attribute und das Löschen von Attributen ungültig. Nur das Aktualisieren des name ist wirksam.

3. Objekt.keys()

Object.keys() gibt ein Array zurück, das die Namen aller Schlüssel des Parameterobjekts enthält. Die Reihenfolge der Attributnamen im Array entspricht der Reihenfolge, die beim normalen Durchlaufen des Objekts zurückgegeben wird.

Schauen Sie sich den folgenden Code an:

const Autor = {
    Name: "Quintion",
    Stadt: "Shenzhen",
    Alter: 18,
    Validierung: wahr,
};

console.log(Object.keys(author)); // [ 'Name', 'Stadt', 'Alter', 'Validierung' ]

Sie können sehen, dass das im obigen Code gedruckte Ergebnis ein Array ist, das die Schlüssel als Ausgabe enthält. Die Ausgabeergebnisse können mithilfe von Array-Methoden verarbeitet oder iteriert werden.

console.log(Objekt.Schlüssel(Autor).Länge); // 4

4. Objekt.Werte()

Object.values() ähnelt Object.keys() , aber Object.values() ruft die Werte aller Attribute im Objekt ab und gibt ein Array von Werten zurück.

const Autor = {
    Name: "Quintion",
    Stadt: "Shenzhen",
    Alter: 18,
    Validierung: wahr,
};

console.log(Objekt.Werte(Autor)); // [ 'Quintion', 'Shenzhen', 18, wahr ]

5. Objekt.erstellen()

Object.create() erstellt ein neues Objekt basierend auf dem Prototyp __proto__ eines vorhandenen Objekts. Sehen wir uns den folgenden Code an:

const Autor = {
    Vorname: "Quintion",
    Nachname: "Tang",
    vollständiger Name() {
        gibt `${this.firstName} ${this.lastName}` zurück;
    },
};

const neuerAuthor = Object.create(Autor);
console.log(neuer Autor); // {}
neuerAutor.Vorname = "Ronb";
neuerAutor.Nachname = "Joy";
console.log(neuerAutor.vollständigerName()); // Ronb Joy

Im obigen Code wird object. create() verwendet, um ein neues Objekt newAuthor mit dem Prototyp author zu erstellen. Auf diese Weise können Sie im neuen Objekt newAuthor die entsprechenden Attributwerte genauso ändern, wie Sie die Attributwerte des author ändern. Sieht das nicht ein bisschen wie Vererbung aus? Ja, Klassenvererbung kann mit Object.create erreicht werden.

6. Objekt.Einträge()

Mit Object.entries() können Sie die Schlüssel und Werte eines Objekts abrufen und ein mehrdimensionales Array zurückgeben, in dem jede Dimension jeden Schlüssel und Wert enthält, z. B. [鍵, 值]

const Autor = {
    Vorname: "Quintion",
    Nachname: "Tang",
    vollständiger Name() {
        gibt `${this.firstName} ${this.lastName}` zurück;
    },
};

console.log(Objekt.Einträge(Autor));

Die Ausgabe lautet wie folgt:

[
  [ 'Vorname', 'Quintion' ],
  [ 'Nachname', 'Tang' ],
  [ 'vollständigerName', [Funktion: vollständigerName] ]
]

Zusammenfassen

Dieser Artikel stellt kurz die sechs gängigen Methoden von Objekten vor und bietet entsprechende Beispielcodes. Beim tatsächlichen Codierungs- und Verarbeitungsprozess von Objekten kann die Verwendung der oben genannten Methoden den Code eleganter gestalten.

Damit ist dieser Artikel über 6 Möglichkeiten zur eleganten Objektverarbeitung in JavaScript abgeschlossen. Weitere Inhalte zur Objektverarbeitung in JavaScript 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!