」工欲善其事,必先利其器。「—孔子《論語.錄靈公》
首頁 > 程式設計 > 了解 JavaScript 中的嵌套對象

了解 JavaScript 中的嵌套對象

發佈於2024-11-03
瀏覽:956

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

这种方法的好处是:

  • 可重用性:Caterer 类型可以在代码的其他部分重用,例如不同的交通类型(例如飞机、公共汽车)。
  • 清晰度:分离 Caterer 类型使 Train 类型更清晰、更容易理解。
  • 可维护性:如果Caterer的结构发生变化,只需在一处更新即可。

通过将嵌套对象抽象为单独的类型,您可以增强 TypeScript 代码的组织性和清晰度。这种方法可以实现更好的可重用性和可维护性,从而更容易管理复杂的数据结构。

让我们回顾一下

嵌套对象是 JavaScript 中的一项强大功能,允许组织复杂的数据结构。

通过使用嵌套对象,您可以创建更有意义的数据表示,使您的代码更易于理解和维护。此外,在处理这些复杂对象时,使用 TypeScript 可以帮助增强结构和类型安全性。

版本聲明 本文轉載於:https://dev.to/irenejpopova/understanding-nested-objects-in-javascript-4b31?1如有侵犯,請聯絡[email protected]刪除
最新教學 更多>
  • 掌握 SQL 查詢:&#教師薪資格查詢&# 項目
    掌握 SQL 查詢:&#教師薪資格查詢&# 項目
    您是否希望提升 SQL 技能並學習如何有效管理 MySQL 資料庫? LabEx 提供的教師薪資格式查詢專案就是您的最佳選擇。這個綜合計畫將引導您完成在大學資料庫中查詢和格式化教職員工薪資的過程,為您提供必要的知識和技能,以在資料管理工作中脫穎而出。 介紹 在這個引人入勝的專案中,...
    程式設計 發佈於2024-11-03
  • 分解 WebGL 三角形設置
    分解 WebGL 三角形設置
    WebGL has a track record of being one of Javascript’s more complex API’s. As a web developer intrigued by all that’s interactive, I decided to dive in...
    程式設計 發佈於2024-11-03
  • Python OOPS 基礎
    Python OOPS 基礎
    In real world everything is Object and every object have 2 things behaviour and attribute. Attribute contains data stored in variable and behaviour is...
    程式設計 發佈於2024-11-03
  • 會員訪問與繼承
    會員訪問與繼承
    在Java中,類別的實例變數通常被聲明為私有以保護存取並防止篡改。 繼承不會使私有存取限制無效。 即使子類別繼承了其超類別的所有成員,它也不能存取宣告為 private 的成員。 例如,如果在 TwoDShape 中將寬度和高度宣告為私有,則 Triangle 子類別無法存取它們。 Tri...
    程式設計 發佈於2024-11-03
  • 如何將 CSS 檔案匯入到 LESS 檔案中?
    如何將 CSS 檔案匯入到 LESS 檔案中?
    將 CSS 檔案匯入 LESS 檔案中在 LESS 中,匯入外部樣式表對於組織和維護程式碼來說是一個有用的功能。但是,在匯入不同文件類型時,了解特定要求至關重要。 匯入 .css 檔案與匯入其他 LESS 檔案不同,將 .css 檔案匯入 LESS 檔案需要特別考慮。像往常一樣簡單地使用 @impo...
    程式設計 發佈於2024-11-03
  • 何時在 NumPy 數組賦值中分配額外的記憶體?
    何時在 NumPy 數組賦值中分配額外的記憶體?
    Numpy 陣列賦值:記憶體分配差異在NumPy 中,向陣列賦值有三種常用方法:B = AB[:] = Anumpy.copy(B, A)B = A當您使用B = A 時,您並不是在建立新陣列。相反,您將新名稱 (B) 綁定到現有陣列 (A)。因此,對一個陣列所做的任何修改都會反映在另一個陣列中。 ...
    程式設計 發佈於2024-11-03
  • 項目 f:我建立了註冊表。字段集、懸停效果、漸變、彈出窗口,如何學習?
    項目 f:我建立了註冊表。字段集、懸停效果、漸變、彈出窗口,如何學習?
    創建既時尚又響應靈敏的註冊表單對於現代網路體驗至關重要。在這裡,我們使用 HTML、CSS 和 JavaScript 分解了帶有彈出確認視窗的註冊表單的程式碼。讓我們逐一欄位集深入研究,看看每個部分如何有助於形成使用者友好且視覺吸引力的表單。 在本指南中,我們將逐步學習「如何使用 HTML、CSS...
    程式設計 發佈於2024-11-03
  • 如何解決 Golang 中的「字串和位元組類型不符」錯誤?
    如何解決 Golang 中的「字串和位元組類型不符」錯誤?
    修復:Golang 中String 和Byte 類型不匹配的問題Golang 中,「無效操作:new_str str[i 1](類型不匹配)字串和位元組)”嘗試連接字串和位元組時會發生錯誤。需要明確轉換才能解決此問題。 問題出現在提供的程式碼片段:for i < len(str) - ...
    程式設計 發佈於2024-11-03
  • 如何在 React Native (Android) 中實現推播通知
    如何在 React Native (Android) 中實現推播通知
    有没有想过我们从安装的应用程序收到的通知?或者 Swiggy 或 Zomato 如何通过其创意通知激发我们在凌晨 3 点点餐? ? 让我们深入了解通知的概念! 什么是通知? A 通知是应用程序发送的消息或警报,用于通知用户有关更新、事件或操作的信息,通常在应用程序界面之外传递。 现在...
    程式設計 發佈於2024-11-03
  • 何時將成功回呼函數與 jQuery Ajax 呼叫分離?
    何時將成功回呼函數與 jQuery Ajax 呼叫分離?
    從jQuery Ajax 呼叫解耦成功回調函數使用jQuery ajax 從伺服器檢索資料時,通常的做法是定義成功.ajax () 區塊中的回呼函數。這將回調處理與 AJAX 呼叫緊密結合在一起,限制了靈活性和可重複使用性。 要在 .ajax() 區塊之外定義成功回調,通常需要宣告一個用於儲存返回資...
    程式設計 發佈於2024-11-03
  • 極簡設計初學者指南
    極簡設計初學者指南
    我一直是乾淨和簡單的倡導者——這是我的思維最清晰的方式。然而,就像生活中的大多數任務一樣,不同的工作有不同的工具,設計也是如此。在這篇文章中,我將分享我發現的極簡設計實踐,這些實踐有助於創建乾淨簡單的網站、模板和圖形——在有限的空間內傳達必要的內容。 簡單可能比複雜更難:你必須努力讓你的思維清晰,...
    程式設計 發佈於2024-11-03
  • 了解 React 應用程式中的渲染和重新渲染:它們如何運作以及如何優化它們
    了解 React 應用程式中的渲染和重新渲染:它們如何運作以及如何優化它們
    当我们在 React 中创建应用程序时,我们经常会遇到术语渲染和重新渲染组件。虽然乍一看这似乎很简单,但当涉及不同的状态管理系统(如 useState、Redux)或当我们插入生命周期钩子(如 useEffect)时,事情会变得有趣。如果您希望您的应用程序快速高效,那么了解这些流程是关键。 ...
    程式設計 發佈於2024-11-03
  • 如何在 Node.js 中將 JSON 檔案讀入伺服器記憶體?
    如何在 Node.js 中將 JSON 檔案讀入伺服器記憶體?
    在Node.js 中將JSON 檔案讀入伺服器記憶體為了增強伺服器端程式碼效能,您可能需要讀取JSON 對象從文件到記憶體以便快速存取。以下是在Node.js 中實現此目的的方法:同步方法:對於同步檔案讀取,請利用fs(檔案系統)中的readFileSync () 方法模組。此方法將檔案內容作為字串...
    程式設計 發佈於2024-11-03
  • 人工智慧可以提供幫助
    人工智慧可以提供幫助
    我剛剛意識到人工智慧對開發人員有很大幫助。它不會很快接管我們的工作,因為它仍然很愚蠢,但是,如果你像我一樣正在學習編程,可以用作一個很好的工具。 我要求 ChatGpt 為我準備 50 個項目來幫助我掌握 JavaScript,它帶來了令人驚嘆的項目,我相信當我完成這些項目時,這些項目將使我成為 ...
    程式設計 發佈於2024-11-03
  • Shadcn UI 套件 - 管理儀表板和網站模板
    Shadcn UI 套件 - 管理儀表板和網站模板
    Shadcn UI 套件是預先設計的多功能儀表板、網站範本和元件的綜合集合。它超越了 Shadcn 的標準產品,為那些不僅僅需要基礎知識的人提供更先進的設計和功能。 獨特的儀表板模板 Shadcn UI Kit 提供了各種精心製作的儀表板模板。目前,有 7 個儀表板模板可用,隨著時...
    程式設計 發佈於2024-11-03

免責聲明: 提供的所有資源部分來自互聯網,如果有侵犯您的版權或其他權益,請說明詳細緣由並提供版權或權益證明然後發到郵箱:[email protected] 我們會在第一時間內為您處理。

Copyright© 2022 湘ICP备2022001581号-3