了解 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
});

這種方法的好處是：

• 可重用性：Caterer 類型可以在程式碼的其他部分重複使用，例如不同的交通類型（例如飛機、公車）。
• 清晰度：分離 Caterer 類型使 Train 類型更清晰、更容易理解。
• 可維護性：如果Caterer的結構發生變化，只需在一個地方更新即可。

透過將巢狀物件抽象化為單獨的類型，您可以增強 TypeScript 程式碼的組織性和清晰度。這種方法可以實現更好的可重複使用性和可維護性，從而更容易管理複雜的資料結構。

讓我們回顧一下

巢狀物件是 JavaScript 中的強大功能，可以組織複雜的資料結構。

透過使用嵌套對象，您可以建立更有意義的資料表示，使您的程式碼更易於理解和維護。此外，在處理這些複雜物件時，使用 TypeScript 可以協助增強結構和類型安全性。

以上是了解 JavaScript 中的嵌套對象的詳細內容。更多資訊請關注PHP中文網其他相關文章！