JavaScript のネストされたオブジェクトを理解する

JavaScript 開発者が扱うのはオブジェクトであり、言うまでもなく、これは TypeScript にも当てはまります。 TypeScript では、オブジェクト プロパティの型定義を定義する複数の方法が提供されます。この記事では、簡単な例から始めて、いくつかの高度な型定義に進みながら、それらのいくつかを見ていきます。

JavaScript のネストされたオブジェクトは、他のオブジェクトまたは配列をプロパティとして含むオブジェクトです。これにより、現実世界のエンティティをより効果的に表現できる複雑なデータ構造の作成が可能になります。
JavaScript では、オブジェクトを他のオブジェクト内にネストできます。これは、オブジェクトのネストまたはオブジェクトの合成とも呼ばれます。オブジェクトのネストを使用すると、オブジェクト内でオブジェクトを編成することで、複雑なデータ構造を作成できます。

ネストされたオブジェクトの作成

ユーザー プロファイルを表すネストされたオブジェクトの簡単な例を次に示します。

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"
    }
};

例:
userProfile オブジェクトには、ユーザー名、年齢、連絡先などのプロパティがあります。
contact プロパティ自体は、電子メールと電話を含むオブジェクトです。
Phone プロパティは、自宅番号と携帯電話番号を含む別のネストされたオブジェクトです。

ネストされたオブジェクトのプロパティへのアクセス

ネストされたオブジェクト内のプロパティにアクセスするには、ドット表記または括弧表記を使用できます。ユーザーの携帯電話番号にアクセスする方法は次のとおりです:

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

ネストされたプロパティを変更することもできます。たとえば、テーマの設定を変更したい場合:

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

ネストされたオブジェクトでの型の使用

TypeScript を使用する場合、ネストされたオブジェクトの型を定義して型の安全性を確保できます。 userProfile オブジェクトのタイプを定義する方法は次のとおりです:

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"
    }
};

この TypeScript の例では、UserProfile 型によって userProfile オブジェクトの構造が定義され、すべてのプロパティが正しく型指定されることが保証されます。

これは、JavaScript のネストされたオブジェクトの別の例です。

図書館システムを表す、より複雑な例を見てみましょう。各書籍には、著者、出版社、ジャンルなどのさまざまな詳細が含まれています。
ネストされたオブジェクトは、type キーワード自体を使用して定義できます。 TypeScript は、ネストされたオブジェクトの型定義を型定義に抽象化することもできます。インデックス署名は、オブジェクトが持つプロパティの数は不明だが、オブジェクトのプロパティのタイプは確実である場合に使用できます

図書館システムのネストされたオブジェクトの定義

このシナリオでネストされたオブジェクトを構造化する方法は次のとおりです。

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"
    }
};

ネストされたオブジェクト構造を詳しく見てみましょう

• 図書館オブジェクト: 図書館全体を表し、名前、場所、書籍などのプロパティが含まれます。
• Location オブジェクト: 住所と座標のネストされたオブジェクトが含まれます。
• 住所には、番地、都市、州、郵便番号が含まれます。 座標には緯度と経度が格納されます。
• Books 配列: 複数の書籍オブジェクトを保持する配列。それぞれに以下が含まれます。
• タイトル: 本のタイトル
• 著者オブジェクト: 著者の姓と名を含むネストされたオブジェクト。

-出版年: 本が出版された年。
- ジャンル: 本が属する一連のジャンル。
-利用可能な部数: 利用可能な部数を示す数値。

データへのアクセスと操作

このネストされたオブジェクトにはさまざまな方法でアクセスして操作できます。最初の本の著者を取得する方法は次のとおりです:

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

新しい本をライブラリに追加するには:

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

オブジェクト内でのメソッドの使用

オブジェクト内で定義されたメソッドを利用することもできます。たとえば、本の総数を取得するには:

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"
    }
};

この例は、ネストされたオブジェクトを使用して、図書館システムなどの複雑なデータを表すより包括的な構造を作成する方法を示しています。関連情報をまとめて整理することで、データを簡単に管理し、有意義な方法で操作できるようになります。

別のネストされた例

コードの構成と保守性を向上させるために、ネストされたオブジェクトを別の型に抽象化できます。このアプローチにより、Caterer タイプを個別に定義し、Train タイプ内で使用することができます。 TypeScript でこれを行う方法は次のとおりです:

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;
    }
};

列車タイプの定義
次に、Caterer プロパティとして Caterer タイプを使用する Train タイプを定義します。

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

電車オブジェクトの例

これで、ケータリング業者の詳細を含む列車タイプのインスタンスを作成できます。

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

このアプローチの利点は次のとおりです。

• 再利用性: Caterer タイプは、さまざまな交通手段 (飛行機、バスなど) など、コードの他の部分で再利用できます。
• 明確さ: Caterer タイプを分離することで、Train タイプがより明確になり、理解しやすくなります。
• 保守性: Caterer の構造が変更された場合、1 か所で更新するだけで済みます。

ネストされたオブジェクトを個別の型に抽象化することで、TypeScript コードの構成と明瞭さを強化できます。このアプローチにより、再利用性と保守性が向上し、複雑なデータ構造の管理が容易になります。

要約しましょう

ネストされたオブジェクトは、複雑なデータ構造の編成を可能にする JavaScript の強力な機能です。

ネストされたオブジェクトを使用すると、より意味のあるデータ表現を作成でき、コードの理解と保守が容易になります。さらに、TypeScript を使用すると、これらの複雑なオブジェクトを扱うときに構造と型の安全性を確保するのに役立ちます。

以上がJavaScript のネストされたオブジェクトを理解するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。