Verschachtelte Objekte in JavaScript verstehen

Objekte sind das, womit Sie es als JavaScript-Entwickler zu tun haben, und das gilt natürlich auch für TypeScript. TypeScript bietet Ihnen mehrere Möglichkeiten, Typdefinitionen für Objekteigenschaften zu definieren. Wir werden uns in diesem Beitrag einige davon ansehen, angefangen mit einfachen Beispielen bis hin zu einigen erweiterten Typdefinitionen.

Verschachtelte Objekte in JavaScript sind Objekte, die andere Objekte oder Arrays als Eigenschaften enthalten. Dies ermöglicht die Erstellung komplexer Datenstrukturen, die reale Entitäten effektiver darstellen können.
In JavaScript können Sie Objekte in anderen Objekten verschachteln. Dies wird auch als Objektverschachtelung oder Objektkomposition bezeichnet. Durch die Objektverschachtelung können Sie komplexe Datenstrukturen erstellen, indem Sie Objekte innerhalb von Objekten organisieren.

Erstellen eines verschachtelten Objekts

Hier ist ein einfaches Beispiel eines verschachtelten Objekts, das ein Benutzerprofil darstellt:

const userProfile = {
    username: "irena_doe",
    age: 30,
    contact: {
        email: "irena@example.com",
        phone: {
            home: "123-456-7890",
            mobile: "987-654-3210"
        }
    },
    preferences: {
        notifications: true,
        theme: "dark"
    }
};

Zum Beispiel:
Das userProfile-Objekt verfügt über Eigenschaften wie Benutzername, Alter und Kontakt.
Die Kontakteigenschaft selbst ist ein Objekt, das E-Mail und Telefon enthält.
Die Telefoneigenschaft ist ein weiteres verschachteltes Objekt mit Privat- und Mobiltelefonnummern.

Zugreifen auf Eigenschaften verschachtelter Objekte

Um auf Eigenschaften innerhalb verschachtelter Objekte zuzugreifen, können Sie die Punkt- oder Klammernotation verwenden. So können Sie auf die Mobiltelefonnummer des Benutzers zugreifen:

const mobileNumber = userProfile.contact.phone.mobile;
console.log(mobileNumber); // Output: 987-654-3210

Sie können auch verschachtelte Eigenschaften ändern. Wenn Sie beispielsweise die Designeinstellung ändern möchten:

userProfile.preferences.theme = "light";
console.log(userProfile.preferences.theme); // Output: light

Verwenden von Typen mit verschachtelten Objekten

Beim Arbeiten mit TypeScript können Sie Typen für verschachtelte Objekte definieren, um die Typsicherheit zu gewährleisten. So können Sie einen Typ für das userProfile-Objekt definieren:

type UserProfile = {
    username: string;
    age: number;
    contact: {
        email: string;
        phone: {
            home: string;
            mobile: string;
        };
    };
    preferences: {
        notifications: boolean;
        theme: string;
    };
};

const user: UserProfile = {
    username: "irena_doe",
    age: 30,
    contact: {
        email: "irena@example.com",
        phone: {
            home: "123-456-7890",
            mobile: "987-654-3210"
        }
    },
    preferences: {
        notifications: true,
        theme: "dark"
    }
};

In diesem TypeScript-Beispiel definiert der UserProfile-Typ die Struktur des userProfile-Objekts und stellt sicher, dass alle Eigenschaften korrekt typisiert sind.

Hier ist ein weiteres Beispiel für verschachtelte Objekte in JavaScript

Sehen wir uns ein komplexeres Beispiel an, das ein Bibliothekssystem darstellt, in dem jedes Buch verschiedene Details hat, einschließlich seines Autors, Herausgebers und seiner Genres.
Verschachtelte Objekte können mit dem Schlüsselwort type selbst definiert werden. TypeScript kann auch die Typdefinitionen eines verschachtelten Objekts in Typdefinitionen abstrahieren. Indexsignaturen können verwendet werden, wenn Sie nicht sicher sind, wie viele Eigenschaften ein Objekt haben wird, Sie sich aber über die Art der Eigenschaften eines Objekts sicher sind

Definieren eines verschachtelten Objekts für ein Bibliothekssystem

So können Sie ein verschachteltes Objekt für dieses Szenario strukturieren:

const userProfile = {
    username: "irena_doe",
    age: 30,
    contact: {
        email: "irena@example.com",
        phone: {
            home: "123-456-7890",
            mobile: "987-654-3210"
        }
    },
    preferences: {
        notifications: true,
        theme: "dark"
    }
};

Lassen Sie uns die Struktur verschachtelter Objekte aufschlüsseln

• Bibliotheksobjekt: Stellt die gesamte Bibliothek dar und enthält Eigenschaften wie Name, Standort und Bücher.
• Standortobjekt: Enthält verschachtelte Objekte für Adresse und Koordinaten.
• Adresse umfasst Straße, Stadt, Bundesland und Postleitzahl. Koordinaten speichert Breiten- und Längengrad.
• Bücher-Array: Ein Array, das mehrere Buchobjekte enthält, von denen jedes Folgendes enthält:
• Titel: Der Titel des Buches.
• Autorenobjekt: Verschachteltes Objekt, das Vorname und Nachname des Autors enthält.

