了解 JavaScript 中的嵌套對象-js教程-PHP中文網

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 屬性本身就是一個包含電子郵件和電話的物件。
電話屬性是另一個包含家庭號碼和手機號碼的嵌套物件。

存取嵌套物件屬性

要存取巢狀物件中的屬性，您可以使用點表示法或方括號表示法。以下是取得使用者手機號碼的方法：

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

登入後複製

讓我們來分析一下嵌套物件結構

圖書館物件：代表整個圖書館，包含名稱、位置和書籍等屬性。
位置物件：包含位址和座標的巢狀物件。
地址包括街道、城市、州和郵遞區號。座標存儲緯度和經度。
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;
    }
};

登入後複製

定義列車類型
接下來，我們將定義 Train 類型，它將使用 Caterer 類型作為其餐飲屬性。

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

登入後複製

火車物件的範例

現在，我們可以建立 Train 類型的實例，包括餐飲商詳細資訊。

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

登入後複製