JavaScript のネストされたオブジェクトを理解する-jsチュートリアル-php.cn

Understanding Nested Objects in 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
});

ログイン後にコピー