了解 JavaScript 中的嵌套對象

發佈於2024-11-03

Understanding Nested Objects in JavaScript

对象是 JavaScript 开发人员所要处理的事情，不用说，这也适用于 TypeScript。 TypeScript 为您提供了多种方法来定义对象属性的类型定义。我们将在这篇文章中介绍其中的几个，从简单的示例开始，然后转向一些高级类型定义。

JavaScript 中的嵌套对象是包含其他对象或数组作为其属性的对象。这允许创建可以更有效地表示现实世界实体的复杂数据结构。
在 JavaScript 中，您可以将对象嵌套在其他对象中。这也称为对象嵌套或对象组合。对象嵌套允许您通过在对象内组织对象来创建复杂的数据结构。

创建嵌套对象

这是表示用户配置文件的嵌套对象的简单示例：

const userProfile = {
    username: "irena_doe",
    age: 30,
    contact: {
        email: "[email protected]",
        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: "[email protected]",
        phone: {
            home: "123-456-7890",
            mobile: "987-654-3210"
        }
    },
    preferences: {
        notifications: true,
        theme: "dark"
    }
};

在此 TypeScript 示例中，UserProfile 类型定义了 userProfile 对象的结构，确保所有属性都正确键入。

这是 JavaScript 中嵌套对象的另一个示例

让我们看一个代表图书馆系统的更复杂的示例，其中每本书都有各种详细信息，包括其作者、出版商和流派。
嵌套对象可以使用 type 关键字本身来定义。 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;
    }
};

让我们来分析一下嵌套对象结构

图书馆对象：代表整个图书馆，包含名称、位置和书籍等属性。
位置对象：包含地址和坐标的嵌套对象。
地址包括街道、城市、州和邮政编码。坐标存储纬度和经度。
Books Array：保存多个书籍对象的数组，每个对象包含：
Title：书名。
作者对象：包含作者名字和姓氏的嵌套对象。

-出版年份：书籍出版的年份。
-流派：该书所属的流派数组。
- 可用副本：表示可用副本数量的数字。

访问和操作数据

您可以通过多种方式访问和操作此嵌套对象。以下是如何获取第一本书的作者：

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

使用对象中的方法

您还可以利用对象中定义的方法。例如获取图书总数：

console.log(library.totalBooks()); // Output: 3

此示例说明了如何使用嵌套对象来创建更全面的结构来表示复杂的数据，例如图书馆系统。通过将相关信息组织在一起，您可以轻松地以有意义的方式管理数据并与数据交互。

另一个嵌套示例

为了提高代码组织和可维护性，您可以将嵌套对象抽象为单独的类型。这种方法允许您单独定义 Caterer 类型并在 Train 类型中使用它。以下是在 TypeScript 中执行此操作的方法：

// Define the type for Caterer
type Caterer = {
    name: string;   // Name of the catering company
    address: string; // Address of the catering company
    phone: number;   // Phone number of the catering company
};

定义列车类型
接下来，我们将定义 Train 类型，它将使用 Caterer 类型作为其餐饮属性。

// Define the type for Train
type Train = {
    model: string;                // Model of the train
    trainNumber: string;          // Unique train number
    timeOfDeparture: Date;        // Departure time
    timeOfArrival: Date;          // Arrival time
    caterer: Caterer;             // Reference to the Caterer type
};

火车对象的示例

现在，我们可以创建 Train 类型的实例，包括 Caterer 详细信息。

// Example of a Train object
const train: Train = {
    model: "Shinkansen N700",
    trainNumber: "S1234",
    timeOfDeparture: new Date("2024-10-25T09:00:00Z"),
    timeOfArrival: new Date("2024-10-25T11:30:00Z"),
    caterer: {
        name: "Gourmet Train Catering",
        address: "123 Culinary Ave, Tokyo",
        phone: 1234567890,
    },
};