-Veröffentlichungsjahr: Das Jahr, in dem das Buch veröffentlicht wurde.
-Genres: Eine Reihe von Genres, zu denen das Buch gehört.
-Verfügbare Exemplare: Eine Zahl, die angibt, wie viele Exemplare verfügbar sind.

Auf Daten zugreifen und diese bearbeiten

Sie können auf verschiedene Arten auf dieses verschachtelte Objekt zugreifen und es bearbeiten. So ermitteln Sie den Autor des ersten Buches:

const mobileNumber = userProfile.contact.phone.mobile;
console.log(mobileNumber); // Output: 987-654-3210

So fügen Sie der Bibliothek ein neues Buch hinzu:

userProfile.preferences.theme = "light";
console.log(userProfile.preferences.theme); // Output: light

Verwenden einer Methode im Objekt

Sie können auch im Objekt definierte Methoden verwenden. Um beispielsweise die Gesamtzahl der Bücher zu ermitteln:

type UserProfile = {
    username: string;
    age: number;
    contact: {
        email: string;
        phone: {
            home: string;
            mobile: string;
        };
    };
    preferences: {
        notifications: boolean;
        theme: string;
    };
};

const user: UserProfile = {
    username: "irena_doe",
    age: 30,
    contact: {
        email: "irena@example.com",
        phone: {
            home: "123-456-7890",
            mobile: "987-654-3210"
        }
    },
    preferences: {
        notifications: true,
        theme: "dark"
    }
};

Dieses Beispiel veranschaulicht, wie verschachtelte Objekte verwendet werden können, um eine umfassendere Struktur zur Darstellung komplexer Daten, beispielsweise eines Bibliothekssystems, zu erstellen. Durch die gemeinsame Organisation zusammengehöriger Informationen können Sie die Daten einfach verwalten und auf sinnvolle Weise mit ihnen interagieren.

Ein weiteres verschachteltes Beispiel

Um die Organisation und Wartbarkeit des Codes zu verbessern, können Sie verschachtelte Objekte in separate Typen abstrahieren. Mit diesem Ansatz können Sie einen Caterer-Typ separat definieren und ihn innerhalb des Train-Typs verwenden. So können Sie dies in TypeScript tun:

const library = {
    name: "Central City Library",
    location: {
        address: {
            street: "123 Main St",
            city: "Central City",
            state: "CC",
            zip: "12345"
        },
        coordinates: {
            latitude: 40.7128,
            longitude: -74.0060
        }
    },
    books: [
        {
            title: "JavaScript: The Good Parts",
            author: {
                firstName: "Douglas",
                lastName: "Crockford"
            },
            publishedYear: 2008,
            genres: ["Programming", "Technology"],
            availableCopies: 5
        },
        {
            title: "Clean Code",
            author: {
                firstName: "Robert",
                lastName: "C. Martin"
            },
            publishedYear: 2008,
            genres: ["Programming", "Software Engineering"],
            availableCopies: 3
        }
    ],
    totalBooks: function() {
        return this.books.length;
    }
};

Den Zugtyp definieren
Als Nächstes definieren wir den Train-Typ, der den Caterer-Typ für seine Caterer-Eigenschaft verwendet.

const firstBookAuthor = library.books[0].author;
console.log(`${firstBookAuthor.firstName} ${firstBookAuthor.lastName}`); 
// Output: Douglas Crockford

Beispiel eines Zugobjekts

Jetzt können wir eine Instanz des Typs „Zug“ erstellen, einschließlich der Caterer-Details.

library.books.push({
    title: "The Pragmatic Programmer",
    author: {
        firstName: "Andrew",
        lastName: "Hunt"
    },
    publishedYear: 1999,
    genres: ["Programming", "Career"],
    availableCopies: 4
});

Die Vorteile dieses Ansatzes sind:

• Wiederverwendbarkeit: Der Caterer-Typ kann in anderen Teilen Ihres Codes wiederverwendet werden, beispielsweise in verschiedenen Transportarten (z. B. Flugzeuge, Busse).
• Klarheit: Durch die Trennung des Typs „Caterer“ wird der Typ „Zug“ klarer und verständlicher.
• Wartbarkeit: Wenn sich die Struktur des Caterers ändert, müssen Sie sie nur an einer Stelle aktualisieren.

Durch die Abstraktion verschachtelter Objekte in separate Typen können Sie die Organisation und Klarheit Ihres TypeScript-Codes verbessern. Dieser Ansatz ermöglicht eine bessere Wiederverwendbarkeit und Wartbarkeit und erleichtert die Verwaltung komplexer Datenstrukturen.

Fassen wir noch einmal zusammen

Verschachtelte Objekte sind eine leistungsstarke Funktion in JavaScript, die die Organisation komplexer Datenstrukturen ermöglicht.

Durch die Verwendung verschachtelter Objekte können Sie aussagekräftigere Darstellungen von Daten erstellen, wodurch Ihr Code leichter verständlich und wartungsfreundlicher wird. Darüber hinaus kann die Verwendung von TypeScript dazu beitragen, die Struktur- und Typsicherheit beim Umgang mit diesen komplexen Objekten durchzusetzen.

Das obige ist der detaillierte Inhalt vonVerschachtelte Objekte in JavaScript verstehen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!